步骤一：集成standard标准的eslint进你的项目中
首先准备一个没有加入eslint的vue项目
1.安装eslint的包
npm i eslint -D
2.初始化eslint，并生成eslint配置文件
npx eslint --init
3.依次按照问题选择自己需要的配置
你想要的怎么使用eslint？
选择第三个：检查，发现问题，并且约束代码风格
你的项目使用的是什么模块？
选择第一个，js （也就是es6模块）
你使用的项目框架为？
选择第二个vue
你的项目使用了ts吗？
选择no，没使用
你的代码运行在什么环境？
记得一定要把两个都勾上，运行在浏览器和node环境
你想为你的项目怎么定义eslint风格？
选择第一个：使用一个流行的风格指导
第二个的意思为：通过回答问题来生成你自己的风格
哪种eslint风格你想要的遵守？
选择standard风格（这里看自己的eslint倾向性了，也可以选airbnb）
你的配置文件的格式是什么？
选择第一个：使用js格式
这里列出了需要安装的包，它问你是否要立即安装？
选择yes
你想使用的哪种包管理器？
选择npm
最终完整的配置如下：
最后你会发现你的代码已经加入进去了eslint的各种包，以及生成了eslint的配置文件。
但是，此时你可能会感到很疑惑，我到底是把eslint加进去了没有？毕竟运行没有报错，git commit也不会报错。
答：此时的项目状态是：你已经把带有standard标准的eslint集成到你的项目中了。但是你并没有使用它。
如何验证已经有eslint并可以使用了？
在package.json中的scripts增加这行代码：“lint”: “eslint src/**/*.{js,vue} --fix”
然后运行 npm run lint 命令,eslint就会启动起来工作去检测src下的文件并进行修复。如图，你可能会得到以下错误：
这些错误说明了你已经集成了eslint。此时我们需要进行下一步，就是在git commit的时候自动去检测并修复代码。
步骤二：添加git commit时自动触发eslint进行检测并修复
工具前置知识，工具介绍：
- lint-staged 是一个专门针对已放入 Git 暂存区的文件进行检查的工具
- husky 能提供监听 Git 操作并执行脚本代码的能力
一：安装配置 lint-staged：实现专门针对 git 暂存区的文件进行风格检查
(1).安装依赖包
npm i lint-staged --save-dev
(2).在 package.json 中配置 lint-staged，利用它来调用 eslint 和 stylelint 去检查暂存区内的代码
{
// ...
"lint-staged": {
"*.{vue,js}": [
"npm run lint"
]
}
}
二：安装配置 husky：实现在git 提交时执行 lint-staged
(1).安装依赖包
npm i husky --save-dev
(2)在 package.json中配置快捷命令，用来在安装项目依赖时生成 husky 相关文件
{
// ...
"scripts": {
// ...
"postinstall": "husky install"
},
}
(3)配置后执行 npm i 就会在项目根目录生成 .husky/_ 目录。
(4)执行以下代码,使用 husky 生成 git 操作的监听钩子脚本
npx husky add .husky/pre-commit "npx lint-staged"
执行后成功后会生成脚本文件 .husky/pre-commit （在vscode中可以看到），它包含了命令行语句： npx lint-staged
到此你就完成了git commit时自动去触发eslint的检测和修复。测试一下：
修改部分代码（一定要修改下，因为lint-staged是对暂存区的文件进行检测），然后git add . git commit一下，有以下的代码出现，就说明git commit时自动触发了eslint
接下来手动修复下错误：这些错误都是eslint无法自动修复的，需要我们自己手动修复。这些eslint的错误，修复起来很简单，直接copy下来百度就ok了。这里不做详细的说明了。
最后，添加prettier，让eslint来做检测，让prettier主要做格式化。关于是否有必要添加prettier，以及添加prettier的好处都在上一篇文章说明了，可以跳转查看，这里就不赘述了。
步骤三：加入prettier
1.安装必须的包
- prettier - prettier 本体
- eslint-config-prettier - 关闭 ESLint 中与 Prettier 中发生冲突的规则
- eslint-plugin-prettier - 将 Prettier 的规则设置到 ESLint 的规则中
npm i prettier eslint-config-prettier@6 eslint-plugin-prettier@3 -D
安装时的报错解决：指定某个大版本就ok了，这个报错很明显是因为eslint和eslint-plugin-prettier的版本搭配不正确导致的。如果你的eslint版本高，不会报错，就不用指定某个大版本
2.在根目录添加一个 .prettierrc.js 文件，内容如下：
module.exports = {
tabWidth: 4, // 指定每个缩进级别的空格数<int>，默认2
useTabs: false, // 用制表符而不是空格缩进行<bool>，默认false
printWidth: 300, //一行的字符数，如果超过会进行换行，默认为80
singleQuote: true, //字符串是否使用单引号，默认为false，使用双引号
endOfLine: 'auto', //避免报错delete (cr)的错
proseWrap: 'always',
semi: false, // 不加分号
trailingComma: 'none', // 结尾处不加逗号
htmlWhitespaceSensitivity: 'ignore', // 忽略'>'下落问题
}
3.修改 ESLint 配置，使 Eslint 兼容 Prettier 规则
plugin:prettier/recommended 的配置需要注意的是，一定要放在最后。因为extends中后引入的规则会覆盖前面的规则。也就是说你可以在.prettierrc.js 中定义自己的风格代码。到时候，本地的prettier插件会根据这个文件来格式化，项目安装的prettier也会根据该文件来格式化。且eslint的风格与prettier风格冲突的地方会以prettier为主
const {
defineConfig } = require('eslint-define-config')
module.exports = defineConfig({
/// ...
extends: [
'plugin:vue/essential',
'@vue/standard'
'plugin:prettier/recommended'
],
// ...
})
总结：
已有项目添加eslint，确实比一开始初始化生成eslint的时候麻烦的多了。建议大家真想用eslint就一开始就加入进去。后期加进去的话，需要花挺多的时间和精力去处理eslint问题。
另外的话，这里的博客是使用的vue2进行的演示，其实vue3添加eslint的步骤是一模一样的。主要问题在于版本问题，vue2的会有更多的版本搭配问题，其实vue3还更简单。
本次vue2的项目源码地址：https://github.com/rui-rui-an/vue2_add_eslint_prettier