eslint總結

stray發表於2019-02-16
EsLint

1、初始命令

eslint初始命令如下:

(1) eslint –init： 生成.eslintrc.js檔案
(2) eslint src –fix: 自動修復錯誤。但是隻能修復基礎的不影響程式碼邏輯的錯誤。其他像no-unused-vars這種錯誤只能手動修改

2、常用屬性

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
}

3、程式碼間的使用

eslint的註釋
可以在程式碼間加註釋，設定是否啟用eslint

var a = 1; //eslint-disable-line 設定該行不啟用

//eslint-disable-next-line 設定下行不啟用
var a = 1

/* eslint-disable */
...
/* eslint-enable */
設定程式碼段不啟用

4、釋出自己的配置

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
  }
}

常用外掛

1、eslint-friendly-formatter 可以讓eslint的錯誤資訊出現在終端上
通過webpack配置使用如下：

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

2、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 就可以實現的功能。邊寫邊檢測的功能。

相關文章