前端面试必备——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