ESLint - 簡介
ESLint是一個用來識別 ECMAScript 並且按照規則給出報告的程式碼檢測工具,使用它可以避免低階錯誤和統一程式碼的風格。ESLint被設計為完全可配置的,主要有兩種方式來配置ESLint:
在註釋中配置:使用JavaScript註釋直接把配置嵌入到JS檔案中。
配置檔案:使用下面任一的檔案來為全部的目錄和它的子目錄指定配置資訊。
javascript:使用
.eslintrc.js
檔案並匯出一個包含配置的物件。YAML:
.eslintrc.yaml
或者.eslintrc.yml
JSON:
.eslintrc.json
,並且此檔案允許使用JS形式的註釋廢棄的用法:
.eslintrc
,此檔案可以是JSON或者YAMLpackage.json:在
package.json
檔案中建立eslintConfig
屬性,所有的配置包含在此屬性中。
這些檔案的優先順序則是按照以上出現的順序(.eslintrc.js
> .eslintrc.yaml
> .eslintrc.yml
> .eslintrc.json
> .eslintrc
> package.json
)。
可以被配置的資訊主要分為3類:
Environments:你的 javascript 腳步將要執行在什麼環境(如:nodejs,browser,commonjs等)中。
Globals:執行程式碼時腳步需要訪問的額外全域性變數。
Rules:開啟某些規則,也可以設定規則的等級。
安裝
全域性安裝
npm i -g eslint
區域性安裝(推薦)
npm i -D eslint
安裝完畢後,接下來新建一個配置檔案.eslintrc.js
,或者使用如下的命令列來自動生成。
eslint --init
配置
指定執行環境
JavaScript 程式碼可以執行在瀏覽器或 nodejs 等環境中,每個環境的全域性變數都不盡相同(如 nodejs 中沒有 DOM 相關的全域性變數)。在配置檔案中可以自由的指定執行環境。
// .eslintrc.jsmodule.exports = { env: { browser: true, node: true, }, };
所有的環境可以在上查詢。
指定全域性變數
可以在配置檔案或註釋中指定額外的全域性變數,false
表明變數只讀:
使用註釋來配置:
/* global var1, var2 */ /* global var1:false, var2:false */
使用配置檔案來配置:
// .eslintrc.jsmodule.exports = { globals: { var1: true, var2: true, }, };
規則
在配置檔案中可以設定一些規則。
這些規則的等級有三種:
"off" 或者 0:關閉規則。
"warn" 或者 1:開啟規則,並且作為一個警告(不影響exit code)。
"error" 或者 2:開啟規則,並且作為一個錯誤(exit code將會是1)。
例如:
使用配置檔案來配置
// .eslintrc.jsmodule.exports = { rules: { eqeqeq: 'off', curly: 'error', }, };
使用註釋來配置
/* eslint eqeqeq: "off", curly: "error" */ /* eslint eqeqeq: 0, curly: 2 */
也可以在註釋中關閉所有或者某個規則:
/* eslint-disable *//* eslint-enable *//* eslint-disable no-alert, no-console *//* eslint-enable no-alert, no-console */
具體的規則可以在上找到,或者使用別人寫好的配置,例如。
使用方法
命令列
透過命令列工具來使用 eslint 。
eslint [options] file.js [file.js] [dir]
編輯器
配合相應的,在中直接顯示錯誤和警告。
lint
除了上述,還可以配合、等工具來使用。
作者:給我一炷香的時間
連結:
來源:簡書
著作權歸作者所有。商業轉載請聯絡作者獲得授權,非商業轉載請註明出處。
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/4479/viewspace-2802544/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 使用 ESLint + Prettier 簡化程式碼 Review 過程EsLintView
- EsLintEsLint
- 簡介
- Jira使用簡介 HP ALM使用簡介
- eslint配置EsLint
- BookKeeper 介紹(1)--簡介
- Amphenol簡介
- Vagrant簡介
- PySimpleGUI 簡介GUI
- Protobuf簡介
- MyBatis 簡介MyBatis
- jango簡介Go
- cookie 簡介Cookie
- Session 簡介Session
- Cookie簡介Cookie
- Virgilio 簡介
- Django簡介Django
- ElasticSearch簡介Elasticsearch
- Javascript 簡介JavaScript
- Electron簡介
- Dubbo 簡介
- JavaScript簡介JavaScript
- CSS 簡介CSS
- 反射簡介反射
- JanusGraph -- 簡介
- CSS簡介CSS
- Bootstrap 簡介boot
- pwa簡介
- Apache簡介Apache
- JAVA簡介Java
- JUC簡介
- sass簡介
- NATS簡介
- Mybatis簡介MyBatis
- Zookeeper簡介
- Handlebars 簡介
- HTML簡介HTML
- jwt簡介JWT