在老项目中集成Eslint【02】

请先阅读Eslint使用入门指南

在了解完基础的Eslint使用指南后，我们就可以进入我们的项目使用了，以如何往一个老的项目加入Eslint配置为例来逐步看看在项目中的配置流程吧，由于公司里用的框架是VUE，我们以VUE项目为例来添加吧。

一、添加`Eslint`基础配置

首先安装Eslint,npm install eslint -D

初始化配置文件 npx eslint --init

在这里有不同的选项供我们选择，最终呢会生成一份配置文件，自己手动创建也是可以的，所以我们可以只需生成一次，改为自己的专属配置文件后便在之后的项目复制一份即可。
- To check syntax only
- To check syntax and find problems
- To check syntax, find problems, and enforce code style

代码语言：txt复制

3.

代码语言：txt复制

-  JavaScript modules (import/export)
-  CommonJS (require/exports)
-  None of these

代码语言：txt复制

-  React
-  Vue.js
-  None of these

代码语言：txt复制

-  Does your project use TypeScript?

代码语言：txt复制

-  Browser
-  Node

代码语言：txt复制

-  JavaScript
-  YAML
-  JSON

代码语言：txt复制

-  Would you like to install them now with npm?

按照如上步骤，我们生成了如下一份基础配置文件，在Eslint使用入门指南中我们已经分析过这些配置了，我们这里就只需要看看默认生成了什么？

代码语言：javascript复制

module.exports = {
    "env": {
        "browser": true,
        "es2021": true,
        "node": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/essential"
    ],
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "vue"
    ],
    "rules": {
    }
}

这里和之前有一点不一样的地方，对于VUE项目在extends多出了plugin:vue/essential和在plugin中多出了vue，我们之前说过，Eslint是默认只支持处理js文件的，为了能够处理vue中.vue的文件，我们需要用到这个插件,这个插件就是我们在cli生成配置文件的过程中选择了vue之后安装的插件，可以在package.json中找到这个插件，在之前我们说到，extends和plugins里面如果命名符合eslint-plugin-或者eslint-config-的就可以省略的，所以插件全称是eslint-plugin-vue，并且extends里面内置了eslint:recomended和plugin:vue/essential，前者是我们知道Eslint内置的那些规则，如果不喜欢也可以去掉，因为在后来的实践中得知，官方内置的这些命令实际上也不能称之为最佳实践，相对来说我们称之为官方较为保守方案。

初期接触 ESLint 时觉得太难，是因为过太过于迷信权威。比如 Airbnb 公司的 JavaScript 风格，在 GitHub 上受到了很大的好评，其实我自己也非常认可这样的编码风格。但每个团队都会根据自己的的实际情况来定制不同的东西，所处场景不同，事情情况不同，团队的编码水平也有差异，所以我们不能随便照搬过来，对于很多东西，保持一种借鉴的方式，依然需要兼顾团队的建议来指定大家认可的方案，毕竟是多人使用的规范就需要大家都认可。

其次关于eslint:recommended在阅读过大多数的开源项目后可以发现绝大部分并没有使用官方内置的这一规则，大多数作者都会选择airbnb团队的规范，秉着借鉴和学习的思路，我觉得团队中可以学习这一看法，不使用内置的，转而使用airbnb的团队规范，所以我们来对他进行小小的改造。

使用airbnb规范

首先要使用第一步就是下载其规范了 npm install eslint-config-airbnb -D,然后对配置文件稍加改造：

我们需要移除到官方自带的默认配置eslint:recommended,替换成airbnb,然后我们重新检测文件

不出意外，这个时候我们发现了一点错误，提示我们缺少eslint-plugin-jsx-a11y，很明显这是React的jsx文件，在vue项目中我们并不需要，所以我们只需要下载一个eslint-config-airbnb-base基础包即可npm install eslint-config-airbnb-base -D

airbnb是继承与airbnb-base，默认是支持React项目的，我们并不需要，所以我们只需要使用base包即可，当然base包也需要依赖eslint-plugin-import包，所以我们同时也需要下载这个包，这个包的作用是为了检测import引入文件时出现路径和无效导出等问题的包。

