前端面試必備——eslint篇

引言

多人共同開發一個項目，如果沒有統一代碼風格，其他人的代碼在你的IDE就會是一片紅，更可怕的是你不小心格式化了代碼，格式化的記錄也會被加入到git記錄中，極不利於協作開發。因此我認爲對於多人項目，應該在一開始的時候就開啓eslint強檢測，然後配合git鉤子，保證提交代碼的風格統一！
由於我們團隊直接用的vue-cli3搭建的項目，我會以vue-cli3爲例說一下整體配置流程。
文章上半部分主要介紹eslint,下半部分開始介紹eslint各類繼承，包括與webpack集成，git集成，vue-cli集成等等。

eslint簡介

1.是什麼

eslint目標是提供一個插件化的javascript代碼檢測工具。

2.爲什麼

avaScript 是一個動態的弱類型語言，在開發中比較容易出錯。因爲沒有編譯程序，爲了尋找 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:node_modules fyy$ which eslint
/Users/fengyangyang/.nvm/versions/node/v12.4.0/bin/eslint
fyy:node_modules fyy$ cd /Users/fengyangyang/.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

先寫個配置，後面有時間再寫篇文章詳細說一下
在每次提交的時候會先對提交的文件進行eslint，不通過則提交不成功

"script":{
"pre-commit": "lint-staged",
  "lint-staged": {
    "*.js": [
      "npm run lint",
      "git add"
    ],
    "*.vue": [
      "npm run lint",
      "git add"
    ]
  },} 

總結

本文對eslint產生的原因，配置，使用以及工程化做了詳細的介紹，希望給大家帶來幫助。
由於篇幅原因，估計會在下一篇中會詳細介紹下git鉤子，以及vue-cli設置git鉤子，eslint的一些坑。敬請期待！