前端面试必备——eslint篇

引言

多人共同开发一个项目，如果没有统一代码风格，其他人的代码在你的IDE就会是一片红，更可怕的是你不小心格式化了代码，格式化的记录也会被加入到git记录中，极不利于协作开发。因此我认为对于多人项目，应该在一开始的时候就开启eslint强检测，然后配合git钩子，保证提交代码的风格统一！
由于我们团队直接用的vue-cli3搭建的项目，我会以vue-cli3为例说一下整体配置流程。
文章上半部分主要介绍eslint,下半部分开始介绍eslint各类继承，包括与webpack集成，git集成，vue-cli集成等等。

eslint简介

1.是什么

eslint目标是提供一个插件化的javascript代码检测工具。

2.为什么

javaScript 是一个动态的弱类型语言，在开发中比较容易出错。因为没有编译程序，为了寻找 JavaScript 代码错误通常需要在执行过程中不断调试。像 ESLint 这样的可以让程序员在编码的过程中发现问题而不是在执行的过程中。

3.初始化

//安装模块
npm install eslint --save-dev

安装模块后需要设置lint规则

可以配置一个独立的 .eslintrc.* 文件，或者直接在 package.json 文件里的 eslintConfig 字段指定配置，ESLint 会查找和自动读取它们，再者，你可以在命令行运行时指定一个任意的配置文件。

这里我们可以输入init命令，再选择选择相关配置项后自动生成配置文件

//选择若干条件，生成.eslintrc.js文件
./node_modules/.bin/eslint --init

当然我们可以直接新建一个.eslintrc文件，然后手写配置项

4.启动

如果只是在项目里安装了eslint（本地安装）

$ ./node_modules/.bin/eslint yourfile.js

./node_modules/.bin/目录里面放置了整个项目可执行的二进制文件
如果是全局安装了eslint，我们可以直接

$ eslint yourfile.js

我本来以为执行文件应该在～/node_modules/.bin/eslint里，不过很遗憾没找到，不过...

fyy$ which eslint
/Users/xxx/.nvm/versions/node/v12.4.0/bin/eslint
fyy:node_modules fyy$ cd /Users/xxx/.nvm/versions/node/v12.4.0/bin
fyy:bin fyy$ ls
eslint   node     nodemon  npm      npx      nrm      vue      vue-init vue-list

原来在node模块的bin文件里面，同时像其他node全局命令也在里面 比如vue-init

核心配置

这里也按官网的模块分为两类，配置和命令行参数，只讲我认为重要的，详情希望大家能看官网eslint

1.配置文件配置设置

之前我们说过执行 ./node_modules/.bin/eslint --init会让你选择配置项，我们这里具体列出来

>? How would you like to use ESLint? To check syntax, find problems, and enforce code style
>? What type of modules does your project use? JavaScript modules (import/export)
>? Which framework does your project use? Vue.js
>? Does your project use TypeScript? No
>? Where does your code run? (Press <space> to select, <a> to toggle all, <i> to invert selection)Browser
>? How would you like to define a style for your project? Use a popular style guide
?? Which style guide do you want to follow? Airbnb (https://github.com/airbnb/javascript)
>? What format do you want your config file to be in? JavaScript

相信有一定英语基本的同学肯定能看懂上面是配置什么的，然后eslint会自动生成一个配置文件.eslintrc.js。我们不妨看一下

module.exports = {
  env: { //一个环境定义了一组预定义的全局变量
    browser: true,
    es6: true,
  },
  extends: [ //继承一种或者多种规则 这里是刚选择的airbnb 还有我们的vue里面的相关规则
    'plugin:vue/essential',
    'airbnb-base',
    //也可以用标准规则  '@vue/standard'
  ],
  globals: { //没卵用
    Atomics: 'readonly',
    SharedArrayBuffer: 'readonly',
  },
  parserOptions: {
  //解析规则：ESLint 允许你指定你想要支持的 JavaScript 语言选项。默认情况下，ESLint 支持 ECMAScript 5 语法。你可以覆盖该设置，以启用对 ECMAScript 其它版本和 JSX 的支持。
   //这里我一般用  parser: 'babel-eslint'
    ecmaVersion: 2018,
    sourceType: 'module',
  },
  plugins: [ // 在vue里面用的插件，省略了eslint-plugin- 前缀。
    'vue',
  ],
  rules: { //最关键的，相关规则制定
  'no-mixed-operators': 'off'，
  'eqeqeq': 'warn',
  }
};

聪明的你估计一眼就可以看出，生成的配置和我们选择的配置完全是息息相关的。
这里只讲两个配置，其他的看文档

• extends：规则继承
  • eslint:all ：全体规则
  • airbnb-base：airbnb的规则（需要安装）
  • eslint:recommended：推荐规则，也就是最最基本的规则
• rules：详细某条规则配置
  • “off” 或 0 – 关闭规则
  • “warn” 或 1 – 开启规则，使用警告级别的错误：warn (不会导致程序退出)
  • “error” 或 2 – 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)

