如何用JavaScript使用ESLint
ESLint 是目前前端领域最流行的 JavaScript 代码检查工具，它可以帮助开发者在编写代码时发现语法错误、遵循统一的代码规范，避免潜在的运行问题。下面将从安装、配置到实际使用的完整流程，介绍如何在 JavaScript 项目中使用 ESLint。
一、安装 ESLint
首先需要在项目中安装 ESLint 依赖，推荐将 ESLint 作为项目的开发依赖安装，避免影响线上运行环境。打开终端，进入项目根目录，执行以下命令：
# 使用 npm 安装 npm install eslint --save-dev # 使用 yarn 安装 yarn add eslint --dev
安装完成后，项目中会出现 ESLint 相关的依赖包，后续就可以通过 npx 或者项目内的 node_modules 路径调用 ESLint 命令。
二、初始化 ESLint 配置
安装完成后需要生成 ESLint 的配置文件，让 ESLint 知道需要遵循哪些规则、检查哪些文件。执行以下初始化命令：
npx eslint --init
执行命令后会出现交互式问答，需要根据项目实际情况选择：
- 选择如何使用 ESLint：一般选择「To check syntax, find problems, and enforce code style」，同时检查语法、发现问题和强制代码风格
- 选择项目使用的模块化规范：如果是现代前端项目选择「JavaScript modules (import/export)」，如果是 Node.js 项目选择「CommonJS (require/exports)」
- 选择项目使用的框架：如果没有使用框架选择「None of these」，如果是 React、Vue 等项目选择对应框架
- 选择项目是否使用 TypeScript：根据项目实际情况选择「Yes」或「No」
- 选择代码运行环境：按需选择浏览器、Node.js 等环境
- 选择代码风格规范：可以选择流行的开源规范如「Airbnb」、「Standard」，也可以选择「Use a custom configuration」自定义规则
- 选择配置文件的格式：一般选择「JavaScript」格式，生成 .eslintrc.js 文件，方便后续修改
- 最后会询问是否安装对应的依赖包，选择「Yes」即可自动安装所需依赖
初始化完成后，项目根目录会生成 .eslintrc.js 配置文件，内容类似如下示例：
module.exports = {
env: {
browser: true,
node: true,
es2021: true
},
extends: [
'standard'
],
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module'
},
rules: {
// 自定义规则可以写在这里
}
}三、配置文件说明
.eslintrc.js 是常见的 ESLint 配置文件，下面介绍几个核心配置项的作用：
- env：指定代码运行的环境，不同环境会预定义对应的全局变量，比如 browser 环境会预定义 window、document 等全局变量，避免 ESLint 报未定义的错误
- extends：继承已有的规则集，比如继承 standard 规范就不需要自己从头定义所有规则，也可以继承多个规则集，后面的规则会覆盖前面的冲突规则
- parserOptions：指定解析器的相关配置，比如支持的 ECMAScript 版本、模块化类型等，如果需要检查 TypeScript 代码，还需要配置对应的解析器
- rules：自定义规则配置，这里的规则会覆盖 extends 中继承的规则，规则的取值一般分为三种：「off」或 0 表示关闭规则，「warn」或 1 表示违反规则时给出警告，「error」或 2 表示违反规则时给出错误，比如我们可以添加一条规则，禁止在代码中使用 console.log：
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'warn'
}上面的规则表示生产环境下使用 console 会报错误，开发环境下使用 console 只报警告。
四、在命令行中使用 ESLint
配置完成后就可以在命令行中检查代码了，假设我们有一个 src 目录存放所有 JavaScript 代码，执行以下命令检查该目录下的所有 .js 文件：
npx eslint src/**/*.js
如果代码中存在不符合规则的问题，ESLint 会输出对应的错误或者警告信息，包括文件路径、行号、错误描述和对应的规则名。如果需要 ESLint 自动修复部分可以自动修复的问题，可以添加 --fix 参数：
npx eslint src/**/*.js --fix
为了方便使用，我们可以在 package.json 的 scripts 中添加对应的脚本：
{
"scripts": {
"lint": "eslint src/**/*.js",
"lint:fix": "eslint src/**/*.js --fix"
}
}之后只需要在终端执行 npm run lint 就可以检查代码，执行 npm run lint:fix 就可以自动修复可修复的代码问题。
五、在编辑器中集成 ESLint
如果每次修改代码都要手动执行命令检查效率很低，可以在编辑器中安装 ESLint 插件，实现代码实时检查。以 VS Code 为例：
- 打开 VS Code 的扩展面板，搜索「ESLint」插件，点击安装
- 安装完成后，VS Code 会自动读取项目中的 ESLint 配置，在编写代码时实时提示不符合规则的问题，鼠标悬停在错误提示上可以看到具体的规则说明和修改建议
- 可以在 VS Code 的设置中开启保存时自动修复，添加以下配置到 settings.json 中：
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}开启后每次保存文件时，ESLint 会自动修复当前文件中可以自动修复的问题，进一步提升开发效率。
六、忽略不需要检查的文件
有些文件或者目录不需要被 ESLint 检查，比如打包生成的 dist 目录、第三方的依赖 node_modules 目录，可以在项目根目录创建 .eslintignore 文件，写入需要忽略的路径，类似如下内容：
node_modules/ dist/ build/ *.config.js
ESLint 执行检查时会自动跳过 .eslintignore 中配置的路径，避免不必要的检查。
七、常见问题说明
1. 如果项目中使用了一些特殊的全局变量，ESLint 报未定义的错误，可以在 .eslintrc.js 的 globals 配置中添加全局变量声明：
globals: {
myCustomGlobal: 'readonly' // readonly 表示只读，writable 表示可写
}2. 如果需要在某个文件中临时关闭某条规则，可以使用 ESLint 的行内注释，比如在文件开头添加以下注释，关闭整个文件的 no-console 规则：
/* eslint-disable no-console */
3. 如果项目同时使用了 HTML 中的 <script> 标签引入代码，需要配置 parserOptions 中的 sourceType 为 script，同时调整 env 配置，避免规则检查出错。