摘要:使用文件配置的方式在項目的根目錄下,新建一個名為的文件,在此文件中添加一些檢查規則。或打開規則,并且作為一個警告并不會導致檢查不通過。總結以上是我在學習整理的一些資料,不算太全面,對于像我這樣的新手入門足夠了
介紹
??ESLint 是一個插件化的 javascript 代碼檢測工具,它可以用于檢查常見的 JavaScript 代碼錯誤,也可以進行代碼風格檢查,這樣我們就可以根據自己的喜好指定一套 ESLint 配置,然后應用到所編寫的項目上,從而實現輔助編碼規范的執行,有效控制項目代碼的質量。
安裝ESLint的安裝:本地安裝、全局安裝
1、本地安裝$ npm install eslint --save-dev
生成配置文件
$ ./node_modules/.bin/eslint --init
之后,您可以運行ESLint在任何文件或目錄如下:
$ ./node_modules/.bin/eslint index.js
index.js是你需要測試的js文件。你使用的任何插件或共享配置(必須安裝在本地來與安裝在本地的ESLint一起工作)。
2、全局安裝如果你想讓ESLint可用到所有的項目,建議全局安裝ESLint。
$ npm install -g eslint
生成配置文件
$ eslint --init
之后,您可以在任何文件或目錄運行ESLint
$ eslint index.js
PS:eslint --init是用于每一個項目設置和配置eslint,并將執行本地安裝的ESLint及其插件的目錄。如果你喜歡使用全局安裝的ESLint,在你配置中使用的任何插件都必須是全局安裝的。
使用1、在項目根目錄生成package.json文件(配置ESLint的項目中必須有 package.json 文件,如果沒有的話可以使用 npm init -y來生成)
$ npm init -y
2、安裝eslint(安裝方式根據個人項目需要安裝,這里使用全局安裝)
$ npm install -g eslint
3、創建index.js文件,里面寫一個函數。
function merge () { var ret = {}; for (var i in arguments) { var m = arguments[i]; for (var j in m) ret[j] = m[j]; } return ret; } console.log(merge({a: 123}, {b: 456}));
執行node index.js,輸出結果為{ a: 123, b: 456 }
$ node index.js { a: 123, b: 456 }
使用eslint檢查
$ eslint index.js
Oops! Something went wrong! :( ESLint: 4.19.1. ESLint couldn"t find a configuration file. To set up a configuration file for this project, please run: eslint --init ESLint looked for configuration files in E:websitedemo5js and its ancestors. If it found none, it then looked in your home directory. If you think you already have a configuration file or if you need more help, please stop by the ESLint chat room: https://gitter.im/eslint/eslint
執行結果是失敗,因為沒有找到相應的配置文件,個人認為這個eslint最重要的就是配置問題。
新建配置文件
$ eslint --init
生成的過程中,需要選擇生成規則、支持環境等內容,下面說明一些本人的生成選項
? How would you like to configure ESLint? Answer questions about your style ? Are you using ECMAScript 6 features? Yes ? Are you using ES6 modules? Yes ? Where will your code run? Browser ? Do you use CommonJS? Yes ? Do you use JSX? No ? What style of indentation do you use? Tabs ? What quotes do you use for strings? Single ? What line endings do you use? Windows ? Do you require semicolons? No ? What format do you want your config file to be in? JavaScript
生成的內容在.eslintrc.js文件中,文件內容如下
module.exports = { "env": { "browser": true, "commonjs": true, "es6": true }, "extends": "eslint:recommended", "parserOptions": { "sourceType": "module" }, "rules": { "indent": [ "error", "tab" ], "linebreak-style": [ "error", "windows" ], "quotes": [ "error", "single" ], "semi": [ "error", "never" ] } };
??不過這個生成的額文件里面已經有一些配置了,把里面的內容大部分刪除。留下個extends,剩下的自己填就可以了
module.exports = { "extends": "eslint:recommended" };
eslint:recommended配置,它包含了一系列核心規則,能報告一些常見的問題。
重新執行eslint index.js,輸出如下
10:1 error Unexpected console statement no-console 10:1 error "console" is not defined no-undef ? 2 problems (2 errors, 0 warnings)
Unexpected console statement no-console --- 不能使用console
"console" is not defined no-undef --- console變量未定義,不能使用未定義的變量
一條一條解決,不能使用console的提示,那我們就禁用no-console就好了,在配置文件中添加rules
module.exports = { extends: "eslint:recommended", rules: { "no-console": "off", }, };
??配置規則寫在rules對象里面,key表示規則名稱,value表示規則的配置。
??然后就是解決no-undef:出錯的原因是因為JavaScript有很多種運行環境,比如常見的有瀏覽器和Node.js,另外還有很多軟件系統使用JavaScript作為其腳本引擎,比如PostgreSQL就支持使用JavaScript來編寫存儲引擎,而這些運行環境可能并不存在console這個對象。另外在瀏覽器環境下會有window對象,而Node.js下沒有;在Node.js下會有process對象,而瀏覽器環境下沒有。
所以在配置文件中我們還需要指定程序的目標環境:
module.exports = { extends: "eslint:recommended", env: { node: true, }, rules: { "no-console": "off", } };
再重新執行檢查時,就沒有任何提示輸出了,說明index.js已經完全通過了檢查。
配置配置方式有兩種:文件配置方式、代碼注釋配置方式(建議使用文件配置的形式,比較獨立,便于維護)。
使用文件配置的方式:在項目的根目錄下,新建一個名為 .eslintrc 的文件,在此文件中添加一些檢查規則。
env:你的腳本將要運行在什么環境中
Environment可以預設好的其他環境的全局變量,如brower、node環境變量、es6環境變量、mocha環境變量等
"env": { "browser": true, "commonjs": true, "es6": true },
globals:額外的全局變量
globals: { vue: true, wx: true },
rules:開啟規則和發生錯誤時報告的等級
規則的錯誤等級有三種:
0或’off’:關閉規則。 1或’warn’:打開規則,并且作為一個警告(并不會導致檢查不通過)。 2或’error’:打開規則,并且作為一個錯誤 (退出碼為1,檢查不通過)。 參數說明: 參數1 : 錯誤等級 參數2 : 處理方式配置代碼注釋方式
使用 JavaScript 注釋把配置信息直接嵌入到一個文件
示例:
忽略 no-undef 檢查 /* eslint-disable no-undef */ 忽略 no-new 檢查 /* eslint-disable no-new */ 設置檢查 /*eslint eqeqeq: off*/ /*eslint eqeqeq: 0*/
配置和規則的內容有不少,有興趣的同學可以參考這里:rules
使用共享的配置文件??我們使用配置js文件是以extends: "eslint:recommended"為基礎配置,但是大多數時候我們需要制定很多規則,在一個文件中寫入會變得很臃腫,管理起來會很麻煩。
??新建一個文件比如eslint-config-public.js,在文件內容添加一兩個規則。
module.exports = { extends: "eslint:recommended", env: { node: true, }, rules: { "no-console": "off", "indent": [ "error", 4 ], "quotes": [ "error", "single" ], }, };
然后原來的.eslintrc.js文件內容稍微變化下,刪掉所有的配置,留下一個extends。
module.exports = { extends: "./eslint-config-public.js", };
??這個要測試的是啥呢,就是看看限定縮進是4個空格和使用單引號的字符串等,然后測試下,運行eslint index.js,得到的結果是沒有問題的,但是如果在index.js中的var ret = {};前面加個空格啥的,結果就立馬不一樣了。
2:1 error Expected indentation of 4 spaces but found 5 indent ? 1 problem (1 error, 0 warnings) 1 error, 0 warnings potentially fixable with the `--fix` option.
??這時候提示第2行的是縮進應該是4個空格,而文件的第2行卻發現了5個空格,說明公共配置文件eslint-config-public.js已經生效了。
??除了這些基本的配置以外,在npm上有很多已經發布的ESLint配置,也可以通過安裝使用。配置名字一般都是eslint-config-為前綴,一般我們用的eslint是全局安裝的,那用的eslint-config-模塊也必須是全局安裝,不然沒法載入。
在執行eslint檢查的時候,我們會經常看到提示“--flx”選項,在執行eslint檢查的時候添加該選項會自動修復部分報錯部分(注意這里只是部分,并不是全部)
比如我們在規則中添加一條no-extra-semi: 禁止不必要的分號。
"no-extra-semi":"error"
然后,我們在index.js最后多添加一個分號
function merge () { var ret = {}; for (var i in arguments) { var m = arguments[i]; for (var j in m) ret[j] = m[j]; } return ret;; } console.log(merge({a: 123}, {b: 456}));
執行eslint index.js,得到結果如下:
7:16 error Unnecessary semicolon no-extra-semi 7:16 error Unreachable code no-unreachable ? 2 problems (2 errors, 0 warnings) 1 error, 0 warnings potentially fixable with the `--fix` option.
然后我們在執行eslint index.js --fix就會自動修復,index.js那個多余的分號也就被修復消失不見了。
總結以上是我在學習eslint整理的一些資料,不算太全面,對于像我這樣的新手入門足夠了
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/95212.html
閱讀 1216·2023-04-25 20:56
閱讀 2255·2023-04-25 14:42
閱讀 1020·2023-04-25 14:06
閱讀 2859·2021-10-14 09:42
閱讀 2135·2021-09-22 16:03
閱讀 978·2021-09-13 10:30
閱讀 1342·2019-08-29 15:41
閱讀 1789·2019-08-29 12:55