EsLint入門(mén)學(xué)習(xí)教程
介紹
ESLint 由 JavaScript 紅寶書(shū) 作者 Nicholas C. Zakas 編寫(xiě), 2013 年發(fā)布第一個(gè)版本。 NCZ 的初衷不是重復(fù)造一個(gè)輪子,而是在實(shí)際需求得不到 JSHint 團(tuán)隊(duì)響應(yīng) 的情況下做出的選擇:以可擴(kuò)展、每條規(guī)則獨(dú)立、不內(nèi)置編碼風(fēng)格為理念編寫(xiě)一個(gè) lint 工具。
官方地址:http://eslint.org/
EsLint幫助我們檢查Javascript編程時(shí)的語(yǔ)法錯(cuò)誤。比如:在Javascript應(yīng)用中,你很難找到你漏泄的變量或者方法。EsLint能夠幫助我們分析JS代碼,找到bug并確保一定程度的JS語(yǔ)法書(shū)寫(xiě)的正確性。
EsLint是建立在Esprima(ECMAScript解析架構(gòu))的基礎(chǔ)上的。Esprima支持ES5.1,本身也是用ECMAScript編寫(xiě)的,用于多用途分析。EsLint不但提供一些默認(rèn)的規(guī)則(可擴(kuò)展),也提供用戶(hù)自定義規(guī)則來(lái)約束我們寫(xiě)的Javascript代碼。
EsLint提供以下支持:
- ES6
- AngularJS
- JSX
- Style檢查
- 自定義錯(cuò)誤和提示
EsLint提供以下幾種校驗(yàn):
- 語(yǔ)法錯(cuò)誤校驗(yàn)
- 不重要或丟失的標(biāo)點(diǎn)符號(hào),如分號(hào)
- 沒(méi)法運(yùn)行到的代碼塊(使用過(guò)WebStorm的童鞋應(yīng)該了解)
- 未被使用的參數(shù)提醒
- 漏掉的結(jié)束符,如}
- 確保樣式的統(tǒng)一規(guī)則,如sass或者less
- 檢查變量的命名
使用
一、安裝
Npm install gulp-eslint –save-dev
在你的項(xiàng)目目錄下,運(yùn)行:eslint –init將會(huì)產(chǎn)生一個(gè).eslintrc的文件,文件內(nèi)容包含一些校驗(yàn)規(guī)則
{ "rules": { "semi": ["error", "always"], "quotes": ["error", "double"] } }
其中”semi”和”quotes”是規(guī)則名稱(chēng)。EsLint還提供了error的級(jí)別,對(duì)應(yīng)數(shù)字,數(shù)字越高錯(cuò)誤的提示越高,如0代碼錯(cuò)誤不提示、1代表警告提醒但不影響現(xiàn)有編譯、2error會(huì)拋出錯(cuò)誤。
"extends": "eslint:recommended"
Extends是EsLint默認(rèn)推薦的驗(yàn)證,你可以使用配置選擇哪些校驗(yàn)是你所需要的,可以登錄npmjs.com查看
二、自定義配置EsLint
之前提到你可以關(guān)掉所有EsLint默認(rèn)的驗(yàn)證,自行添加所確切需要的驗(yàn)證規(guī)則。為此EsLint提供了2個(gè)種方式進(jìn)行設(shè)置:
- Configuration Comments: 在所要驗(yàn)證的文件中,直接使用Javascript注釋嵌套配置信息
- Configuration Files: 使用JavaScript、JSON或YAML文件,比如前面提到的.eslintrc文件,當(dāng)然你也可以在package.json文件里添加eslintConfig字段,EsLint都會(huì)自動(dòng)讀取驗(yàn)證。
開(kāi)始介紹EsLint的用法
parserOptions
EsLint通過(guò)parserOptions,允許指定校驗(yàn)的ecma的版本,及ecma的一些特性
{ "parserOptions": { "ecmaVersion": 6, //指定ECMAScript支持的版本,6為ES6 "sourceType": "module", //指定來(lái)源的類(lèi)型,有兩種”script”或”module” "ecmaFeatures": { "jsx": true//啟動(dòng)JSX }, } }
Parser
EsLint默認(rèn)使用esprima做腳本解析,當(dāng)然你也切換他,比如切換成babel-eslint解析
{ "parser": "esprima" //默認(rèn),可以設(shè)置成babel-eslint,支持jsx }
Environments
Environment可以預(yù)設(shè)好的其他環(huán)境的全局變量,如brower、node環(huán)境變量、es6環(huán)境變量、mocha環(huán)境變量等
{ "env": { "browser": true, "node": true } }
如果你想使用插件中的環(huán)境變量,你可以使用plugins指定,如下
{ "plugins": ["example"], "env": { "example/custom": true } }
Globals
指定你所要使用的全局變量,true代表允許重寫(xiě)、false代表不允許重寫(xiě)
{ "globals": { "var1": true, "var2": false } }
Plugins
EsLint允許使用第三方插件
{ "plugins": [ "react" ] }
Rules
自定義規(guī)則,一般格式:”規(guī)則名稱(chēng)”:error級(jí)別系數(shù)。系數(shù)0為不提示(off)、1為警告(warn)、2為錯(cuò)誤拋出(error),可指定范圍,如[1,4]
可以包括Strict模式、也可以是code的方式提醒,如符號(hào)等。還可以是第三方的校驗(yàn),如react。
默認(rèn)校驗(yàn)的地址http://eslint.org/docs/rules/
{ "plugins": [ "react" ], "rules": { //Javascript code 默認(rèn)校驗(yàn) "eqeqeq": "off", //off = 0 "curly": "error", //error = 2 "quotes": ["warn", "double"], //warn = 1 //使用第三方插件的校驗(yàn)規(guī)則 "react/jsx-quotes": 0 } }
https://www.npmjs.com/package/eslint-plugin-react , 此鏈接是react的eslint使用
三、Gulp中使用
var eslint = require('gulp-eslint'); gulp.task('validate-eslint',function(){ return gulp.src(['app/**/*.js']) //指定的校驗(yàn)路徑 .pipe(eslint({configFle:"./.eslintrc"})) //使用你的eslint校驗(yàn)文件 .pipe(eslint.format()) });
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,如果有疑問(wèn)大家可以留言交流。
相關(guān)文章
Javascript入門(mén)學(xué)習(xí)第八篇 js dom節(jié)點(diǎn)屬性說(shuō)明
上2篇文章我們講了 用dom方式 創(chuàng)建節(jié)點(diǎn),復(fù)制節(jié)點(diǎn),插入節(jié)點(diǎn), 刪除節(jié)點(diǎn),替換節(jié)點(diǎn),查找節(jié)點(diǎn),獲取屬性等。。。2008-07-07詳細(xì)介紹8款超實(shí)用JavaScript框架
下面盤(pán)點(diǎn)了8款實(shí)用的JavaScript框架,有需要的朋友可以參考一下2013-10-10JavaScript strike方法入門(mén)實(shí)例(給字符串加上刪除線(xiàn))
這篇文章主要介紹了JavaScript strike方法入門(mén)實(shí)例,strike方法用于給字符串加上刪除線(xiàn),需要的朋友可以參考下2014-10-10javascript高級(jí)選擇器querySelector和querySelectorAll全面解析
下面小編就為大家?guī)?lái)一篇javascript高級(jí)選擇器querySelector和querySelectorAll全面解析。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-04-04