千万注意： 配置完成后， 重启项目！！！ 重启项目！！！
版本：
"@vue/cli-plugin-eslint": "^5.0.8",
"babel-eslint": "^10.1.0",
"eslint": "^7.32.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-config-prettier": "^8.8.0",
"eslint-plugin-import": "^2.27.5",
"eslint-plugin-jsx-a11y": "^6.7.1",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-vue": "^9.14.0",
"prettier": "^2.8.8",
"prettier-eslint-cli": "^7.1.0"
安装 插件
完整包 安装：npm i eslint prettier eslint-plugin-prettier eslint-config-prettier prettier-eslint-cli babel-eslint eslint-plugin-vue @vue/cli-plugin-eslint eslint-plugin-jsx-a11y eslint-plugin-import eslint-config-airbnb -D
vue 选择主要安装：npm i prettier eslint-plugin-prettier eslint-config-prettier babel-eslint eslint-plugin-jsx-a11y eslint-plugin-import eslint-config-airbnb -D
单个安装：
npm i eslint@7 prettier -D
npm i eslint-plugin-prettier eslint-config-prettier prettier-eslint-cli -D
npm install babel-eslint eslint-plugin-vue @vue/cli-plugin-eslint -D
npm install eslint-plugin-jsx-a11y eslint-plugin-import eslint-config-airbnb -D
eslint 《主要》核心代码
prettier《主要》插件的核心代码
eslint-plugin-prettier 《主要》将prettier作为ESLint规范来使用
eslint-config-prettier 《主要》解决ESLint中的样式规范和prettier中样式规范的冲突，以prettier的样式规范为准，使ESLint中的样式规范自动失效
prettier-eslint-cli :prettier-eslint-cli 允许你对多个文件用prettier-eslint进行格式化。
那么 `prettier-eslint` 是怎么让结果变得正确了呢？昨天我去它的 github 看了看，原来它是先把代码用 prettier 格式化，然后再用 ESLint fix。
babel-eslint《主要》:eslint 与 babel 整合包
eslint-plugin-vue @vue/cli-plugin-eslint eslint 与 vue 整合包
eslint-plugin-jsx-a11y eslint-plugin-import eslint-config-airbnb 《主要》
引入Airbnb规则
为了避免我们自己按照 Eslint 的规则一个一个来个性化定制规则，可以引用可以使用GitHub - airbnb/javascript: JavaScript Style Guide规范来定义规则。Airbnb 的这份编码规范是互联网上最受欢迎的 JavaScript 编码规范之一。 它几乎涵盖了 JavaScript 的各个方面
初始化 eslint， 获得 .eslitrc.js 配置文件
npx eslint --init (键盘控制 左右选择)
在 .eslintrc.js 中 修改属性
{
"extends":[
"...",
prettier
]
}
上面 将部分 "ESLint" 的规则禁用了， 避免 Prettier 格式化之后的代码 导致 ESLint 报错而已
下面 将两者结合
下载插件
npm install eslint-plugin-prettier -D
在 .eslintrc.js 中 修改属性
{
"plugins":["prettier"],
"rules":{
"prettier/prettier":"error"
}
}
简化后 可以直接 extend 一下 (将第三个 删除即可，不删除也要放在最后面，使其生效)
{
"extends":[
"..."，
'airbnb', // eslint 校验规则
"plugin:prettier/recommended" //格式化规则
]
}
上面这一行 相当于
{
"extends": ["prettier"], // 使用eslinst-config-prettier中的配置项
"plugins": ["prettier"], // 注册该prettier插件
"rules": {
"prettier/prettier": "error", // 在eslint中运行prettier，并启用该插件提供的规则
"arrow-body-style": "off", // 关闭规则
"prefer-arrow-callback": "off" // 关闭规则
}
}
最后一步 很关键， 在 vscode的设置 中， setting.json 全部内容注释掉( 非小白可以不做)
添加 内容
{
"editor.formatOnSave": true, // 可选,启用保存后自动格式化
}
其他文件格式：
.eslintrc.js esline 的配置文件
.prettierignore 排除文件 (默认没有内容)
.prettierrc.js prettier 的配置文件 (默认有内容)
测试， 新建一个 main.js 输入随便内容，保存自动会 格式化
扩展：
此时会有一个默认的 .prettierrc 文件，在刚才下载的包里，
默认应用的是 那个文件里的参数
如果需要自定义 配置： 在根目录新建一个 .prettierrc 设置内容即可
如果不希望 文件被 格式化，是跳过格式化的， 添加 文件 .prettierignore， 与.prettierrc.js 同目录下
格式 请见：
https://blog.csdn.net/weixin_43459866/article/details/124249172
最终的 setting.json 文件
{
//#################################################################################
"editor.formatOnSave": true, // 可选,启用保存后自动格式化
"editor.defaultFormatter": "esbenp.prettier-vscode",
// "javascript.format.enable": false, // 禁用VS Code自带的JS格式化程序
// "typescript.format.enable": false // 禁用VS Code自带的TS格式化程序
}
详细配置文件解析
eslint 配置文件详细介绍:
https://zhuanlan.zhihu.com/p/548306020?utm_id=0
partte 与 eslint 合并介绍：
https://mp.weixin.qq.com/s/Q0Zbv-T3PTkqX8lqK-VWGA
安装介绍 ：
https://mp.weixin.qq.com/s/O9m40zo_j-waJGPGESC6WQ