eslint學習筆記

時間  2019-12-07
標籤 eslint 學習 筆記 简体版
原文   原文鏈接

介紹

ESLint最初是由Nicholas C. Zakas於2013年6月建立的開源項目。它的目標是提供一個插件化的javascript代碼檢測工具。
所以，ESLint就是一個語法規則和代碼風格的檢查工具，能夠用來保證寫出語法正確、風格統一的代碼。javascript

安裝和使用

先決條件：Node.js（> = 4.x），npm版本2+。
有兩種方式安裝ESLint：全局安裝和本地安裝。css

本地安裝和使用

若是你想讓ESLint成爲你項目構建系統的一部分，咱們建議在本地安裝。你可使用npm：html

$ npm install eslint --save-dev
複製代碼

緊接着你應該設置一個配置文件：vue

$ ./node_modules/.bin/eslint --init
複製代碼

以後，你能夠在你項目根目錄運行ESLint：java

$ ./node_modules/.bin/eslint yourfile.js
複製代碼

全局安裝和使用

若是你想使ESLint適用於你全部的項目，咱們建議你全局安裝ESLint。你可使用npm：node

$ npm install -g eslint
複製代碼

緊接着你應該設置一個配置文件：react

$ eslint --init
複製代碼

以後，你能夠在任何文件或目錄運行ESLint：webpack

以後，你能夠在任何文件或目錄運行ESLint：
複製代碼

eslintrc文件:

ESLint 支持幾種格式的配置文件：git

  • JavaScript - 使用 .eslintrc.js 而後輸出一個配置對象。
  • YAML - 使用 .eslintrc.yaml 或 .eslintrc.yml 去定義配置的結構。
  • JSON - 使用 .eslintrc.json 去定義配置的結構，ESLint 的 JSON 文件容許 JavaScript 風格的註釋。
  • (棄用) - 使用 .eslintrc，可使 JSON 也能夠是 YAML。
  • package.json - 在 package.json 裏建立一個 eslintConfig屬性，在那裏定義你的配置。

若是同一個目錄下有多個配置文件，ESLint 只會使用一個。優先級順序以下：程序員

  1. .eslintrc.js
  2. .eslintrc.yaml
  3. .eslintrc.yml
  4. .eslintrc.json
  5. .eslintrc
  6. package.json

若是項目不一樣目錄下有.eslintrc文件，則利用層疊配置。例如，假如你有如下結構：

your-project
├── .eslintrc.js
├── lib
│ └── source.js
└─┬ tests
  ├── .eslintrc.js
  └── test.js
複製代碼

層疊配置使用離要檢測的文件最近的 .eslintrc文件做爲最高優先級，而後纔是父目錄裏的配置文件，等等。
所以，對於lib/source.js將使用項目根目錄裏的 .eslintrc.js 文件做爲它的配置文件；對於tests/test.js將使用tests/.eslintrc.js和項目根目錄的eslintrc.js兩個文件的組合做爲它的配置文件，而且離的最近的一個優先。

eslint --init運行後，會在你的文件夾下建立.eslintrc文件，
對於咱們的項目，能夠配置一個獨立的 .eslintrc.js 文件，或者直接在 package.json 文件裏的 eslintConfig 字段指定配置，ESLint 會查找和自動讀取它們,
.eslintrc.js文件內容如：

module.exports = {
  parser: "babel-eslint",//默認使用Espree做爲其解析器
  // 解析器配置
  parserOptions: {
    ecmaFeatures: {
      experimentalObjectRestSpread: true,
      legacyDecorators: true,
      jsx: true
    },
    sourceType: "module",
    ecmaVersion: 7
  },
  env: {
    browser: true,
    node: true
  },
  extends: "eslint:recommended",
  globals: {
    document: true,
    window: false
  },
  plugins: [
    "react"
  ],
  rules: {
    semi: "error"
  }
};
複製代碼

配置

ESLint被設計爲徹底可配置的，主要有兩種方式來配置ESLint：

  1. 內嵌配置：將配置信息以註釋的形式寫在要檢驗的文件內
  2. 文件配置：利用javascript、json、yml語言的語法，生成名爲.eslintrc.*的配置文件，將配置信息寫到文件內

文件配置方式

env：指定腳本的運行環境 Environment能夠預設好的其餘環境的全局變量，如brower、node環境變量、es6環境變量、mocha環境變量等
示例：

'env': {
  'browser': true,
  'commonjs': true,
  'es6': true
}
複製代碼

globals：腳本在執行期間訪問的額外的全局變量
示例：

globals: {
  vue: true,
  window: true
}
複製代碼

rules：啓用的規則及其各自的錯誤級別
示例：

