在代碼頂部添加一行註釋 /eslint-disable/ (兩個/中間有兩個*,像題目那樣) ,ESLint 在校驗的時候就會跳事後面的代碼。node
好比:main.js 裏的/ eslint-disable no-new /(兩個/中間有兩個*,像題目那樣)
在js裏面,new 一個對象,須要賦值給某個值(變量),用Vue實例化的時候,不須要賦值給值(變量),因此要單獨給配一條規則,給new Vue這行代碼上面加這個註釋,把這行代碼規則的校驗跳過,經過eslint-disable。eslint的經常使用技巧之一
一. 安裝
npm install eslintreact
二. 配置
ESLint的配置有三種方式:jquery
一、.eslintrc.*文件的配置
首先你須要初始化配置文件。es6
eslint initnpm
這將會在你的當前目錄下生成一個.eslintrc.*文件。.eslintrc的後綴能夠是.js、.yalm、.yml和.json中的任意一個。以.json格式爲例。json
.eslintrc.json 文件的內容相似以下: { //extends用於引入某配置做爲基礎配置,而後再在後續的rules中對其進行擴展 "extends": "eslint:recommended",
//若是你想使用插件中的環境變量,請先把插件名寫入"plugins"數組中,而後再在"env":{}中以"插件名/插件中的需引入的環境名"的方式進行指定。gulp
"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" } } 二、在 package.json 中加入 eslintConfig 配置塊進行配置 例如: { "name": "demo", "version": "1.0.0", "eslintConfig": { "env": { "browser": true, "node": true }, "rules": { "eqeqeq": "warn" } } } 三、直接在代碼文件中以註釋的方式定義 須要注意的是,代碼文件內以註釋配置的規則會覆蓋配置文件裏的規則,即優先級要更高。 例如: 臨時在一段代碼中取消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": "..." } }
或者babel
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文件的內容。app
# Ignore built files except build/index.js build/ !build/index.js
五. 執行檢測
eslint test.js test2.js
文中後部分例子來源於:https://blog.csdn.net/qq_3100...