eslint 的三大通用規(guī)則詳解
安裝
可以全局安裝,也可以在項(xiàng)目下面安裝。 如下是在項(xiàng)目中安裝示例,只需要在 package.json 中添加如下配置,并進(jìn)行安裝: >"eslint": "^4.11.0"
配置
配置方式有兩種,但建議使用文件配置的形式,比較獨(dú)立,便于維護(hù)。 使用文件配置的方式:在項(xiàng)目的根目錄下,新建一個(gè)名為 .eslintrc 的文件,在此文件中添加一些檢查規(guī)則。
文件配置方式
env:你的腳本將要運(yùn)行在什么環(huán)境中
Environment可以預(yù)設(shè)好的其他環(huán)境的全局變量,如brower、node環(huán)境變量、es6環(huán)境變量、mocha環(huán)境變量等
'env': {
'browser': true,
'commonjs': true,
'es6': true
},
globals:額外的全局變量
globals: {
vue: true,
wx: true
},
rules:開啟規(guī)則和發(fā)生錯(cuò)誤時(shí)報(bào)告的等級(jí)
規(guī)則的錯(cuò)誤等級(jí)有三種:
- 0或'off':關(guān)閉規(guī)則。
- 1或'warn':打開規(guī)則,并且作為一個(gè)警告(并不會(huì)導(dǎo)致檢查不通過)。
- 2或'error':打開規(guī)則,并且作為一個(gè)錯(cuò)誤 (退出碼為1,檢查不通過)。
參數(shù)說明:
- 參數(shù)1 : 錯(cuò)誤等級(jí)
- 參數(shù)2 : 處理方式
配置代碼注釋方式
有時(shí)我們可能要在代碼中忽略eslint的某種檢查,或者加入某種特定檢查,此時(shí)我們可以用如下的方式:
示例:
忽略 no-undef 檢查
/* eslint-disable no-undef */
忽略 no-new 檢查
/* eslint-disable no-new */
設(shè)置檢查
/*eslint eqeqeq: off*/ /*eslint eqeqeq: 0*/
eslint 檢查指令
檢查且修復(fù)
eslint * --fix
檢查指定文件
eslint app.js --fix
eslint官方提供了3種預(yù)安裝包:
Google標(biāo)準(zhǔn)
執(zhí)行安裝:
npm install eslint eslint-config-google -g
Airbnb標(biāo)準(zhǔn),它依賴eslint, eslint-plugin-import, eslint-plugin-react, and eslint-plugin-jsx-a11y等插件,并且對(duì)各個(gè)插件的版本有所要求。
你可以執(zhí)行以下命令查看所依賴的各個(gè)版本:
npm info "eslint-config-airbnb@latest" peerDependencies
你會(huì)看到以下輸出信息,包含每個(gè)了每個(gè)plugins的版本要求
{ eslint: '^3.15.0',
'eslint-plugin-jsx-a11y': '^3.0.2 || ^4.0.0',
'eslint-plugin-import': '^2.2.0',
'eslint-plugin-react': '^6.9.0' }
知道了每個(gè)plugins的版本要求后,代入以下命令執(zhí)行安裝即可使用:
npm install eslint-config-airbnb eslint@^#.#.# eslint-plugin-jsx-a11y@^#.#.# eslint-plugin-import@^#.#.# eslint-plugin-react@^#.#.# -g
Standard標(biāo)準(zhǔn),它是一些前端工程師自定的標(biāo)準(zhǔn)。
執(zhí)行安裝:
npm install eslint-config-standard eslint-plugin-standard eslint-plugin-promise -g
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
UniApp使用manifest.json應(yīng)用配置的超詳細(xì)教學(xué)
這篇文章主要給大家介紹了關(guān)于uni-app應(yīng)用配置manifest.json最全最詳細(xì)配置,manifest.json文件是應(yīng)用的配置文件,用于指定應(yīng)用的名稱、圖標(biāo)、權(quán)限等,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
微信小程序onLaunch異步,首頁onLoad先執(zhí)行?
這篇文章主要介紹了微信小程序onLaunch異步,首頁onLoad先執(zhí)行? 文章底部給大家介紹了小程序_onLaunch異步回調(diào)數(shù)據(jù)加載問題的兩種解決方案,需要的朋友可以參考下2018-09-09
JavaScript驗(yàn)證圖片類型(擴(kuò)展名)的函數(shù)分享
這篇文章主要介紹了JavaScript驗(yàn)證圖片類型的函數(shù)分享,需要的朋友可以參考下2014-05-05
Bootstrap每天必學(xué)之折疊(Collapse)插件
Bootstrap每天必學(xué)之折疊(Collapse)插件,折疊插件可以很容易地讓頁面區(qū)域折疊起來,感興趣的小伙伴們可以參考一下2016-04-04
JavaScript實(shí)現(xiàn)動(dòng)態(tài)增刪表格的方法
本篇文章主要介紹了JavaScript實(shí)現(xiàn)動(dòng)態(tài)增刪表格,可以實(shí)現(xiàn)表格增加和刪除數(shù)據(jù)的功能,非常具有實(shí)用價(jià)值,有興趣的可以了解一下2017-03-03
js實(shí)現(xiàn)拉伸拖動(dòng)iframe的具體代碼
這篇文章介紹了js實(shí)現(xiàn)拉伸拖動(dòng)iframe的具體代碼,有需要的朋友可以參考一下2013-08-08
JavaScript逐點(diǎn)突破系列之this是什么
本章將專門介紹與執(zhí)行上下文創(chuàng)建階段直接相關(guān)的最后一個(gè)細(xì)節(jié)——this是什么?以及它的指向到底是什么,感興趣的朋友跟隨小編一起看看吧2021-04-04

