ESLint ：代碼檢查+代碼格式化工具。
Prettier：代碼格式化工具欣范。
一般的代碼格式化工作杯矩，ESLint完全可以勝任亮元，為什么要用Prettier代替ESLint的代碼格式化功能？簡而言之循头，Prettier的代碼格式化功能比ESLint更強大绵估，配置更簡單炎疆，通過配置，ESLint可以使用Prettier的代碼規(guī)則進行校驗国裳，如果不配置好形入，會出現(xiàn)沖突，導致二者不能配合使用缝左。
下面詳細介紹如何配置ESLint+Prettier在VSCode中開發(fā)Vue代碼：
一亿遂、安裝
1、安裝 eslint 以及 prettier
npm i eslint prettier -D
2盒使、安裝eslint-plugin-prettier插件
npm i prettier eslint-config-prettier eslint-plugin-prettier -D
3崩掘、在 VSCode中插件安裝中搜索 ESLint、Prettier - Code formatter少办、Vetur(因為Prettier不能格式化vue文件的template苞慢，所以使用Vetur)、這三個插件并安裝英妓。
二挽放、配置
可以在工程根木下執(zhí)行命令 eslint --init 生成.eslintrc.js文件，當然也可以手動創(chuàng)建該文件蔓纠，一共有四個文件：
.eslintignore：忽略代碼檢查的配置文件
.eslintrc.js：代碼檢查規(guī)則的配置文件
.prettierignore：忽略代碼格式化的配置文件
.prettierrc：代碼格式化的配置文件
1辑畦、.eslintignore配置文件如下：
node_modules/
**/*.spec.*
**/style/
*.html
/components/test/*
es/
lib/
_site/
dist/
package.json
2、.eslintrc.js配置文件如下：
module.exports = {
root: true,
env: {
browser: true,
node: true,
jasmine: true,
jest: true,
es6: true,
},
parserOptions: {
parser: 'babel-eslint',
},
extends: ['plugin:vue/essential', 'plugin:prettier/recommended'],
plugins: ['vue', 'prettier'],
rules: {
'prettier/prettier': 'error',
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
},
};
3腿倚、.prettierignore配置文件如下：
**/*.svg
node_modules/
package.json
lib/
es/
dist/
_site/
coverage/
CNAME
LICENlock
netlifSE
yarn.y.toml
yarn-error.log
*.sh
*.snap
.gitignore
.npmignore
.prettierignore
.DS_Store
.editorconfig
.eslintignore
**/*.yml
components/style/color/*.less
**/assets
.gitattributes
.stylelintrc
.vcmrc
.logo
.npmrc.template
.huskyrc
4纯出、.prettierrc配置文件如下：
{
"singleQuote": true,
"trailingComma": "all",
"printWidth": 100,
"proseWrap": "never",
"endOfLine": "auto",
"overrides": [
{
"files": ".prettierrc",
"options": {
"parser": "json"
}
}
]
}
5、修改VSCode配置敷燎，文件->首選項->設(shè)置
在設(shè)置頁,點擊右上角第一個按鈕暂筝，打開setting.json，修改內(nèi)容為：
{
//保存自動格式化
"editor.formatOnSave": true,
//.vue文件template格式化支持硬贯，并使用js-beautify-html插件
"vetur.format.defaultFormatter.html": "js-beautify-html",
// js-beautify-html格式化配置焕襟，屬性強制換行
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "force-aligned"
}
},
//保存時eslint自動修復(fù)錯誤
"source.fixAll.eslint": true,
//配置 ESLint 檢查的文件類型
"eslint.validate": [
"javascript",
"javascriptreact",
"html",
"vue"
]
}