'rules': {
    // no-var
    'no-var': 'error',
    // 要求或禁止 var 聲明中的初始化
    'init-declarations': 2,
    // 強制使用單引號
    'quotes': ['error', 'single'],
    // 要求或禁止使用分號而不是 ASI
    'semi': ['error', 'never'],
    // 禁止沒必要要的分號
    'no-extra-semi': 'error',
    // 強制使用一致的換行風格
    'linebreak-style': ['error', 'unix'],
    // 空格2個
    'indent': ['error', 2, {'SwitchCase': 1}],
    // 指定數組的元素之間要以空格隔開(,後面)， never參數：[ 以前和 ] 以後不能帶空格，always參數：[ 以前和 ] 以後必須帶空格
    'array-bracket-spacing': [2, 'never'],
    // 在塊級做用域外訪問塊內定義的變量是否報錯提示
    'block-scoped-var': 0,
    // if while function 後面的{必須與if在同一行，java風格。
    'brace-style': [2, '1tbs', {'allowSingleLine': true}],
    // 雙峯駝命名格式
    'camelcase': 2,
    // 數組和對象鍵值對最後一個逗號， never參數：不能帶末尾的逗號, always參數：必須帶末尾的逗號， 
    'comma-dangle': [2, 'never'],
    // 控制逗號先後的空格
    'comma-spacing': [2, {'before': false, 'after': true}],
    // 控制逗號在行尾出現仍是在行首出現
    'comma-style': [2, 'last'],
    // 圈複雜度
    'complexity': [2, 9],
    // 以方括號取對象屬性時，[ 後面和 ] 前面是否須要空格, 可選參數 never, always
    'computed-property-spacing': [2, 'never'],
    // TODO 關閉 強制方法必須返回值，TypeScript強類型，不配置
    // 'consistent-return': 0
  }
複製代碼

extends：一個配置文件能夠從基礎配置中繼承已啓用的規則 其屬性值能夠是：

  • 在配置中指定的一個字符串
  • 字符串數組：每一個配置繼承它前面的配置

rules屬性能夠作下面的任何事情以擴展（或覆蓋）規則：

  • 啓用額外的規則
  • 改變繼承的規則級別而不改變它的選項：
    • 基礎配置："eqeqeq": ["error", "allow-null"]
    • 派生的配置："eqeqeq": "warn"
    • 最後生成的配置："eqeqeq": ["warn", "allow-null"]
  • 覆蓋基礎配置中的規則的選項
    • 基礎配置："quotes": ["error", "single", "avoid-escape"]
    • 派生的配置："quotes": ["error", "single"]
    • 最後生成的配置："quotes": ["error", "single"]

值爲eslint:recommended"的 extends 屬性啓用一系列核心規則，這些規則報告一些常見問題，在 規則頁面 中被標記爲 綠色對號的規則。

值爲可共享的配置，即一個npm包，它輸出一個配置對象。 extends 屬性值能夠省略包名的前綴 eslint-config-。
如：eslint-config-standard包

{
    "extends": "standard"
}
複製代碼

則能夠用改包的配置。

規則的錯誤等級

  • "off" 或 0 - 關閉規則
  • "warn" 或 1 - 開啓規則，使用警告級別的錯誤：warn (不會致使程序退出)
  • "error" 或 2 - 開啓規則，使用錯誤級別的錯誤：error (當被觸發的時候，程序會退出)

示例：

'rules': {
    no-cond-assign: ["error", "always"],
}
複製代碼

參數說明:

  • 參數1：錯誤等級
  • 參數2：處理方式

no-cond-assign：禁止在條件語句中出現賦值操做符，即禁止在 if、for、while 和 do...while 語句中出現模棱兩可的賦值操做符。
由於在條件語句中，很容易將一個比較運算符（像 ==）錯寫成賦值運算符（如 =）
錯誤示例：

var x;
if (x = 0) {
    var b = 1;
}
function setHeight(someNode) {
 "use strict";
    do {
        someNode.height = "100px";
    } while (someNode = someNode.parentNode);
}
複製代碼

行內註釋

能夠像寫代碼註釋同樣，來啓用或禁止規則
如：在你的文件中使用如下格式的塊註釋來臨時禁止規則出現警告：

/* eslint-disable */

alert('foo');

/* eslint-enable */
debugger;
console.log('hahaha');
複製代碼

能夠對指定的規則啓用或禁用警告:

/* eslint-disable no-alert, no-console */

alert('foo');
console.log('bar');

/* eslint-enable no-alert, no-console */
console.log('hahaha');
複製代碼

若是在整個文件範圍內禁止規則出現警告，將 /* eslint-disable */ 塊註釋放在文件頂部：

/* eslint-disable */

alert('foo');
debugger;
console.log('hahaha');
複製代碼

你也能夠對整個文件啓用或禁用警告:

/* eslint-disable no-alert */

// Disables no-alert for the rest of the file
alert('foo');
複製代碼

能夠在你的文件中使用如下格式的行註釋或塊註釋在某一特定的行上禁用全部規則：

alert('foo'); // eslint-disable-line

// eslint-disable-next-line
alert('foo');

/* eslint-disable-next-line */
alert('foo');

alert('foo'); /* eslint-disable-line */
複製代碼

在某一特定的行上禁用某個指定的規則：

alert('foo'); // eslint-disable-line no-alert

// eslint-disable-next-line no-alert
alert('foo');

alert('foo'); /* eslint-disable-line no-alert */

/* eslint-disable-next-line no-alert */
alert('foo');
複製代碼

