eslint總結

一、初始命令

eslint初始命令以下:

(1) eslint --init： 生成.eslintrc.js文件
(2) eslint src --fix: 自動修復錯誤。可是隻能修復基礎的不影響代碼邏輯的錯誤。其餘像no-unused-vars這種錯誤只能手動修改

二、經常使用屬性

eslint的經常使用屬性： env、extends、parserOptions、plugins、rules等。

parserOptions
EsLint經過parserOptions，容許指定校驗的ecma的版本，及ecma的一些特性

"parserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true
        }
    },

parser
指定解析器
EsLint默認使用esprima作腳本解析，在使用es6代碼中，須要改爲babel-eslint。
babel-eslint 解析器是一種使用頻率很高的解析器，由於如今不少公司的不少項目目前都使用了es6，爲了兼容性考慮基本都使用babel插件對代碼進行編譯。而用babel編譯後的代碼使用 babel-eslint 這款解析器能夠避免沒必要要的麻煩。
babel-eslint 安裝命令：

npm install --save-dev babel-eslint

在 .eslintrc.js 配置文件中添加以下配置項代碼：

parser: 'babel-eslint',

env
Environment能夠預設好的其餘環境的全局變量，如brower、node環境變量、es6環境變量、mocha環境變量等

"env": {
        "browser": true,
        "node": true
    }

若是想使用插件中的環境變量，你可使用plugins指定：

{
      "plugins": ["example"],
      "env": {
          "example/custom": true
      }
  }

plugins
用來引用第三方插件

"plugins": [
        "plugin1",
        "eslint-plugin-plugin2"
    ]

rules:
設置具體的配置。第一個是錯誤級別：
"off" or 0 - 關閉規則
"warn" or 1 - 將規則視爲一個警告（不會影響退出碼）
"error" or 2 - 將規則視爲一個錯誤 (退出碼爲1)

{
    "rules": {
        "semi": ["error", "always"],
        "quotes": ["error", "double"]
    }
}

extends
能夠從基礎配置中繼承已啓用的規則。eslint官方提供了3種預安裝包：
（1）eslint-config-google

npm install eslint eslint-config-google

(2)eslint-config-airbnb
Airbnb標準,它依賴eslint, eslint-plugin-import, eslint-plugin-react, and eslint-plugin-jsx-a11y等插件。
執行如下命令查看所依賴的各個版本：

npm info "eslint-config-airbnb@latest" peerDependencies

知道依賴後，安裝依賴包。
eslint-config-airbnb-base 包含了針對 ES6+ 代碼的檢查
eslint-config-airbnb 在 eslint-config-airbnb-base 的基礎上增長了對 react 和 jsx 語法的檢查。

（3）eslint-config-standard

"extends": "standard",

global
指定全局變量。true表明容許重寫、false表明不容許重寫

"globals": {
  "var1": true,
  "var2": false
}

三、代碼間的使用

eslint的註釋
能夠在代碼間加註釋，設置是否啓用eslint

var a = 1; //eslint-disable-line 設置該行不啓用

//eslint-disable-next-line 設置下行不啓用
var a = 1

/* eslint-disable */
...
/* eslint-enable */
設置代碼段不啓用

四、發佈本身的配置

eslint容許發佈本身設定的配置。被引用進來便可使用。
（1）my-config.js

module.exports = {
    extends: 'eslint:recommended',
    env: {
        node: true,
        es6: true
    },
    rules: {
        'no-console': 'off',
        'indent': [ 'error', 4 ],
        'quotes': [ 'error', 'single' ]
    }
};

(2) package.json

{
    "name": "eslint-config-my",
    "version": "0.0.1",
    "main":"my-config.js"
}

爲了能讓 eslint 正確載入這個模塊，咱們須要執行 npm link 將這個模塊連接到本地全局位置：

npm link eslint-config-my

而後將文件 .eslintrc.js 改爲：

module.exports = {
    extends: 'my', //在 extends 中， eslint-config-my 可簡寫爲 my
};

代碼說明

module.exports = {
// 默認狀況下，ESLint會在全部父級組件中尋找配置文件，一直到根目錄。ESLint一旦發現配置文件中有 "root": true，它就會中止在父級目錄中尋找。
  root: true,
// 對Babel解析器的包裝使其與 ESLint 兼容。
  parser: 'babel-eslint',
  parserOptions: {
    // 代碼是 ECMAScript 模塊
    sourceType: 'module'
  },
  env: {
    // 預約義的全局變量，這裏是瀏覽器環境
    browser: true,
  },
// 擴展一個流行的風格指南，即 eslint-config-standard 
// https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
  extends: 'standard',
// required to lint *.vue files
  plugins: [
    // 此插件用來識別.html 和 .vue文件中的js代碼
    'html',
    // standard風格的依賴包
    "standard",
    // standard風格的依賴包
    "promise"
  ],
// add your custom rules here
  'rules': {
    // allow paren-less arrow functions
    'arrow-parens': 0,
    // allow async-await
    'generator-star-spacing': 0,
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
  }
}

經常使用插件

一、eslint-friendly-formatter 可讓eslint的錯誤信息出如今終端上
經過webpack配置使用以下：

{
  test: /\.(js|vue)$/,
  loader: 'eslint-loader',
  enforce: 'pre',
  include: [resolve('src'), resolve('test')],
  options: {
    formatter: require('eslint-friendly-formatter')
  }
},

二、eslint-plugin-html
這個插件將會提醒模塊腳本之間模擬瀏覽器共享全局變量的行爲，由於這不適用於模塊腳本。

這個插件也能夠擴展文件，如：.vue，.jsx

.eslintrc.js中，添加以下配置項：

settings: {
  'html/html-extensions': ['.html', '.vue'],
  'html/indent': '+2',
},

而對於這種用 eslint-pulgin-html 擴展的的文件咱們可使用 eslint --ext .html,.vue src 進行檢測，若是想要在開發中邊寫邊檢測，咱們可使用相應文件的loader進行處理。而後執行 npm run dev 就能夠實現的功能。邊寫邊檢測的功能。