2.命令行设置

命令行参数也可以分为好多类，具体可以用eslint -h查看

• Basic configuration:
  --ext: 指明检测文件扩展名，默认.js 像我们写vue 肯定会这么写 –ext: .js .vue .jsx
• Fixing problems:
  --fix: 自动修复能修复的，然后显示未能修复的。
  怎么理解能修复的呢？ 官网这么说的This option has no effect on code that uses a processor，也就是使用处理器代码不能修复
  比如缩进能修复，==转===不能自动修复
• handle warnings
  --quiet: 只显示error

工程化

我觉得eslint工程化首先要解决的问题就是lint的范围。还好文档有指出

eslint [options] [file|dir|glob]*

eslint 每次可以指定一个范围进行批量检测
同时我们可以生成.eslintignore来指定不检测的文件

/dist/        //不检测dist目录

1.与npm script结合

假设全局安装了eslint,那我们可以集合npm script来设置eslint命令

"scripts": {
    "lint": "eslint --ext .js .vue .jsx src", //对src里面的js,vue，jsx文件进行检测
}

2.与webpack结合（gulp类似）

这里我们需要使用eslint-loader,在webpack里面进行配置
这里需要注意的点还是范围问题，由于没有命令行参数，怎么设置lint的范围呢，其实这里不是通过lint参数设置的，而是通过webpack rule参数设置的

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.(js|vue|jsx)$/,
        exclude: /node_modules/,   // 作用类似.eslintignore
        include: [resolve('src'), resolve('test')],   //指定执行eslint-loader的目录
        loader: 'eslint-loader',
        options: {
          // eslint options (if necessary)
        },
      },
    ],
  },
  // ...
};

这里顺序应该是先webpack筛选出文件，在给eslint-loader. 所以，应该exclude肯定是在.eslintignore文件之前生效！

3.在vue-cli里面使用git钩子添加eslint

先写个配置，想了解为什么这么配置已经怎么写git钩子脚本请移步到我这篇文章git钩子与eslint
在每次提交的时候会先对提交的文件进行eslint，不通过则提交不成功

 "scripts": {
    "dev": "vue-cli-service serve",
    "build": "vue-cli-service build ",
    "test": "vue-cli-service build --mode productionTest",
    "lint": "vue-cli-service lint --fix --quiet",
    "lint-staged": "lint-staged"
  },
  "pre-commit": "lint-staged",
  "lint-staged": {
    "*.js": [
      "npm run lint",
      "git add"
    ],
    "*.vue": [
      "npm run lint",
      "git add"
    ]
  },

总结

本文对eslint产生的原因，配置，使用以及工程化做了详细的介绍，希望给大家带来帮助。
由于篇幅原因，估计会在下一篇中会详细介绍下git钩子，以及vue-cli设置git钩子，eslint的一些坑。敬请期待！
git钩子与eslint