ESLint ：代码检查+代码格式化工具。
Prettier：代码格式化工具。
一般的代码格式化工作，ESLint完全可以胜任，为什么要用Prettier代替ESLint的代码格式化功能？简而言之，Prettier的代码格式化功能比ESLint更强大，配置更简单，通过配置，ESLint可以使用Prettier的代码规则进行校验，如果不配置好，会出现冲突，导致二者不能配合使用。
下面详细介绍如何配置ESLint+Prettier在VSCode中开发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)、这三个插件并安装。
二、配置
可以在工程根木下执行命令 eslint --init 生成.eslintrc.js文件，当然也可以手动创建该文件，一共有四个文件：
.eslintignore：忽略代码检查的配置文件
.eslintrc.js：代码检查规则的配置文件
.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配置，文件->首选项->设置
clipboard.png
在设置页,点击右上角第一个按钮，打开setting.json，修改内容为：
{
//保存自动格式化
"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自动修复错误
"source.fixAll.eslint": true,
//配置 ESLint 检查的文件类型
"eslint.validate": [
"javascript",
"javascriptreact",
"html",
"vue"
]
}
网友评论