什么是 ESLint？
ESLint 是一个开源的 JavaScript 代码检查工具，可以对 JavaScript 代码进行静态分析，发现代码中的潜在问题，从而提高代码的质量和可读性。
为什么要使用 ESLint？
在编写 JavaScript 代码时，可能会犯一些常见的错误或者不规范的写法，这些问题可能会导致代码的可读性和可维护性变差。使用 ESLint 可以自动化地发现这些问题，并提供相应的修复建议，从而提高代码的质量和可读性。
ESLint 的安装和配置
安装
可以使用 npm 来安装 ESLint：
npm install eslint --save-dev
配置
ESLint 的配置文件是一个 JSON 格式的文件，可以在项目根目录下创建一个 .eslintrc.json 文件来配置 ESLint。
下面是一个简单的配置文件示例：
// javascriptcn.com 代码示例
{
"env": {
"browser": true,
"es6": true
},
"extends": "eslint:recommended",
"parserOptions": {
"sourceType": "module"
},
"rules": {
"no-console": "off",
"indent": ["error", 2],
"quotes": ["error", "single"],
"semi": ["error", "always"]
}
}在这个配置文件中，我们指定了一些环境变量、启用了一些规则，并设置了一些规则的选项。
规则
ESLint 内置了许多规则，可以用于检查 JavaScript 代码中的问题。每个规则都有一个 ID 和一个默认的错误级别，可以通过配置文件来修改这些规则的选项和错误级别。
下面是一些常用的规则示例：
no-console: 禁止使用console，默认错误级别为error。indent: 强制使用指定的缩进，可以设置缩进的字符数，例如["error", 2]表示使用 2 个空格缩进，错误级别为error。quotes: 强制使用一致的引号风格，可以设置引号的类型，例如["error", "single"]表示使用单引号，错误级别为error。semi: 要求在语句末尾使用分号，错误级别为error。
使用 ESLint
命令行工具
ESLint 提供了一个命令行工具，可以使用这个工具来检查 JavaScript 代码。
eslint file.js
这个命令会检查 file.js 文件中的 JavaScript 代码，并输出检查结果。
集成到编辑器中
许多编辑器都支持将 ESLint 集成到编辑器中，可以在编辑器中实时检查 JavaScript 代码，并提供相应的修复建议。
下面是一些常用的编辑器插件示例：
- VS Code: ESLint
- Sublime Text: SublimeLinter-eslint
- Atom: linter-eslint
自动格式化代码
ESLint 不仅可以用于检查 JavaScript 代码，还可以用于自动格式化代码。只需要在配置文件中启用 eslint --fix 命令对应的规则即可。
下面是一个配置文件示例：
// javascriptcn.com 代码示例
{
"extends": "eslint:recommended",
"rules": {
"indent": ["error", 2],
"quotes": ["error", "single"],
"semi": ["error", "always"],
"no-unused-vars": "off",
"no-console": "off",
"no-undef": "off",
"no-extra-semi": "off",
"no-mixed-spaces-and-tabs": "off",
"no-trailing-spaces": "off",
"no-multiple-empty-lines": "off",
"no-unreachable": "off",
"no-empty": "off",
"no-empty-function": "off",
"no-use-before-define": "off",
"no-constant-condition": "off",
"no-case-declarations": "off",
"no-fallthrough": "off",
"no-dupe-keys": "off",
"no-dupe-args": "off",
"no-invalid-this": "off",
"no-new-wrappers": "off",
"no-new-func": "off",
"no-new": "off",
"no-prototype-builtins": "off",
"no-redeclare": "off",
"no-return-assign": "off",
"no-self-assign": "off",
"no-self-compare": "off",
"no-sequences": "off",
"no-unused-expressions": "off",
"no-unused-labels": "off",
"no-useless-call": "off",
"no-useless-concat": "off",
"no-useless-escape": "off",
"no-void": "off",
"no-with": "off",
"no-eval": "off",
"no-script-url": "off",
"no-alert": "off",
"no-implied-eval": "off",
"no-global-assign": "off",
"no-multi-str": "off",
"no-new-object": "off",
"no-octal-escape": "off",
"no-octal": "off",
"no-param-reassign": "off",
"no-proto": "off",
"no-restricted-properties": "off",
"no-unused-vars": "off",
"no-useless-return": "off",
"no-var": "off",
"prefer-const": "off",
"prefer-destructuring": "off",
"prefer-rest-params": "off",
"prefer-spread": "off",
"prefer-template": "off",
"strict": "off",
"template-curly-spacing": "off",
"use-isnan": "off",
"valid-typeof": "off",
"array-bracket-spacing": ["error", "never"],
"array-element-newline": ["error", "consistent"],
"arrow-parens": ["error", "as-needed"],
"arrow-spacing": ["error", { "before": true, "after": true }],
"block-scoped-var": "error",
"block-spacing": ["error", "always"],
"brace-style": ["error", "1tbs", { "allowSingleLine": true }],
"camelcase": ["error", { "properties": "never" }],
"comma-dangle": ["error", "never"],
"comma-spacing": ["error", { "before": false, "after": true }],
"comma-style": ["error", "last"],
"computed-property-spacing": ["error", "never"],
"curly": ["error", "multi-line"],
"default-case": "error",
"dot-location": ["error", "property"],
"dot-notation": "error",
"eol-last": ["error", "always"],
"eqeqeq": ["error", "always"],
"func-call-spacing": ["error", "never"],
"func-names": "error",
"func-style": ["error", "declaration", { "allowArrowFunctions": true }],
"generator-star-spacing": ["error", { "before": true, "after": true }],
"global-require": "error",
"guard-for-in": "error",
"handle-callback-err": "error",
"id-blacklist": "error",
"id-length": "error",
"id-match": "error",
"implicit-arrow-linebreak": ["error", "beside"],
"jsx-quotes": ["error", "prefer-double"],
"key-spacing": ["error", { "beforeColon": false, "afterColon": true }],
"keyword-spacing": ["error", { "before": true, "after": true }],
"linebreak-style": ["error", "unix"],
"lines-around-comment": ["error", { "beforeBlockComment": true }],
"max-depth": "error",
"max-len": ["error", { "code": 120, "ignoreComments": true }],
"max-lines": "error",
"max-nested-callbacks": "error",
"max-params": ["error", 3],
"max-statements-per-line": ["error", { "max": 1 }],
"max-statements": "error",
"multiline-ternary": ["error", "always-multiline"],
"new-cap": ["error", { "newIsCap": true, "capIsNew": false }],
"new-parens": "error",
"newline-per-chained-call": ["error", { "ignoreChainWithDepth": 2 }],
"no-alert": "error",
"no-array-constructor": "error",
"no-await-in-loop": "error",
"no-bitwise": "error",
"no-buffer-constructor": "error",
"no-caller": "error",
"no-catch-shadow": "error",
"no-confusing-arrow": "error",
"no-continue": "error",
"no-div-regex": "error",
"no-duplicate-imports": "error",
"no-else-return": "error",
"no-empty-character-class": "error",
"no-empty-pattern": "error",
"no-eq-null": "error",
"no-eval": "error",
"no-extend-native": "error",
"no-extra-bind": "error",
"no-extra-label": "error",
"no-extra-parens": ["error", "all", { "nestedBinaryExpressions": false }],
"no-floating-decimal": "error",
"no-func-assign": "error",
"no-global-assign": "error",
"no-implicit-coercion": "error",
"no-implicit-globals": "error",
"no-implied-eval": "error",
"no-invalid-regexp": "error",
"no-iterator": "error",
"no-label-var": "error",
"no-labels": "error",
"no-lone-blocks": "error",
"no-lonely-if": "error",
"no-loop-func": "error",
"no-magic-numbers": "error",
"no-misleading-character-class": "error",
"no-multi-assign": "error",
"no-multi-spaces": "error",
"no-multi-str": "error",
"no-multiple-empty-lines": ["error", { "max": 2, "maxEOF": 1 }],
"no-native-reassign": "error",
"no-negated-condition": "error",
"no-negated-in-lhs": "error",
"no-new-func": "error",
"no-new-object": "error",
"no-new-require": "error",
"no-new-symbol": "error",
"no-new-wrappers": "error",
"no-obj-calls": "error",
"no-octal": "error",
"no-octal-escape": "error",
"no-path-concat": "error",
"no-plusplus": "error",
"no-process-env": "error",
"no-process-exit": "error",
"no-proto": "error",
"no-prototype-builtins": "error",
"no-redeclare": "error",
"no-regex-spaces": "error",
"no-restricted-globals": ["error", "event"],
"no-restricted-imports": ["error", "underscore"],
"no-restricted-modules": ["error", "underscore"],
"no-restricted-properties": ["error", { "property": "findIndex", "message": "Use Array.prototype.indexOf instead." }],
"no-restricted-syntax": ["error", "WithStatement"],
"no-return-assign": "error",
"no-return-await": "error",
"no-script-url": "error",
"no-self-assign": "error",
"no-self-compare": "error",
"no-sequences": "error",
"no-shadow-restricted-names": "error",
"no-shadow": "error",
"no-spaced-func": "error",
"no-sparse-arrays": "error",
"no-sync": "error",
"no-tabs": "error",
"no-template-curly-in-string": "error",
"no-ternary": "error",
"no-this-before-super": "error",
"no-throw-literal": "error",
"no-trailing-spaces": "error",
"no-undef-init": "error",
"no-undef": "error",
"no-underscore-dangle": "error",
"no-unexpected-multiline": "error",
"no-unmodified-loop-condition": "error",
"no-unneeded-ternary": "error",
"no-unreachable": "error",
"no-unsafe-finally": "error",
"no-unsafe-negation": "error",
"no-unused-expressions": "error",
"no-unused-labels": "error",
"no-use-before-define": "error",
"no-useless-call": "error",
"no-useless-computed-key": "error",
"no-useless-concat": "error",
"no-useless-constructor": "error",
"no-useless-escape": "error",
"no-useless-rename": "error",
"no-useless-return": "error",
"no-void": "error",
"no-warning-comments": "error",
"no-whitespace-before-property": "error",
"no-with": "error",
"nonblock-statement-body-position": ["error", "below"],
"object-curly-newline": ["error", { "consistent": true }],
"object-curly-spacing": ["error", "always"],
"object-property-newline": ["error", { "allowAllPropertiesOnSameLine": true }],
"object-shorthand": "error",
"one-var-declaration-per-line": "error",
"one-var": ["error", { "initialized": "never" }],
"operator-assignment": ["error", "always"],
"operator-linebreak": ["error", "after"],
"padded-blocks": ["error", "never"],
"prefer-arrow-callback": "error",
"prefer-const": "error",
"prefer-destructuring": "error",
"prefer-object-spread": "error",
"prefer-rest-params": "error",
"prefer-spread": "error",
"prefer-template": "error",
"quote-props": ["error", "as-needed"],
"quotes": ["error", "single"],
"radix": "error",
"require-await": "error",
"require-jsdoc": "error",
"rest-spread-spacing": ["error", "never"],
"semi-spacing": ["error", { "before": false, "after": true }],
"semi": ["error", "always"],
"sort-imports": "error",
"sort-keys": "error",
"sort-vars": "error",
"space-before-blocks": ["error", "always"],
"space-before-function-paren": ["error", { "anonymous": "always", "named": "never", "asyncArrow": "always" }],
"space-in-parens": ["error", "never"],
"space-infix-ops": "error",
"space-unary-ops": ["error", { "words": true, "nonwords": false }],
"spaced-comment": ["error", "always"],
"strict": ["error", "safe"],
"symbol-description": "error",
"template-curly-spacing": ["error", "never"],
"template-tag-spacing": ["error", "never"],
"unicode-bom": ["error", "never"],
"use-isnan": "error",
"valid-jsdoc": "error",
"valid-typeof": "error",
"vars-on-top": "error",
"wrap-iife": ["error", "inside"],
"wrap-regex": "error",
"yield-star-spacing": ["error", "before"],
"yield": "error",
"yoda": "error"
}
}启用 eslint --fix 命令对应的规则后，可以使用下面的命令来自动格式化 JavaScript 代码：
eslint --fix file.js
这个命令会自动格式化 file.js 文件中的 JavaScript 代码，并将格式化后的代码输出到控制台。
总结
使用 ESLint 可以自动发现 JavaScript 代码中的问题，并提供相应的修复建议，从而提高代码的质量和可读性。可以将 ESLint 集成到编辑器中，实时检查 JavaScript 代码。同时，ESLint 还可以用于自动格式化 JavaScript 代码，只需要在配置文件中启用 eslint --fix 命令对应的规则即可。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65648853d2f5e1655ddfa000