总结下来，如果我们要在VUE项目使用airbnb项目只需要下载这两个包。npm insta eslint-config-airbnb-base eslint-plugin-import -D即可。

如果你是使用VUE-cli去生成项目的话一般会内置这个包同时在scripts中内置检验命令，而如果是我们自己手动配置的话是没有的，所以我们手动来配置一下这两条命令：

airbnb-base规则参考

代码语言：javascript复制

"lint": "eslint --ext .js,.vue src",
"lint:fix": "eslint --fix --ext .js,.vue src"

这个时候npm run lint检测一下，不出意外，你的项目就会非常多问题出现了。

自定义规则或者扩展规则

经历上面的步骤我们已经有了一套别人的开源规则了，但是不一定很适用，我们需要对其进行扩展，或者并不适合团队的规则我们需要关闭，如何实现呢，我们只需要在rules中新增我们自己的规则，或者修改别人的规则，因为rules的权重是最高的，在这里的配置是优先级最高的。这一步我们需要和团队去协商一起完成。

在这里会出现以下问题需要我们去处理

制定团队规范需要多人共同商定制定
如果每个项目都这样去重复一遍显得成本过高不是很划算，
- 我们可以抽离一份公共文件进行维护，只需要放入指定目录，然后extens到指定路径即可，当然如果每次复制也会很麻烦
- 我们也可以定制一份eslint-config-xxx适合自己团队的规范发布到npmjs市场或者发布到公司的内部npm平台，这样就可以每次在项目npm下载即可，这种方式进一步提高了配置的简单性，但是依然还需要手动去实现一些东西
- 更好的方法我们可以继承到公司的cli工具中，通过脚手架一键生成此类配置文件会相对更为便捷，同时每次更新只需要从脚手架更新即可，同步可以进行更新，这样可能对团队来讲较为便捷
单纯的Eslint规范制定只是其中一步，口头的规则并没有约束性，我们需要用工具强制性来实现我们定义的规范，这其中包含了相对较多的一套工具，我们延后点来说这个问题。

自动修复

每次遇到一些小的格式问题，例如空格，引号之类的小问题，如果每次都去手动调整确实很费精力，我们可以借助IDE去实现自动保存，但是每个人的编辑器是有所不同的，所以这也是需要考虑的问题，目前我们团队都使用的是Vscode，虽然是同一款编辑器，我们不能要求别人的配置和我们一样却又需要在某个项目下大家遵守相同的规范，我们就可以在项目中配置.vscode文件并且在文件写创建settings.json文件，这里的配置权重优先级会高于全局，我们在这里配置关于编辑器的一些配置来规范编辑器的使用配套，这里是在保存是自动修复的一个简单配置：

代码语言：javascript复制

{
  "eslint.validate": ["html", "vue", "javascript", "jsx"], //需要检测的语言
  "emmet.syntaxProfiles": {
      "vue-html": "html",
      "vue": "html"
  },
  "editor.wordWrapColumn": 220,
  "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true // 开启保存自动修复eslint可以修复的命令
  }
}

这是相对基础的配置，你可以在其中配置很多东西，包含主题，文字，各种规则等，这里的优先级会低于根目录的配置文件规则。

当配置完这些之后，我们就拥有了保存自动修复Eslint能修复的部分（这里并不能修复所有问题）

插件增强

我们知道Eslint拥有非常多插件，很多人是很懵的，不知道各种各样的包到底有什么用，我们可以看看插件列表,在这里有各种插件。

eslint-plugin-babel: 和babel-eslint一起用的一款插件.babel-eslint在将eslint应用于Babel方面做得很好，但是它不能更改内置规则来支持实验性特性。eslint-plugin-babel重新实现了有问题的规则，因此就不会误报一些错误信息

eslint-plugin-import: 该插件想要支持对ES2015 (ES6 ) import/export语法的校验, 并防止一些文件路径拼错或者是导入名称错误的情况

eslint-plugin-jsx-a11y: 该依赖包专注于检查JSX元素的可访问性。

