vue中js里的/* eslint-disable*/及其ESLint的介紹

本文轉載自查看原文 2019-07-25 09:21 2971 Eslint

團隊協作中，為了減少代碼錯誤、節約調試時間、維持團隊成員之間代碼風格的統一，除了制定編碼規范之外，我們往往需要借助工具來進行代碼檢測，輔助編碼規范的實施。

ESLint是個不錯的選擇，由鼎鼎大名的Nicholas C. Zakas創建，是一個可組裝的JavaScript和JSX檢查工具。下面我們一起來看看怎么使用它。

一. 安裝
npm install eslint

二. 配置
ESLint的配置有三種方式：

1、.eslintrc.*文件的配置
首先你需要初始化配置文件。

eslint init

這將會在你的當前目錄下生成一個.eslintrc.*文件。.eslintrc的后綴可以是.js、.yalm、.yml和.json中的任意一個。以.json格式為例。

.eslintrc.json 文件的內容類似如下：
{ //extends用於引入某配置作為基礎配置，然后再在后續的rules中對其進行擴展 "extends": "eslint:recommended", //如果你想使用插件中的環境變量，請先把插件名寫入"plugins"數組中，然后再在"env":{}中以"插件名/插件中的需引入的環境名"的方式進行指定。 "plugins": ["example"], "env": { //An environment defines global variables that are predefined. //定義env會帶進來一些全局變量 "browser": true, "node": true, "es6":true, "mocha":"true", "qunit":true, "jquery":true, "mongo":true, //通過插件名命名空間引入插件中的環境 "example/custom": true }, "globals": { // globals are the additional global variables your script accesses during execution. // 即插件在執行過程中用到的其它全局變量 "angular": true, }, "rules": { //which rules are enabled and at what error level. //這里指定用哪些規則進行eslint檢查以及每個規則的錯誤級別：0或者off表示規則關閉，出錯也被忽略；1或者warn表示如果出錯會給出警告；2或者error表示如果出錯會報出錯誤 "semi": ["error", "always"], "quotes": ["error", "double"] }, //parser指定解析器，默認的為espree，可選的還有Esprima、Babel-ESLint。 //babel-eslint is a wrapper around the Babel parser that makes it compatible with ESLint. //babel-eslint是一個Babel parser的包裝器，這個包裝器使得Babel parser可以和ESLint協調工作 "parser": "babel-eslint", "parserOptions": { //ecmaVersion指定ECMAScript的版本，可選值有3\5\6\7，默認是5 "ecmaVersion": 6, //sourceType指定被檢查的文件是什么擴展名的，可選項"script"和"module"，默認是"script"。"module"是ES6的。 "sourceType": "module", //ecmaFeatures指定你想使用哪些額外的語言特性 "ecmaFeatures": { "jsx": true } }, }
“rules”中的每一項即是一條規則。其中,“:”之前的事規則的名稱（如上面的”semi” 和 “quotes”），“:”后面的數組中，第一個項用於指定規則的錯誤級別，它有 3 個可選的取值：

“off” 或者 0 - 關閉規則

“warn” or 1 - 不符合規則時作為一個警告（不會影響退出碼）

“error” or 2 - 不符合規則時視作一個錯誤 (退出碼為1)

在你的.eslintrc文件中包含這行代碼，可以使用推薦規則。

"extends": "eslint:recommended"

通過這行代碼，會開啟規則頁中標有對勾符號的規則。當然，你也可以到 npmjs.com 搜索 “eslint-config” 查找別人創建好的配置列表，並拿來直接使用。

.eslintrc.如果放在項目的根目錄中，則會作用於整個項目。如果在項目的子目錄中也包含着.eslintrc文件，則對於子目錄中文件的檢查會忽略掉根目錄中的配置，而直接采用子目錄中的配置，這就能夠在不同的目錄范圍內應用不同的檢查規則，顯得比較靈活。ESLint采用逐級向上查找的方式查找.eslintrc.文件，當找到帶有”root”: true配置項的.eslintrc.*文件時，將會停止向上查找。

“extends”除了可以引入推薦規則，還可以以文件形式引入其它的自定義規則，然后在這些自定義規則的基礎上用rules去定義個別規則，從而覆蓋掉”extends”中引入的規則。例如：
{ "extends": [ "./node_modules/coding-standard/eslintDefaults.js", // Override eslintDefaults.js "./node_modules/coding-standard/.eslintrc-es6", // Override .eslintrc-es6 "./node_modules/coding-standard/.eslintrc-jsx", ], "rules": { // Override any settings from the "parent" configuration "eqeqeq": "warn" } }

2、在 package.json 中加入 eslintConfig 配置塊進行配置
例如：
{ "name": "demo", "version": "1.0.0", "eslintConfig": { "env": { "browser": true, "node": true }， "rules": { "eqeqeq": "warn" } } }
3、直接在代碼文件中以注釋的方式定義
需要注意的是，代碼文件內以注釋配置的規則會覆蓋配置文件里的規則，即優先級要更高。

例如：

臨時在一段代碼中取消eslint檢查，可以如下設置：
`/* eslint-disable */

// Disables all rules between comments
alert(‘foo’);

/* eslint-enable */

臨時在一段代碼中取消個別規則的檢查（如no-alert, no-console）：

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

// Disables no-alert and no-console warnings between comments
alert(‘foo’);
console.log(‘bar’);

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

在整個文件中取消eslint檢查：

/* eslint-disable */

// Disables all rules for the rest of the file
alert(‘foo’);

在整個文件中禁用某一項eslint規則的檢查：

/* eslint-disable no-alert */

// Disables no-alert for the rest of the file
alert(‘foo’);

針對某一行禁用eslint檢查：

alert(‘foo’); // eslint-disable-line

// eslint-disable-next-line
alert(‘foo’);

針對某一行的某一具體規則禁用eslint檢查：

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’);

三. 把ESLint集成到工作流之中
比如，與babel和gulp結合：

package.json：

{
    "name": "my-module",
    "scripts": {
        "lint": "eslint my-files.js"
    },
    "devDependencies": {
        "babel-eslint": "...",
        "eslint": "..."
    }
}

或者：

gulpfile.js

var gulp = require('gulp');
var eslint = require('gulp-eslint');

gulp.task('lint', function() {
  return gulp.src('app/**/*.js')
    .pipe(eslint())
    .pipe(eslint.format());
});
eslintrc.*：

{
    "plugins": [
        "react" //使用eslint-plugin-react插件
    ],
    "ecmaFeatures": {
        "jsx": true //開啟ESLint JSX 支持
    }
    "rules": {
        "react/display-name": 1, //注意一下，自定義規則都是以插件名稱為命名空間的
        "react/jsx-boolean-value": 1
    }
}

四. 通過配置.eslintignore文件忽略掉不想被檢查的文件
可以通過在項目目錄下建立.eslintignore文件，並在其中配置忽略掉對哪些文件的檢查。需要注意的是，不管你有沒有在.eslintignore中進行配置，eslint都會默認忽略掉對/node_modules/* 以及 /bower_components/*文件的檢查。下面是一個簡單的.eslintignore文件的內容。

# Ignore built files except build/index.js
build/
!build/index.js

五. 執行檢測
eslint test.js test2.js

轉自：https://blog.csdn.net/qq_31001889/article/details/81205632