项目背景
首先我用的是VSCODE编辑器
安装了 prettier 插件
用vue-cli脚手架创建的项目
想要解决格式化代码的冲突问题,就需要知道规则的配置文件都在哪儿
- VSCODE setting.json里面可以配置prettier的规则
- 项目根目录可以配置prettier规则
项目根目录的prettier配置文件有两种,
一种是prettier configuration files,一种是.editorconfig
.editorconfig
比prettier configuration files
的优先级更高
项目根目录的规则比VSCODE setting.json里配置的规则优先级更高
// prettier规则优先级
`.editorconfig` > `prettier configuration files` > `setting.json`
- 项目根目录eslint配置文件可以配置规则
(项目根目录的 .eslintrc.js 文件)
三个地方的规则统一了,格式化才不会报warning
另外如果你安装了Vetur,Vetur好像也带格式化,如果以上三项规则统一了还是出错,可以看下是否是Vetur在捣鬼
原理:
prettier的规则是负责格式化代码的,
eslint的规则是负责检查文件是否符合规则的,
我没有开启eslint的autoFix,
格式化的工作全部交给了prettier,
eslint只负责检查,
这么配置感觉挺好用的。
//prettier.config.js
module.exports = {
printWidth: 100,
tabWidth: 2,
useTabs: false,
singleQuote: true,
semi: true,
trailingComma: 'all',
bracketSpacing: true,
arrowParens: 'always',
};
//.editorconfig
[*] # 匹配所有的文件
indent_style = space # 空格缩进
indent_size = 2 # 缩进空格为2个
end_of_line = lf # 文件换行符是 linux 的 `\n`
charset = utf-8 # 文件编码是 utf-8
trim_trailing_whitespace = true # 不保留行末的空格
insert_final_newline = true # 文件末尾添加一个空行
curly_bracket_next_line = false # 大括号不另起一行
spaces_around_operators = true # 运算符两遍都有空格
indent_brace_style = 1tbs # 条件语句格式是 1tbs
[*.{js,vue,ts}] # 对所有的 js 文件生效
quote_type = single # 字符串使用单引号
[*.{html,less,css,json}] # 对所有 html, less, css, json 文件生效
quote_type = double # 字符串使用双引号
[package.json] # 对 package.json 生效
indent_size = 2 # 使用2个空格缩进