JS代码检查工具ESLint介绍与使用方法

站长资源 2024/12/28 佚名

7 1538 7

DDR爱好者之家 Design By 杰米

ESLint不但提供一些默认的规则，也提供用户自定义规则来约束所写的JavaScript代码。

发展历史

Douglas Crockford大神根据自己的理念用JavaScript写了一个JavaScript代码规范检查工具，这就是JSLint。后来非常流行，也的确帮助了广大的JavaScript程序员。但是，大神对于自己的代码规范不做丝毫的妥协，对开源社区的反馈的回应也不礼貌。于是，JSLint从一个帮助程序员规范代码，避免Bug的工具，变成了一个让代码像Crockford的工具。在最不信神的IT界，这当然不能忍了

2011年，一个叫Anton Kovalyov的前端程序员借助开源社区的力量弄出来了JSHint，该工具的思想基本上和JSLint是一致的，但具有以下几点优势：1、可配置规则。2、社区支持度高。3、可定制结果报表

起初几年，JSHint 一直是前端代码检测工具的首选。但在 2013 年，Zakas 大佬发现 JSHint 已经无法满足自己定制化规则的需求，而且和 Anton 讨论后达成共识这根本在不可能在 JSHint 上实现。同时 Zakas 还设想发明一个基于 AST 的 lint，可以动态执行额外的规则，同时可以很方便的扩展规则

2013 年的 6 月份，Zakas 发布了全新的 lint 工具——ESLint。ESLint 的出现并没有撼动 JSHint 的霸主地位。由于前者是利用 AST 处理规则，用 Esprima 解析代码，执行速度要比只需要一步搞定的 JSHint 慢很多；其次当时已经有许多编辑器对 JSHint 支持完善，生态足够强大。真正让 ESLint 逆袭的是 ECMAScript 6 的出现

2015 年 6 月，ES2015 规范正式发布。但是发布后，市面上浏览器对最新标准的支持情况极其有限。如果想要提前体验最新标准的语法，就得靠 Babel 之类的工具将代码编译成 ES5 甚至更低的版本，同时一些实验性的特性也能靠 Babel 转换。这时 JSHint 就略尴尬，ES2015 变化很大，短期内无法完全支持。ESLint 可扩展的优势一下就体现出来了，不仅可以扩展规则，甚至连解析器也能替换。Babel 团队就为 ESLint 开发了 babel-eslint 替换默认解析器，让 ESLint 率先支持 ES2015 语法

也是在 2015 年，React 的应用越来越广泛，诞生不久的 JSX 也愈加流行。ESLint 本身也不支持 JSX 语法。还是因为可扩展性，eslint-plugin-react 的出现让 ESLint 也能支持当时 React 特有的规则

至此，ESLint 完美躺赢，替代 JSHint 成为前端主流工具

ESLint详细配置

注释配置

有两种主要的方式来配置 ESLint，其中一种就是注释配置，使用 JavaScript 注释把配置信息直接嵌入到一个代码源文件中

可以在文件中使用以下格式的块注释来临时禁止规则出现警告

/* eslint-disable */
alert('foo');
/* eslint-enable */

也可以对指定的规则启用或禁用警告:

/* eslint-disable no-alert, no-console */
alert('foo');
console.log('bar');
/* eslint-enable no-alert, no-console */

如果在整个文件范围内禁止规则出现警告，将 /* eslint-disable */ 块注释放在文件顶部：

/* eslint-disable */
alert('foo');

文件配置

另一种是文件配置，使用 JavaScript、JSON 或者 YAML 文件为整个目录和它的子目录指定配置信息

ESLint 支持几种格式的配置文件

JavaScript - 使用 .eslintrc.js 然后输出一个配置对象。

YAML - 使用 .eslintrc.yaml 或 .eslintrc.yml 去定义配置的结构。

JSON - 使用 .eslintrc.json 去定义配置的结构，ESLint 的 JSON 文件允许 JavaScript 风格的注释。

(弃用) - 使用 .eslintrc，可以使 JSON 也可以是 YAML。

