前端规范(一)之ESlint以及@antfu/eslint-config

**相关章节**

前端规范(一)之ESlint以及@antfu/eslint-config
前端规范(二)之Prettier
前端规范(三)之stylelint
前端规范(四)之husky+lint-staged+commitizen+commitlint

ESlint

本文将记录工作中eslint相关的内容，常用的配置、插件等；
团队项目中规范尤其重要，否则合并代码的时候会有大量冲突出现；
通过eslint和vscode工作区的setting.json设置能有效的使团队的规范保持一致；

@antfu/eslint-config预设配置(推荐)

在介绍ESlint之前推荐一个项目，也就是Anthony Fu大佬的开源项目ESlint的预设配置项目，可以省去一堆的配置，值得注意的是Anthony Fu并不适用Prettier,可以看看大佬的下面这篇文章的介绍；

Why I don’t use Prettier (antfu.me)

只需简单的安装后在.eslintrc和 package.json文件中维护以下 内容即可，简单快捷

[详细内容请查看@antfu/eslint-config](antfu/eslint-config: Anthony’s ESLint config presets (github.com))

pnpmadd -D eslint @antfu/eslint-config

{"extends":"@antfu"}

{"scripts":{"lint":"eslint .","lint:fix":"eslint . --fix"}}

安装

vscode插件商城直接搜索Eslint，值得注意的是我们还需要在项目中适用npm安装ESlint，因为我们需要对我们的代码进行检测

npm i eslint -D

初始化

初始化的时候会有交互，根据你自己的实际项目选择即可，选完交互后会有推荐需要安装的npm包；

npx eslint --init

初始化完成后会自动生成.eslintrc.cjs文件

module.exports ={"env":{"browser":true,// 支持浏览器环境的检测"es2021":true,// 支持es2021语法的检测"node":true// 支持node环境的检测},"extends":["eslint:recommended",// 使用eslint推荐的配置进行检测"plugin:vue/vue3-essential",// 支持vue3相关语法的检测'plugin:@typescript-eslint/recommended'//ts推荐进行配置],"overrides":[],'parser':'vue-eslint-parser',"parserOptions":{"ecmaVersion":"latest",// 解析文件的时候使用最新的ecmaVersion"sourceType":"module",// 文件是ES6模块规范'parser':'@typescript-eslint/parser',},"plugins":["vue",'@typescript-eslint'],"rules":{// 配置自己项目特有的一些检测规则quotes:['error','single']//单引号示例}}

vscode工作区设置

vscode设置分组用户设置和工作区设置，其中用户设置是全局生效，工作区是当前项目生效，工作区的级别高于用户设置,开启保存的时候自动格式化代码；

{"editor.codeActionsOnSave":{"source.fixAll":true,"source.fixAll.eslint":true},}

package.json增加脚本

"scripts":{"dev":"vite","build":"vue-tsc && vite build","preview":"vite preview","lint:eslint":"eslint --cache --max-warnings 0  \"{src,mock}/**/*.{vue,ts,tsx}\" --fix"},

运行脚检测脚本

npm run lint:eslint

与Prettier冲突的解决方法

有人说那不是会格式化两次吗，eslint格式化了一次，Prettier又格式化了一次，为什么需要两个配置项，简化成一个不行吗，这个其实社区也有给VsCode提过意见，VsCode给的答案大致意思是它们各司其职，所以还是要两个都保留。

冲突场景举例

举例一种冲突场景：

Eslint配置单引号

Prettier配置双引号

冲突现象

因为Prettier里的规则使用的双引号，两个同时存在的时候，最终格式化出来的结果会以Prettier里的规则为准，也就是说Eslint和Prettier都会对文件进行格式化，可是Prettier格式化的会覆盖掉Eslint格式化的。所以最终格式化的结果是双引号的。

解决方法

eslint-plugin-prettier 和 eslint-config-prettier可以有效的解决冲突问题

其中eslint-config-prettier会把Eslint里和Prettier有冲突的规则关掉，eslint-plugin-prettier会将Prettier里的规则设置到Eslint里面，通过这两个插件的配合，就完成了Eslint和Prettier规则的合并，其中冲突的规则以Prettier里的规则为准。

npminstall -D eslint-plugin-prettier eslint-config-prettier