相信小伙伴们在小学时都经历过小平头时代，那时的教务处主任天天学校门口巡视，同学们更是一个个心惊胆战。那时的我们就好比一行行代码，如果发型不一，上来就是两…55555 不说了…
所以说统一样式更有助于我们更统一的管理，也会使我们少犯错误，这时 ESlint 站出来了，它就是教务处主任的化身，会将我们的形形色色的发型 (代码) 统一起来，虽然验证过得代码不一定完美，但是一定相对规范。
什么是 ESLint?
ESLint 是一个用来识别 ECMAScript 并且按照规则给出报告的代码检测工具，使用它可以避免低级错误和统一代码的风格。如果每次在代码提交之前都进行一次 eslint 代码检查，就不会因为某个字段未定义为 undefined 或 null 这样的错误而导致服务崩溃，可以有效的控制项目代码的质量。
ESlint 的主要作用
- 代码质量问题：使用 / 编写的方式有可能有问题 (problematic patterns)
- 代码风格问题：风格不符合一定规则 (doesn’t adhere to certain style guidelines)
就好比有些同学喜欢使用 tab 缩进，有些喜欢空格，有些喜欢 2 个空格，有些喜欢 4 个。这就难办了，到底听谁的？
最后经过一番舌战，选定 2 个空格作为标准。于是乎我们在根目录创建了配置文件.eslintrc 并写入了我们的伦果
// .eslintrc
{
"indent": ["error", 2]
}为了大家的提高大家的开发体检及提交的一致性，你还‘威逼利诱’的让大家下载了 vscode 插件，没有通过 ESLint 校验的代码 VSCode 会给予下滑波浪线提示，提醒他好好检查。
为了保证提交代码的万无一失，你还添加一个 pre-commit 钩子 eslint --ext .js src，确保没有通过 lint 的代码不会被提交。
最后还要求了大家使用 eslint --fix 将之前的所有代码，一键修改成了新规范下的代码格式。
什么是 Prettier?
一个流行的代码格式化工具的名称，它能够解析代码，使用你自己设定的规则来重新打印出格式规范的代码。
Tony 老师认为发型很重要，Prettier 也这么认为。 Prettier 认为格式很重要，但是格式好麻烦，我来帮你们定好吧。简单来说，不需要我们再思考究竟是用 single quote，还是 double quote 这些乱起八糟的格式问题，Prettier 帮你处理。最后的结果，可能不是你完全满意，但是，绝对不会丑。
Prettier 接管了两个问题其中的代码格式的问题，而使用 Prettier + ESLint 就完完全全解决了两个问题
当然，教务处主任和 Tony 老师对发型的理解‘不共戴天’，所以我们还需要对他们进行一番深入交流。下面就让我们一起开始吧！
正文
依赖安装
在你的项目中安装以下依赖，这些依赖只需安装在开发环境配置中
npm install eslint prettier --save-dev
npm install eslint-config-prettier eslint-plugin-prettier --save-devvscode 插件安装
安装 vscode 插件 ESLint 和 Prettier - Code formatter
如果希望在每次保存时自动格式化代码可以加上以下配置
项目下创建 .vscode/settings.json 配置 (也可以配置到全局)
配置每次报错自动 ESLint 检查规则并格式化
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}添加配置文件
添加配置文件 .eslintrc.js
// .eslintrc
module.exports = {
plugins: ['prettier'], // prettier 一定要是最后一个，才能确保覆盖
rules: {
'prettier/prettier': 'error',
},
extends: ['plugin:prettier/recommended'],
};上面配置在运行报错时可选以下配置
// .eslintrc
module.exports = {
plugins: ['prettier'],
parser: "vue-eslint-parser",
parserOptions: {
sourceType: 'module',
ecmaVersion: 2020,
parser: 'babel-eslint',
},
rules: {
'prettier/prettier': 'error',
"parser": 0
},
extends: ['plugin:prettier/recommended'],
};以下是我的个人配置，仅供参考
创建配置文件 .prettierrc.js
//.prettierrc.js
module.exports = {
// 一行最多 120 字符
printWidth: 120,
// 使用 2 个空格缩进
tabWidth: 2,
// 不使用 tab 缩进，而使用空格
useTabs: false,
// 行尾需要有分号
semi: true,
// 使用单引号代替双引号
singleQuote: true,
// 对象的 key 仅在必要时用引号
quoteProps: 'as-needed',
// jsx 不使用单引号，而使用双引号
jsxSingleQuote: false,
// 末尾使用逗号
trailingComma: 'all',
// 大括号内的首尾需要空格 { foo: bar }
bracketSpacing: true,
// 箭头函数，只有一个参数的时候，也需要括号
arrowParens: 'always',
// 每个文件格式化的范围是文件的全部内容
rangeStart: 0,
rangeEnd: Infinity,
// 不需要写文件开头的 @prettier
requirePragma: false,
// 不需要自动在文件开头插入 @prettier
insertPragma: false,
// 使用默认的折行标准
proseWrap: 'preserve',
// 根据显示样式决定 html 要不要折行
htmlWhitespaceSensitivity: 'css',
// 换行符使用 lf
endOfLine: 'lf',
};
添加命令
// package.json中scripts中加入
"lint": "eslint --ext .js,.vue src", // 检查项目是否符合eslint规则
"prettier": "prettier --write .", // 一键格式化所有文件忽略文件
当然，在特殊情况下，比如某个学生是校长的儿子，女儿之类的，教务处长总会睁一只眼，闭一只眼。所以我们也需要进行一些选择性的忽视。
eslint 忽略文件
.eslintignore
prettier 忽略文件
.prettierignore
忽略规则与.gitignore 一致
报错及异常情况
Tip1: 执行 npm run lint 报 'prettier/prettier': context.getPhysicalFilename is not a function
移除以下依赖，项目中不存在的就不用移除
npm rm @vue/cli-plugin-babel @vue/cli-plugin-eslint @vue/eslint-config-prettier eslint eslint-plugin-prettier eslint-plugin-vue prettier安装指定版本的依赖
npm i -D @vue/[email protected] @vue/[email protected] @vue/[email protected] [email protected] [email protected] [email protected] [email protected]
Tip2: 执行 npm run lint 报 # Vue error: Parsing error: Unexpected token <
在.eslintrc.js 中加入
parser: 'vue-eslint-parser'
Tip3 执行 npm run dev 报 Cannot find module 'core-js/modules/es.array.concat.js'
在 babel.config.js 文件中的 presets 添加 userBuiltIns
module.exports = {
presets: [['@vue/app',{ useBuiltIns: "entry" }]],
};源码附件已经打包好上传到百度云了，大家自行下载即可～
链接: https://pan.baidu.com/s/14G-b...
提取码: yu27
百度云链接不稳定，随时可能会失效，大家抓紧保存哈。
如果百度云链接失效了的话，请留言告诉我，我看到后会及时更新～
开源地址
码云地址：
http://github.crmeb.net/u/defu
Github 地址：
http://github.crmeb.net/u/defu
开源不易，Star 以表尊重，感兴趣的朋友欢迎 Star，提交 PR，一起维护开源项目，造福更多人！