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