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

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

項目的基本目錄

產生.eslintrc文件，根據(jù)執(zhí)行過程中選擇會產生不同格式的文件類型，這里以json格式為例，比如我在項目中配置的.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": { // 不否允許對象中出現(xiàn)結尾逗號 "comma-dangle": [ "error", "never" ], // 必須在代碼尾部添加分號 "semi": "error", // 把雙引號換成單引號 "quotes": [ "error", "single" ], // 強制駝峰命名規(guī)則 "camelcase": [ 2, { "properties": "never" } ], // 兩個縮進空格 "indent": [ "error", 2 ], // 不允許出現(xiàn)空代碼塊，除了catch "no-empty": [ "error", { "allowEmptyCatch": true } ], // 要求使用 isNaN() 檢查 NaN "use-isnan": "error", "require-await": "error", // 禁止 if 作為唯一的語句出現(xiàn)在 else 語句中 "no-lonely-if": "error", // 強制在注釋中 // 或 /* 使用一致的空格 "spaced-comment": [ "error", "always", { "line": { "markers": [ "/" ], "exceptions": [ "-", "+" ] }, "block": { "markers": [ "!" ], "exceptions": [ "*" ], "balanced": true } } ], // 強制模塊內的 import 排序 "sort-imports": [ "error", { "ignoreCase": false, "ignoreDeclarationSort": false, "ignoreMemberSort": false, "memberSyntaxSortOrder": [ "none", "all", "multiple", "single" ] } ], // 優(yōu)先使用數(shù)組和對象解構 "prefer-destructuring": [ "error", { "array": true, "object": true }, { "enforceForRenamedProperties": false } ], // 禁止出現(xiàn)多行空行,最多兩行 "no-multiple-empty-lines": "error", "brace-style": [ "error", "1tbs" ], // 禁用魔術數(shù)字 "no-magic-numbers": "error", // 禁止使用var "no-var": "error", // 禁止 case 語句落空 "no-fallthrough": "error" }}

不知道配置也沒關系，打開官方文檔，選擇ESLint Demo,可視化選擇需要的選項，自動生成配置好的文件，直接到底部下載文件即可使用。

展開rules configuration(默認是合上的)

底部點擊鏈接就可以下載完整的配置文件。

每個rules的key的使用說明，選擇“用戶指南”》“規(guī)則”有詳細的說明。

常用的命令

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

文檔中，在加了--fix參數(shù)的時候，標識了小扳手的選項表示可以自動進行修復。

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

"editor.codeActionsOnSave": {

"source.fixAll": true,

"source.fixAll.eslint": true

}

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

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

下面來做個試驗

那么要排除掉ignoretest目錄的檢查，那么對.eslintignore進行修改

如果沒用添加.eslintignore，也可以在package.json中進行過濾配置，ESLint 將在 package.json 文件中查找 eslintIgnore 鍵，來檢查要忽略的文件，值得注意的是，如果有.eslintignore文件，package.json的配置將失效。

注意點：

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

nodejs的一些全局變量比如：process,__dirname等就會報錯，配合使用

"no-global-assign": "error"

env的配置項，同時要設置"node":true

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

總結

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

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