package.json - 在 package.json 里创建一个 eslintConfig属性，在那里定义配置。

如果同一个目录下有多个配置文件，ESLint 只会使用一个。优先级顺序如下

1 .eslintrc.js

2 .eslintrc.yaml

3 .eslintrc.yml

4 .eslintrc.json

5 .eslintrc

6"htmlcode">

{
  "name": "mypackage",
  "version": "0.0.1",
  "eslintConfig": {
    "env": {
      "browser": true,
      "node": true
    }
  }
}

或者使用 -c 选项传递命令行将文件保持到任意地方

eslint -c myconfig.json myfiletotest.js

配置语言

ESLint 允许指定想要支持的 JavaScript 语言选项。默认情况下，ESLint 支持 ECMAScript 5 语法。可以覆盖该设置，以启用对 ECMAScript 其它版本和 JSX 的支持

ecmaVersion - 默认设置为3，5（默认），可以使用 6、7、8 或 9 来指定想要使用的 ECMAScript 版本。也可以用使用年份命名的版本号指定为 2015（同 6），2016（同 7），或 2017（同 8）或 2018（同 9）

sourceType - 设置为 "script" (默认) 或 "module"（如果代码是 ECMAScript 模块)

ecmaFeatures - 这是个对象，表示想使用的额外的语言特性:

globalReturn - 允许在全局作用域下使用 return 语句

impliedStrict - 启用全局 strict mode (如果 ecmaVersion 是 5 或更高)

jsx - 启用 JSX

experimentalObjectRestSpread - 启用实验性的 object rest/spread properties 支持

配置示例

  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  }

配置环境

一个环境定义了一组预定义的全局变量。这些环境并不是互斥的，可以同时定义多个。可用的环境包括

browser - 浏览器环境中的全局变量。

node - Node.js 全局变量和 Node.js 作用域。

commonjs - CommonJS 全局变量和 CommonJS 作用域"htmlcode">

/* eslint-env node, mocha */

也可以在配置文件里指定环境，使用 env 关键字指定想启用的环境，并设置它们为 true

{
  "env": {
    "browser": true,
    "node": true
  }
}

如果想在一个特定的插件中使用一种环境，确保提前在 plugins 数组里指定了插件名，然后在 env 配置中不带前缀的插件名后跟一个 / ，紧随着环境名

{
  "plugins": ["example"],
  "env": {
    "example/custom": true
  }
}

配置插件

ESLint 支持使用第三方插件。在使用插件之前，必须使用 npm 安装它。

在配置文件里配置插件时，可以使用 plugins 关键字来存放插件名字的列表。插件名称可以省略 eslint-plugin- 前缀

{
  "plugins": [
    "plugin1",
    "eslint-plugin-plugin2"
  ]
}

注意：由于 Node.js 的 require 函数的行为，全局安装的 ESLint 实例只能使用全局安装的 ESLint 插件，本地安装的版本，只能用本地安装的插件。不支持混合本地和全局插件

配置规则

ESLint 附带有大量的规则。可以使用注释或配置文件修改项目中要使用的规则。要改变一个规则设置，必须将规则 ID 设置为下列值之一：

"off" 或 0 - 关闭规则

"warn" 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)

"error" 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)

为了在文件注释里配置规则，使用以下格式的注释：

/* eslint eqeqeq: "off", curly: "error" */

也可以在配置文件中进行规则配置

{
  "rules": {
    "eqeqeq": "off",
    "curly": "error",
    "quotes": ["error", "double"]
  }
}

配置定义在插件中的一个规则的时候，必须使用插件名/规则ID 的形式

{
  "plugins": [
    "plugin1"
  ],
  "rules": {
    "eqeqeq": "off",
    "curly": "error",
    "quotes": ["error", "double"],
    "plugin1/rule1": "error"
  }
}

也可以使用这种格式的注释配置

/* eslint "plugin1/rule1": "error" */

配置继承

一个配置文件可以被基础配置中的已启用的规则继承