eslint-import-resolver-webpack: 可以借助webpack的配置来辅助eslint解析，最有用的就是alias，从而避免unresolved的错误

eslint-import-resolver-typescript：和eslint-import-resolver-webpack类似，主要是为了解决alias的问题

eslint-plugin-react: React专用的校验规则插件.

eslint-plugin-jest: Jest专用的Eslint规则校验插件.

eslint-plugin-prettier: 该插件辅助Eslint可以平滑地与Prettier一起协作，并将Prettier的解析作为Eslint的一部分，在最后的输出可以给出修改意见。这样当Prettier格式化代码的时候，依然能够遵循我们的Eslint规则。如果你禁用掉了所有和代码格式化相关的Eslint规则的话，该插件可以更好得工作。所以你可以使用eslint-config-prettier禁用掉所有的格式化相关的规则(如果其他有效的Eslint规则与prettier在代码如何格式化的问题上不一致的时候，报错是在所难免的了)

@typescript-eslint/eslint-plugin：Typescript辅助Eslint的插件。

eslint-plugin-promise：promise规范写法检查插件，附带了一些校验规则。

配套优化流程及工程化集成

husky: git工作流hook配置.
lint-staged: 可以定制在特定的git的钩子函数，在特定阶段执行一些lint校验强校验项目规范性。
Prettier 关于代码风格的统一的利器，Eslint只可以规范你的语法和一些很小的语法规范，并不能对代码的整体风格进行统一，所以我们需要用到这个工具，但是这个包也有很多个，容易让人混淆，这里我们做以区分：
- prettier 原始基础版本，定义了一些基础规则，支持的规则参考配置地址
- prettier-eslint：输入代码，执行prettier后再eslint --fix输出格式化后的代码。仅支持字符串输入。
- prettier-eslint-cli：顾名思义，支持CLI命令执行prettier-eslint的操作一般来说，Eslint是和prettier配合使用的，但是呢prettier的配置可能会和eslint冲突，我们这个时候就需要用到插件eslint-config-prettier让其配置覆盖掉eslint，禁用掉所有和pretttier冲突的规则，这样才可以使用eslint-plugin-prettier去配置专属自己代码风格规则配置而无需考虑esLint的规则，这样实现了我们的配置但是呢使部分的eslint配置失去了意义，所以这个时候诞生了prettier-eslint这个工具，但是他仅支持代码字符串，于是出现了prettier-eslint-cli，上面有其中差异，可以自己进行测试看看。
后续我们来使用 Eslint prettier husky lint-staged来完成对一个项目的整体配置。

vue项目基础模板

讲了这么多，这里先来一份不包含prettier的基础模板，关于集成其他的配套工具我们在后续来实现。

代码语言：javascript复制

module.exports = {
    "root": true, // 告诉编辑器不用再往上去找配置文件了
    "env": { // 配置环境
        "browser": true,
        "es2021": true,
        "node": true
    },
    "extends": [ // 使用airbnb-base规则和eslint-plugin-vue的规则来匹配.vue文件
        "airbnb-base",
        "plugin:vue/essential"
    ],
      "parser":  'babel-eslint', // 使用babel-eslint解析器校验新特性
    "parserOptions": { 
        "ecmaVersion": "latest",  // 版本
        "sourceType": "module",        // module | script
              "ecmaFeatures": {}        // 想要使用语言的新特性
    },
    "plugins": ["vue"],  // eslint-plugin-vue
    "rules": {}  // 自定义规则和配置覆盖规则
}

写在最后

至此一份关于vue项目的Eslint规范项目配置基本完成，更多的规范需要和你的团队去定义了，这里仅仅是单纯Eslint这一部分的内容，要想完成对项目的其他配套辅助功能集成，我们还需要在后续来完成余下的部分。

eslint npm vue.js

0 人点赞

在老项目中集成Eslint【02】

一、添加Eslint基础配置

使用airbnb规范

自定义规则或者扩展规则

自动修复

插件增强

更多配置&配置含义

配套优化流程及工程化集成

vue项目基础模板

写在最后

一、添加`Eslint`基础配置