前端面試必備——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