值为 "eslint:recommended" 的 extends 属性启用一系列核心规则，这些规则报告一些常见问题。这个推荐的子集只能在 ESLint 主要版本进行更新

"extends": "eslint:recommended"

插件是一个 npm 包，通常输出规则。一些插件也可以输出一个或多个命名的配置。要确保这个包安装在 ESLint 能请求到的目录下

{
  "plugins": [
    "react"
  ],
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended"
  ],
  "rules": {
    "no-set-state": "off"
  }
}

extends 属性值可以是基本配置文件的绝对路径或相对路径。 ESLint 解析基本配置文件的相对路径相对使用的配置文件，除非那个文件在主目录或非 ESLint 安装目录的父级目录。在这些情况下，ESLint 解析基本配合文件的相对路径相对于被检测的项目目录（尤其是当前工作目录）

{
  "extends": [
    "./node_modules/coding-standard/eslintDefaults.js",
    "./node_modules/coding-standard/.eslintrc-es6",
    "./node_modules/coding-standard/.eslintrc-jsx"
  ],
  "rules": {
    "eqeqeq": "warn"
  }
}

配置忽略

可以通过在项目根目录创建一个 .eslintignore 文件告诉 ESLint 去忽略特定的文件和目录

.eslintignore 文件是一个纯文本文件，其中的每一行都是一个 glob 模式表明哪些路径应该忽略检测

例如，以下将忽略所有的 JavaScript 文件：

