Eslint筆記

1：Eslint概念

ESLint 是在 ECMAScript/JavaScript 代碼中識別和報告模式匹配的工具，它的目標是保證代碼的一致性
和避免錯誤。說白了就是你們小組長想讓你們按照他寫代碼的風格去寫代碼（完全插件話的配置插件和規則），指不定這規則還是從哪個大團隊伸手黨拿來的（各種比較規範化的一些規則配置）

2：Eslint的常用配置

1. parser：配置解析器，這個解析器是把源代碼解析成AST之後去驗證規則的，默認的是Espree，解析ECMAScript5特性，當然也可以使用其他的解析器，目前常用的babel-eslint、typescript-eslint-parser等

2. parserOptions：解析的配置，列舉常用配置

   1. ecmaVersion: 解析的ECMAScript的版本，默認ECMAScript5
   2. sourceType: 制定解析的模塊類型。script或者module（ECMAScript模塊）
3. env: 配置解析的環境，env的值會爲eslint默認的設置一些全局的變量，比如browser，會設置瀏覽器中的全局變量，jQuery，添加jQuery的全局變量，這些值可以並存，給出鏈接查看env環境變量

4. globals: 全局變量，源文件中訪問未定義變量會no-undef，定義一些全局變量就可以使用globals

   console.log(globalVarible);
   // 'globalVarible' is not defined  no-undef
   
   // globals: {
   //  globalVarible: false;
   // }
   // will make it right

5. plugins: 插件，通過插件去增強eslint的功能，以及可以輸出一些額外的配置，可以去npm去搜一下eslint-plugin-*去找一些常用的插件

6. rules: 規則，這裏就是常用的設置一些項目中使用的規則，規則設置可以是eslint默認的一些rules也可以是插件中一些rules，比如vue/*，0->off關閉規則 1->warn報出警告 2->error報出錯誤級別，如果一些規則有其他選項，可以通過數組字面量形式配置

      {
          "rules": {
              "eqeqeq": "off",
              "curly": "error",
              "quotes": ["error", "double"] // 代碼中使用雙引號，級別爲錯誤
          }
      }

7. root: 當前文件的eslint配置文件會在當前目錄尋找，如果不存在，會從父級依次尋找到根目錄，爲了將eslint限制爲該項目，可以在項目的根目錄下的eslint配置root:true，會停止繼續向上尋找

8. extends: 繼承的概念，從前一個配置中繼承規則，同時也可以去修改繼承到的規則，修改分爲兩類，只修改錯誤級別或者整體覆蓋規則，比如可以使用eslint:recommended來開啓eslint的核心規則，這些規則可以在下面的鏈接中找到eslint:recommended規則，當然也可以繼承一些第三方已有的配置，比如eslint-plugin-vue

      module.exports = {
        extends: [
          // add more generic rulesets here, such as:
          // 'eslint:recommended',
          'plugin:vue/recommended'
        ],
        rules: {
          // override/add rules settings here, such as:
          // 'vue/no-unused-vars': 'error'
        }
      }

以上的配置基本可以滿足日常開發的需要了，inline Comments可以在源碼文件中幫助我們控制Eslint，比如忽略某行驗證，在源碼文件中添加全局變量等等

// 用來禁止eslint檢測的代碼塊
/* eslint-disable */

alert('foo');

/* eslint-enable */

// 下面這行禁止規則no-alert
alert('foo'); // eslint-disable-line no-alert

// 該文件添加一些全局變量
/* global var1, var2 */

// 很多類似的inline comment去控制eslint的行爲，可去官網查閱

3.給出一個eslint配置進行分析

簡單描述一個項目的需求來進行配置

• 項目的源碼轉換使用了babel，需要轉移es6到es5
• 使用Vue開發，需要控制*.vue文件的代碼統一風格
• 使用一些現成的規範控制，比如VueCli3.0開啓的airbnb config
• 根據項目成員的使用習慣，大家約定一些規則的開關

// 使用VueCli3.0生成項目架構的時候，eslintrc.js的配置如下
module.exports = {
  root: true, // 項目級別的eslint配置
  env: {
    node: true  // node的環境，在源碼中方爲process的時候不會報錯
  },
  'extends': [
    'plugin:vue/essential',  // Vue項目，繼承了eslint-plugin-vue的rule，文章結尾會給出官網鏈接
    'eslint:recommended'  // 這個是eslint官方推薦的配置，在eslint rules頁面打鉤的都是recommended
  ],
  // 針對項目需求和團隊制定自己的rules
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  },
  parserOptions: {
    parser: 'babel-eslint'
  }
}

VueCli3.0官方給的配置其實就夠用了，自己配置一些自定義的rules，接下來說幾個業務場景，然後去對eslint配置進行修改

1. 在源碼中使用document等變量的時候需要

   module.exports = {
     env: {
       browser: true,   // window、document 瀏覽器全局變量的使用  
     }
   }

2. 在Vue初始化的時候給了一個vm = new Vue({})的引用，這個會在全局中使用

   module.exports = {
     globals: {
       vm: false, // 在源碼中使用vm就不會報錯了，同時false還禁止對vm進行修改
       DDLogin: false, // 釘釘登陸的全局變量
     }  
   }

3. 修改VueCli3.0默認繼承的規則，不適用eslint:recommended 使用airbnb-base config(不包含React部分)

   # use npm5+ 這裏airbnb-base 依賴eslint和eslint-plugin-import(關於import的一些驗證)
   npx install-peerdeps --dev eslint-config-airbnb-base

    module.exports = {
      'extend': [
         'plugin:vue/recommended',
         'airbnb-base'
      ],
    }

4. 根據團隊制定規則

   module.exports = {
     rules: {
       'vue/no-v-html': 'off', // 這裏針對繼承來的配置去進行自定義配置
     }
   }

4：eslint plugin or config

給出以下常用的eslint-plugin-(可以增強eslint的功能，同時提供一些規則) 和 eslint-config-(可分享的配置，只是組合規則導出一個配置對象)

1. eslint-plugin-vue（Vue template，script的校驗）、eslint-plugin-react(React的校驗)
2. eslint-plugin-html(針對html中的js部分進行校驗)
3. eslint-plugin-import(針對ES6 Module import 部分的校驗)，可以配合webpack alias別名來判定import資源是否存在
4. eslint-plugin-promise(針對Promise的校驗)
5. 自己去npm搜吧, eslint-plugin，只要能轉AST，什麼都能幹，什麼校驗都可以做

總結：代碼規範這些東西沒有標準，我們可以完全自定義自己的規則，也可以去使用一些現成的規則，設置可以書寫自己的規則，作爲團隊來講，代碼風格統一還是有必要的，本篇只是簡單的記錄一下eslint基本使用，剩下需要讀者自己去結合自己的項目使用一些規則和開發一些插件滿足需求

• eslint中文官網
• eslint-plugin-vue官網
• npm官網，搜索常用plugin or config