使用vs code為例，創(chuàng)建項(xiàng)目ESLintDemo

npm initnpm install --save-dev eslingeslint --init

項(xiàng)目的基本目錄

產(chǎn)生.eslintrc文件，根據(jù)執(zhí)行過(guò)程中選擇會(huì)產(chǎn)生不同格式的文件類(lèi)型，這里以json格式為例，比如我在項(xiàng)目中配置的.eslintrc.json文件

{ "env": { "es6": true, "node": true }, "extends": "eslint:recommended", "globals": { "Atomics": "readonly", "SharedArrayBuffer": "readonly" }, "parserOptions": { "ecmaFeatures": { "jsx": true }, "ecmaVersion": 2018, "sourceType": "module" }, "plugins": [ "react" ], "rules": { // 不否允許對(duì)象中出現(xiàn)結(jié)尾逗號(hào) "comma-dangle": [ "error", "never" ], // 必須在代碼尾部添加分號(hào) "semi": "error", // 把雙引號(hào)換成單引號(hào) "quotes": [ "error", "single" ], // 強(qiáng)制駝峰命名規(guī)則 "camelcase": [ 2, { "properties": "never" } ], // 兩個(gè)縮進(jìn)空格 "indent": [ "error", 2 ], // 不允許出現(xiàn)空代碼塊，除了catch "no-empty": [ "error", { "allowEmptyCatch": true } ], // 要求使用 isNaN() 檢查 NaN "use-isnan": "error", "require-await": "error", // 禁止 if 作為唯一的語(yǔ)句出現(xiàn)在 else 語(yǔ)句中 "no-lonely-if": "error", // 強(qiáng)制在注釋中 // 或 /* 使用一致的空格 "spaced-comment": [ "error", "always", { "line": { "markers": [ "/" ], "exceptions": [ "-", "+" ] }, "block": { "markers": [ "!" ], "exceptions": [ "*" ], "balanced": true } } ], // 強(qiáng)制模塊內(nèi)的 import 排序 "sort-imports": [ "error", { "ignoreCase": false, "ignoreDeclarationSort": false, "ignoreMemberSort": false, "memberSyntaxSortOrder": [ "none", "all", "multiple", "single" ] } ], // 優(yōu)先使用數(shù)組和對(duì)象解構(gòu) "prefer-destructuring": [ "error", { "array": true, "object": true }, { "enforceForRenamedProperties": false } ], // 禁止出現(xiàn)多行空行,最多兩行 "no-multiple-empty-lines": "error", "brace-style": [ "error", "1tbs" ], // 禁用魔術(shù)數(shù)字 "no-magic-numbers": "error", // 禁止使用var "no-var": "error", // 禁止 case 語(yǔ)句落空 "no-fallthrough": "error" }}

不知道配置也沒(méi)關(guān)系，打開(kāi)官方文檔，選擇ESLint Demo,可視化選擇需要的選項(xiàng)，自動(dòng)生成配置好的文件，直接到底部下載文件即可使用。

展開(kāi)rules configuration(默認(rèn)是合上的)

底部點(diǎn)擊鏈接就可以下載完整的配置文件。

每個(gè)rules的key的使用說(shuō)明，選擇“用戶(hù)指南”》“規(guī)則”有詳細(xì)的說(shuō)明。

常用的命令

// 執(zhí)行對(duì)src目錄下的文件執(zhí)行規(guī)范檢測(cè)并進(jìn)行修正eslint ./src --fix

文檔中，在加了--fix參數(shù)的時(shí)候，標(biāo)識(shí)了小扳手的選項(xiàng)表示可以自動(dòng)進(jìn)行修復(fù)。

配合vs code可以在保存的時(shí)候自動(dòng)執(zhí)行eslint格式化

"editor.codeActionsOnSave": {

"source.fixAll": true,

"source.fixAll.eslint": true

}

項(xiàng)目配合package.json的scripts可以通過(guò)npm run xxx進(jìn)行執(zhí)行，比如配合webpack等插件，能在編譯打包的前自動(dòng)進(jìn)行規(guī)范檢查。

如果要排除某些文件或者目錄的檢查，添加.eslintignore文件，在文件配置上要排除的文件或者目錄。

下面來(lái)做個(gè)試驗(yàn)

那么要排除掉ignoretest目錄的檢查，那么對(duì).eslintignore進(jìn)行修改

如果沒(méi)用添加.eslintignore，也可以在package.json中進(jìn)行過(guò)濾配置，ESLint 將在 package.json 文件中查找 eslintIgnore 鍵，來(lái)檢查要忽略的文件，值得注意的是，如果有.eslintignore文件，package.json的配置將失效。

注意點(diǎn)：

如果配置了"no-undef": "error"

nodejs的一些全局變量比如：process,__dirname等就會(huì)報(bào)錯(cuò)，配合使用

"no-global-assign": "error"

env的配置項(xiàng)，同時(shí)要設(shè)置"node":true

更詳盡的說(shuō)明可以參考ESLint的官網(wǎng)http://eslint.cn

總結(jié)

以上是生活随笔為你收集整理的eslint 保存自动格式化_ESLint一款可组装的JavaScript和JSX检查工具的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。