**/*.js

如果没有发现 .eslintignore 文件，也没有指定替代文件，ESLint 将在 package.json 文件中查找 eslintIgnore 键，来检查要忽略的文件

{
 "name": "mypackage",
 "version": "0.0.1",
 "eslintConfig": {
   "env": {
     "browser": true,
     "node": true
   }
 },
 "eslintIgnore": ["hello.js", "world.js"]
}

NodeJS配置eslint规则

下面来介绍NodeJS环境下如何配置airbnb-base的eslint规则

1、本地安装eslint、eslint-config-airbnb-base、eslint-plugin-import

npm install --save-dev eslint
npm install --save-dev eslint-config-airbnb-base
npm install --save-dev eslint-plugin-import

注意：最好使用npm，而不是cnpm安装。因为在使用本地安装的eslint时，会使用其安装路径。而npm和cnpm的安装路径不一致

2、安装成功后，package.json文件中增加如下字段

 "devDependencies": {
  "eslint": "^4.19.1",
  "eslint-config-airbnb-base": "^12.1.0",
  "eslint-plugin-import": "^2.12.0"
 }

3、在根目录下设置.eslintrc.js配置文件

module.exports = {
 "extends": ["airbnb-base"],
 "env": {
  "es6": true,
  "node": true
 },
 "rules": {
  "comma-dangle": ["error", "never"], // 要求或禁止末尾逗号：不允许逗号
  "indent": ["error", 2], // JavaScript代码强制使用一致的缩进：2格缩进
  "semi": ["error", "never"], // 不使用分号
  "arrow-parens": ["error", "as-needed"], // 箭头函数的参数可以不使用圆括号
  "linebreak-style": "off", // 取消换行符\n或\r\n的验证
  "object-curly-newline": ["error", { "consistent": true }], // 花括号内的换行符不一定要格式一致
  "function-paren-newline": "off", // 不验证函数括号内的换行
  "import/extensions": "off", // 取消对文件扩展名的验证
  "no-param-reassign": "off", // 允许对函数参数进行再赋值
  "no-underscore-dangle": "off", // 允许在标识符中使用下划线
  "no-use-before-define": "off", // 允许变量和函数在定义前使用
  "no-unused-expressions": "off", // 允许使用未使用过的表达式，以此来支持a && a()的代码形式
  "no-console": "off", // 启用console控制台
  "consistent-return": "off", // 关闭函数中return的检测
  "no-shadow": "off", // 可以使用同名变量,
  "newline-per-chained-call": "off", //取消方法链调用中的换行符的检测
  "import/newline-after-import": "off"
 }
}

4、在命令行工具中使用命令，对文件进行lint校验

PS D:\blog\api\node_modules\.bin> ./eslint ../../index.js D:\blog\api\index.js 16:1 error 'a' is not defined no-undef "htmlcode">

npm install --save-dev eslint-config-airbnb

Airbnb包括了以下三个插件

eslint-plugin-import

eslint-plugin-react 

eslint-plugin-jsx-a11y

2、在根目录下创建.eslintrc.js配置文件

module.exports = {
 // 指定校验的ECMAScript的版本及特性
 "parserOptions": {
  "ecmaVersion": 7, // ECMAScript版本，7为ES7
  "sourceType": "module", //默认script，如果代码是ECMAScript模块，设置为module
  "ecmaFeatures": { // 使用额外的语言特性
    "jsx": true // 启用JSX
  }
 },
 // 当访问未定义的变量时，no-undef 规则将发出警告
 // 指定脚本的运行环境。每种环境都有一组特定的预定义全局变量
 "env": {
  "es6": true,
  "node": true,
  "browser": true,
 },
 // 当访问未定义的变量时，no-undef 规则将发出警告
 // 脚本在执行期间访问的额外的全局变量
 "globals": {
  "document": true,
  "navigator": true,
  "window":true,
  "node":true
 },
 // 使用第三方airbnb开发配置合集
 "extends": "airbnb",
 // eslint-config-airbnb包括了以下3个插件
 "plugins": [
  "react",
  "jsx-a11y",
  "import"
 ],
 // 定义自己的规则
 "rules": {
  "comma-dangle": ["error", "never"], // 要求或禁止末尾逗号：不允许逗号
  "indent": ["error", 2], // JavaScript代码强制使用一致的缩进：2格缩进
  "semi": ["error", "never"], // 不使用分号
  "arrow-parens": ["error", "as-needed"], // 箭头函数的参数可以不使用圆括号
  "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }], //reajs文件的后缀名为.js或.jsx均可
  "linebreak-style": "off", // 取消换行符\n或\r\n的验证
  "object-curly-newline": ["error", { "consistent": true }], // 花括号内的换行符不一定要格式一致
  "function-paren-newline": "off", // 不验证函数括号内的换行
  "import/extensions": "off", // 取消对文件扩展名的验证
  "import/no-unresolved": "off", // 取消自动解析路径，以此开启alias的别名路径设置
  "no-shadow": "off", // 取消变量声明覆盖的验证，保证mapDispatchToProps的正确使用
  "no-param-reassign": "off", // 允许对函数参数进行再赋值
  "no-underscore-dangle": "off", // 允许在标识符中使用下划线
  "no-use-before-define": "off", // 允许变量和函数在定义前使用
  "no-unused-expressions": "off", // 允许使用未使用过的表达式，以此来支持a && a()的代码形式
  "jsx-a11y/anchor-is-valid": [ "error", { "components": [ "Link" ], "specialLink": [ "to" ]}], // 允许正常地使用Link
  "import/no-extraneous-dependencies": "off", //使用history/createBrowserHistory引入包时，不会报错
  "no-console": "off" // 启用console控制台
 }
};

Vue使用eslint

使用vue-cli创建项目时，如果使用eslint，会有如下图所示的选项，选择使用standard还是airbnb规范

以standard规范创建成功后，package.json文件，会出现如下字段

"eslint": "^4.15.0",

"eslint-config-standard": "^10.2.1",

"eslint-friendly-formatter": "^3.0.0",

"eslint-loader": "^1.7.1",

"eslint-plugin-import": "^2.7.0",

"eslint-plugin-node": "^5.2.0",

"eslint-plugin-promise": "^3.4.0",

"eslint-plugin-standard": "^3.0.1",

"eslint-plugin-vue": "^4.0.0",

与此同时，在根目录下自动生成.eslintrc.js配置文件

// https://eslint.org/docs/user-guide/configuring module.exports = { root: true, parserOptions: { parser: 'babel-eslint' }, env: { browser: true }, extends: [ // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules. 'plugin:vue/base', // https://github.com/standard/standard/blob/master/docs/RULES-en.md 'standard' ], // required to lint *.vue files plugins: ['vue'], // add your custom rules here rules: { // allow async-await 'generator-star-spacing': 'off', // allow debugger during development 'no-debugger': process.env.NODE_ENV === 'production' "htmlcode">

npm install --save-dev eslint-config-airbnb-base

在extends字段中，将standard更改为airbnb-base，将plugin:vue/base更改为plugin: vue/recommended

 extends: [
  'plugin:vue/recommended',
  'airbnb-base'
 ],

添加一些自定义的规则，最终的配置文件如下所示

// https://eslint.org/docs/user-guide/configuring

module.exports = {
 root: true,
 parserOptions: {
  parser: 'babel-eslint'
 },
 env: {
  browser: true
 },
 extends: [
  // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
  // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
  'plugin:vue/recommended',
  // https://github.com/standard/standard/blob/master/docs/RULES-en.md
  'airbnb-base'
 ],
 // required to lint *.vue files
 plugins: ['vue'],
 // add your custom rules here
 rules: {
  // allow async-await
  'generator-star-spacing': 'off',
  // allow debugger during development
  'no-debugger': process.env.NODE_ENV === 'production' "linebreak-style": "off", // 取消换行符\n或\r\n的验证
  "semi": ["error", "never"], // 不使用分号
  "arrow-parens": ["error", "as-needed"], // 箭头函数的参数可以不使用圆括号
  "comma-dangle": ["error", "never"], // 不允许末尾逗号
  "consistent-return": "off", // 关闭函数中return的检测
  "object-curly-newline": ["error", { "consistent": true }], // 花括号内的换行符不一定要格式一致
  "global-require": "off", // 取消对require的验证，使得可以使用require来加载图片的相对路径
  "function-paren-newline": "off", // 不验证函数括号内的换行
  "import/no-unresolved": "off", // 取消自动解析路径，以此开启alias的别名路径设置
  "no-param-reassign": "off", // 允许对函数参数进行再赋值
  "import/extensions": "off", // 取消对文件扩展名的验证
  "max-len": "off", // 取消行的最大长度的验证，使SVG不用重新调整格式
  "no-underscore-dangle": "off", //允许标识符中有下划线，从而支持vue中插件的使用
  "no-console": "off", // 启用console控制台
  "no-unused-expressions": "off", // 允许使用未使用过的表达式，以此来支持a && a()的代码形式
  "no-shadow": "off", // 取消变量声明覆盖的验证
  'vue/attribute-hyphenation': 0, // 取消对元素特性只能使用中划线或小驼峰形式的验证
  'vue/max-attributes-per-line': 0 // 取消元素有多个特性时，每个特性独占一行的验证
 }
}

更多关于JS代码检查工具ESLint的文章大家可以看看下面的相关链接

ESLint介绍与使用,ESLint配置,React使用eslint,Vue使用eslint

DDR爱好者之家 Design By 杰米

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

DDR爱好者之家 Design By 杰米

评论“JS代码检查工具ESLint介绍与使用方法”

暂无评论...

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。
据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

更新日志

2024年12月28日

JS代码检查工具ESLint介绍与使用方法

发展历史

ESLint详细配置

注释配置

文件配置

配置语言

配置环境

配置插件

配置规则

配置继承

配置忽略

NodeJS配置eslint规则

Vue使用eslint

9种方法优化jQuery代码详解

使用typescript改造koa开发框架的实现

评论“JS代码检查工具ESLint介绍与使用方法”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

JS代码检查工具ESLint介绍与使用方法

发展历史

ESLint详细配置

注释配置

文件配置

配置语言

配置环境

配置插件

配置规则

配置继承

配置忽略

NodeJS配置eslint规则

Vue使用eslint

9种方法优化jQuery代码详解

使用typescript改造koa开发框架的实现

评论“JS代码检查工具ESLint介绍与使用方法”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存