項(xiàng)目背景
首先我用的是VSCODE編輯器
安裝了 prettier 插件
用vue-cli腳手架創(chuàng)建的項(xiàng)目
想要解決格式化代碼的沖突問(wèn)題，就需要知道規(guī)則的配置文件都在哪兒
- VSCODE setting.json里面可以配置prettier的規(guī)則
- 項(xiàng)目根目錄可以配置prettier規(guī)則
項(xiàng)目根目錄的prettier配置文件有兩種，
一種是prettier configuration files，一種是.editorconfig
.editorconfig比prettier configuration files的優(yōu)先級(jí)更高
項(xiàng)目根目錄的規(guī)則比VSCODE setting.json里配置的規(guī)則優(yōu)先級(jí)更高
// prettier規(guī)則優(yōu)先級(jí)
`.editorconfig` > `prettier configuration files` > `setting.json`
- 項(xiàng)目根目錄eslint配置文件可以配置規(guī)則
（項(xiàng)目根目錄的 .eslintrc.js 文件）
三個(gè)地方的規(guī)則統(tǒng)一了，格式化才不會(huì)報(bào)warning
另外如果你安裝了Vetur，Vetur好像也帶格式化，如果以上三項(xiàng)規(guī)則統(tǒng)一了還是出錯(cuò)，可以看下是否是Vetur在搗鬼
原理:
prettier的規(guī)則是負(fù)責(zé)格式化代碼的，
eslint的規(guī)則是負(fù)責(zé)檢查文件是否符合規(guī)則的，
我沒(méi)有開啟eslint的autoFix，
格式化的工作全部交給了prettier，
eslint只負(fù)責(zé)檢查，
這么配置感覺挺好用的。
prettier插件關(guān)于配置文件的說(shuō)明
//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 # 空格縮進(jìn)
indent_size = 2 # 縮進(jìn)空格為2個(gè)
end_of_line = lf # 文件換行符是 linux 的 `\n`
charset = utf-8 # 文件編碼是 utf-8
trim_trailing_whitespace = true # 不保留行末的空格
insert_final_newline = true # 文件末尾添加一個(gè)空行
curly_bracket_next_line = false # 大括號(hào)不另起一行
spaces_around_operators = true # 運(yùn)算符兩遍都有空格
indent_brace_style = 1tbs # 條件語(yǔ)句格式是 1tbs
[*.{js,vue,ts}] # 對(duì)所有的 js 文件生效
quote_type = single # 字符串使用單引號(hào)
[*.{html,less,css,json}] # 對(duì)所有 html, less, css, json 文件生效
quote_type = double # 字符串使用雙引號(hào)
[package.json] # 對(duì) package.json 生效
indent_size = 2 # 使用2個(gè)空格縮進(jìn)