在某個特定的行上禁用多個規則：

alert('foo'); // eslint-disable-line no-alert, quotes, semi

// eslint-disable-next-line no-alert, quotes, semi
alert('foo');

alert('foo'); /* eslint-disable-line no-alert, quotes, semi */

/* eslint-disable-next-line no-alert, quotes, semi */
alert('foo');
複製代碼

vscode中使用

按照上述配置好，並不能讓咱們寫代碼的時候在編輯器中看到提醒，所以需安裝並啓用eslint擴展應用

例如：設置在使用JSX時，沒有引入React，錯誤級別爲2（便是錯誤），則會在vscode中標紅提示錯誤，一眼就能看出來問題所在。

react 項目配置 eslint

需安裝 eslint-plugin-react

在項目中預處理錯誤（eslint-loader）

但願在項目開發的過程中，每次修改代碼，它都可以自動進行ESLint的檢查。由於在咱們改代碼的過程當中去作一次檢查，若是有錯誤，咱們就可以很快地去定位到這個問題，因爲是咱們剛剛改過的，所以立馬把它修復掉就OK了。這就避免了咱們每次改了一大堆代碼以後，要去提交的時候，再去跑一次ESLint。

這個時候須要在命令行中安裝東西了 $ npm i eslint-loader babel-eslint --save-dev

執行完上述操做後，咱們須要跳轉到.eslintrc文件裏面配置一下：

{
  parser: "babel-eslint"
}
複製代碼

爲何咱們要配置parser呢？由於咱們的項目是基於webpack的，項目裏的代碼都是須要通過babel去處理的。babel處理的這種語法可能對ESLint不是特別的支持，而後咱們使用loader處理ESLint的時候就會出現一些問題。因此通常來講，咱們用webpack和babel來進行開發的項目，都會指定它的parser使用babel-eslint。

而後在webpack的配置文件的module中加入一個對象：

{
    loaders: [
        //在babel-loader處理js、jsx文件以前對代碼進行一次檢測
        {
            test: /\.js[x]?$/,
            loader: "eslint-loader",
            enforce:'pre',
            exclude: /(node_modules|bower_components)/
        },
        //babel-loader處理js或jsx文件
        {
            test: /\.js[x]?$/,
            exclude: /(node_modules|bower_components)/,
            loader: 'babel-loader'
        }
    ]
}
複製代碼

enforce:'pre'預處理的做用：在babel-loader處理js或jsx文件以前對代碼進行一次檢測，若是代碼檢測不經過，babel-loader就不須要處理了，直接報錯。

stylelint

stylelint是一個強大的現代 CSS 檢測器，可讓開發者在樣式表中遵循一致的約定和避免錯誤。其擁有超過150條的規則，包括捕捉錯誤、最佳實踐、控制可使用的語言特性和強制代碼風格規範。它支持最新的CSS語法，而且靈活可配置。支持less、sass。

使用

  1. 編輯器中使用，以VS Code爲例

安裝相應的擴展：stylelint，並啓用，在根目錄下建.stylelintrc配置文件便可
.stylelintrc如：

{
  "extends": "stylelint-config-standard",//需安裝此包，繼承一些規範，不用本身一個一個定義了
  "rules": {
    "block-no-empty": null,
    "color-no-invalid-hex": true,
    "comment-empty-line-before": [ "always", {
      "ignore": ["stylelint-commands", "after-comment"]
    } ],
    "declaration-colon-space-after": "always",
    "max-empty-lines": 2,
    "rule-empty-line-before": [ "always", {
      "except": ["first-nested"],
      "ignore": ["after-comment"]
    } ],
    "color-hex-case": "lower",
    "unit-whitelist": ["px", "em", "rem", "%", "s"]
  }
}
複製代碼

若是使用的不合規範會當即顯示出來，且提示不符合哪條規則，如：

2. 命令行中使用

需安裝stylelint npm包，兩種安裝方式

  • 本地安裝
npm install stylelint --save-dev
複製代碼
  • 全局安裝
npm install stylelint -g
複製代碼

使用方式

stylelint "foo/*.css" //對foo文件下的全部css文件進行檢測
stylelint **/*.less //對根目錄下的全部less文件進行檢測
複製代碼

建議兩個配合使用，編輯器中能夠直接看到標紅錯誤，而命令行的能夠在pre-commit中配置，提交前檢測，若不合規範則不容許提交。

pre-commit配置及使用

pre-commit是git的鉤子，顧名思義就是在提交前運行，若是程序員gg/mm沒有遵照團隊的代碼規範，不符合風格就會提交失敗，並給出對應的提示。

安裝

npm install --save-dev pre-commit
複製代碼

配置

在package.json加以下配置

"scripts": {
    "precommit-msg": "echo 'Pre-commit checks.........' && exit 0",
    "lint": "eslint --ext .js --ext .jsx src",
    "lesslint": "stylelint **/*.less"
  },
"pre-commit": ["precommit-msg", "lint"]
複製代碼

在commit時先執行配置的precommit-msg、lint和lesslint命名，若是執行經過則提交，不然提交失敗，並給出具體的提示。

文檔連接

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程