最全的 ESLint 配置流程来了！

在前端开发中，代码质量和一致性至关重要。ESLint 是帮助你提升代码质量的关键工具，尤其是在使用 Vue 和 React 举行开发时，合理配置和使用 ESLint 能够大幅提升开发服从和代码质量。但是，你知道怎样在 VSCode 中无缝集成 ESLint，并让它主动为你提示和修复代码题目吗？如果还不清楚，赶紧学习，否则你可能已经落伍了！
   文末有我针对前端面试的多年履历文章，欢迎大家积极发言！！！  如今您可能还用不到这篇文章，不过可以先收藏起来。盼望将来它能为您提供所需的帮助！也欢迎在评论区分享你的题目或看法。
简朴说一下 ESLint 是做什么的

ESLint 是一款强大的工具，它能够实时检测并修复代码中的错误，确保你的代码风格一致、质量高，淘汰潜伏的 bug。无论你是一个人开发还是团队协作，通过 ESLint，你可以：

• 实时提示：在你编写代码的同时，ESLint 插件会及时指出语法错误和风格题目，让你第一时间修正。
  
• 主动修复：配置主动修复配置后，ESLint 会在你生存文件时主动修复常见错误，如缩进、引号类型等，省时省力。
  
• 统一风格：通过 ESLint 配置，你和团队可以遵循一致的编码风格，进步代码的可读性和维护性。
  
• 淘汰错误：ESLint 能帮助你捕获未界说变量、未使用变量等潜伏错误，低落 bug 发生的概率。
  

遵循 ESLint 规则能确保你的代码始终符合最佳实践，为项目的恒久维护和功能扩展打好坚实根本。
只需5步，搞定ESLint集成

1. 初始化 Vue 3 项目（以 Vue 3 示例）

如果还没有 Vue 3 项目，可以通过 Vue CLI 来创建：

1. npm install -g @vue/cli
2. vue create my-vue3-project

复制代码

在创建过程中，可以选择默认配置或自界说配置。
2. 安装 ESLint

进入项目目次，安装 ESLint 及相关插件（node 1）：

1. cd my-vue3-project
2. npm install eslint eslint-plugin-vue --save-dev

复制代码

注意：如果你的 eslint 版本 >9.0.0，那么 node 为（^18.18.0、^20.9.0 或 >=21.1.0）。我的 eslint 版本是 9.8.0，node 版本是 v18.17.1。
3. 初始化 ESLint 配置

使用以下命令初始化 ESLint 配置文件：（这里操作可能会有题目，请查看常见题目处理）

1. npx eslint --init

复制代码

在初始化过程中，ESLint 会问你一些题目来帮助生成适合你项目的配置文件。下面是一个示例的交互过程：

1. How would you like to use ESLint? …  您希望如何使用ESLint…
2.   To check syntax only  仅检查语法
3. ❯ To check syntax and find problems  检查语法并发现问题
4.   To check syntax, find problems, and enforce code style 检查语法、发现问题并强制执行代码样式

复制代码

就这样，一步一步选择适合你项目的所需的配置。

1. ✔ How would you like to use ESLint? · problems
2. ✔ What type of modules does your project use? · esm
3. ✔ Which framework does your project use? · vue
4. ✔ Does your project use TypeScript? · No / Yes
5. ✔ Where does your code run? · browser
6. ✔ What format do you want your config file to be in? · JavaScript
7. The config that you've selected requires the following dependencies:
9. eslint-plugin-vue@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest
10. ? Would you like to install them now with npm? › No / Yes

复制代码

这将生成一个 eslint.config.mjs 文件（小于 v9.0.0 版本会生成.eslintrc.js），包含初始配置。不过这不重要，由于它们的本质都是一样的。下面是我配置 Vue3 项目时，eslint（v9.8.0）主动生成的配置（扁平配置格式）:

1. // eslint.config.mjs
2. import globals from "globals"; // 常见全局变量的库（如 window、document 等）
3. import pluginJs from "@eslint/js"; // ESLint 官方提供的 JavaScript 规则插件
4. import tseslint from "typescript-eslint"; // TypeScript ESLint 插件，允许解析和检查 TypeScript 代码
5. import pluginVue from "eslint-plugin-vue"; // Vue.js 的 ESLint 插件，用于解析和检查 Vue 文件
7. export default [
8.   {
9.       files: ["**/*.{js,mjs,cjs,ts,vue}"]
10.   }, // 指定 ESLint 要检查的文件类型，包括 JS、MJS、CJS、TS 和 Vue 文件
11.   {
12.       languageOptions: { globals: globals.browser }
13.   }, // 为浏览器环境设置全局变量选项，允许代码中使用这些全局变量而不会触发 ESLint 警告
14.   pluginJs.configs.recommended, // 使用 ESLint 官方推荐的 JavaScript 规则配置
15.   ...tseslint.configs.recommended, // 使用 TypeScript ESLint 推荐的规则配置
16.   ...pluginVue.configs["flat/essential"], // 使用 Vue.js 插件提供的基本规则配置
17.   {
18.       files: ["**/*.vue"], // 针对 Vue 文件做特殊配置
19.       languageOptions: {
20.           parserOptions: { parser: tseslint.parser }
21.       } // 指定 TypeScript ESLint 解析器来解析 Vue 文件中的 `<script>` 块
22.   },
23. ];

复制代码

4. 配置 ESLint

然后我又在 eslint.config.mjs 文件中添加特定的 ESLint 配置（一般项目够用了）。如果项添加更丰富的配置，见官网 ESLint 配置或者中文网 ESLint 配置。

1. import globals from "globals";
2. import pluginJs from "@eslint/js";
3. import pluginVue from "eslint-plugin-vue";
4. import standard from "eslint-config-standard";
6. export default [
7.   // 指定文件匹配模式
8.   {
9.     files: ["**/*.{js,mjs,cjs,ts,vue}"],
10.   },
11.   // 指定全局变量和环境
12.   {
13.     languageOptions: {
14.       globals: globals.browser,
15.       ecmaVersion: 12, // 使用最新的 ECMAScript 语法
16.       sourceType: "module", // 代码是 ECMAScript 模块
17.     },
18.   },
19.   // 使用的扩展配置
20.   pluginJs.configs.recommended,
21.   pluginVue.configs["flat/essential"],
22.   standard,
23.   // 自定义规则
24.   {
25.     rules: {
26.       indent: ["error", 2], // 缩进使用 2 个空格
27.       "linebreak-style": ["error", "unix"], // 使用 Unix 风格的换行符
28.       quotes: ["error", "single"], // 使用单引号
29.       semi: ["error", "never"], // 语句末尾不加分号
30.       "no-console": process.env.NODE_ENV === "production" ? "warn" : "off", // 生产环境中警告 console 使用，开发环境中关闭规则
31.       "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off", // 生产环境中警告 debugger 使用，开发环境中关闭规则
32.     },
33.   },
34. ];

复制代码

注意，这里也是可以通过环境判断是否执行某些配置。
5. 执行 ESLint 检查

你已经生成了 eslint.config.mjs 文件，这是 ESLint 的配置文件，界说了代码检查规则和文件类型。
在你的 package.json 文件中，添加以下脚本，以便在本地开发或构建时运行 ESLint：

1. {
2.   "scripts": {
3.     "lint": "eslint . --ext .js,.mjs,.cjs,.ts,.vue",
4.     "lint:fix": "eslint . --ext .js,.mjs,.cjs,.ts,.vue --fix"
5.   }
6. }

复制代码

• lint: 这个脚本会检查当前项目根目次及其子目次中的全部文件，使用 .js, .mjs, .cjs, .ts, .vue 扩展名。
  
• lint:fix: 这个脚本会检查并尝试主动修复可修复的题目。
  

你还可以将 ESLint 集成到你的构建过程中。更新 package.json 文件中的 scripts 部门，以便在构建之前运行 ESLint：
如今，你可以通过以下命令来检查和修复代码：

1. npm run lint

复制代码

---

1. npm run lint:fix

复制代码

注意：ESLint 的 --fix 选项只能主动修复那些被标志为“可主动修复”的规则错误，比方代码格式化、简朴的语法修正等。但对于一些复杂的规则，--fix 可能无法处理，您需要手动修复这些题目。
思索：我们不能在每次编码后都去触发命令，从而通过eslint校验代码。那么有没有简朴快捷的方法呢？
我们盼望在本地运行时，部署打包时，都能运行eslint，而不是去触发npm run lint，怎么处理？
更深入的集成（开发、打包时主动检查和修复）

详细先容怎样在 Vite、Webpack 中集成 ESLint，并在 CI/CD 流程中保持代码的高质量。同时，我们还将讨论怎样在本地开发环境中，连续运行 ESLint 举行代码检查。
Vite 集成

在 Vite 项目中，我们可以使用 vite-plugin-eslint 插件，这样不但可以在开发过程中举行代码检查，还可以在打包时举行验证。
起首，安装插件：

1. npm install vite-plugin-eslint --save-dev

复制代码

然后在vite.config.js中举行配置：

1. import { defineConfig } from 'vite';
2. import vue from '@vitejs/plugin-vue';
3. import eslintPlugin from 'vite-plugin-eslint';
5. export default defineConfig({
6.     plugins: [
7.         vue(),
8.         eslintPlugin({
9.             // 可以在这里传入自定义配置
10.             // 默认会读取项目中的 .eslintrc.js 文件
11.         })
12.     ]
13. });

复制代码

你也可以直接配置插件的选项：

1. eslintPlugin({
2.     include: ['src/**/*.js', 'src/**/*.vue', 'src/**/*.ts'],  // 指定要检查的文件和目录。
3.     exclude: ['node_modules/**', 'dist/**'], // 排除不需要检查的文件和目录。
4.     fix: true,  // 在保存文件时自动修复 ESLint 问题。
5.     cache: false // 禁用 ESLint 缓存，以便每次都执行完整检查。
6. })

复制代码

注意：万万不要小瞧这个include、exclude，这两个配置可以帮助我们再老项目中，检查和主动修复分批举行。
通过这种方式，你不但能在开发阶段发现并修复代码题目，还能在打包时确保代码的质量。
Webpack 集成

在 Webpack 项目中，可以使用 eslint-webpack-plugin 插件。这能够让 ESLint 在每次构建时检查代码，并根据需要主动修复题目。
起首，安装插件：

1. npm install eslint-webpack-plugin --save-dev

复制代码

接着在webpack.config.js中配置：

1. const ESLintPlugin = require('eslint-webpack-plugin');
3. module.exports = {
4.     // 其他 Webpack 配置
5.     plugins: [
6.         new ESLintPlugin({
7.             extensions: ['js', 'vue', 'ts'], // 指定要检查的文件类型
8.             fix: true, // 启用自动修复功能
9.             cache: true, // 启用缓存，提高检查性能
10.             exclude: 'node_modules', // 排除的目录
11.             failOnError: true, // 如果有错误则使构建失败
12.         })
13.     ]
14. };

复制代码

通过这种方式，无论是开发还是生产环境的构建，都能确保代码质量不会降落。
CI/CD 集成

在连续集成/连续交付（CI/CD）流程中，集成 ESLint 是确保代码质量的重要一环。以下是怎样在 GitHub Actions 和 GitLab CI 中集成 ESLint：

• GitHub Actions:
  

1. name: CI
3. on: [push, pull_request]
5. jobs:
6.   lint:
7.     name: Lint Code Base
8.     runs-on: ubuntu-latest
9.     steps:
10.       - uses: actions/checkout@v3
11.       - name: Install Dependencies
12.         run: npm install
13.       - name: Run ESLint
14.         run: npm run lint

复制代码

·GitLab CI:

1. stages:
2.   - lint
4. eslint:
5.   stage: lint
6.   script:
7.     - npm install
8.     - npm run lint

复制代码

通过在 CI/CD 流程中集成 ESLint，可以在每次提交或合并请求时主动检查代码，确保代码符合团队的编码尺度。
使用 Git Hooks（代码库的处理）

为了防止不符合尺度的代码进入代码库，可以通过 Git Hooks 在提交接码时主动运行 ESLint。使用 husky 和 lint-staged 工具，你可以轻松实现这一点。
安装 husky 和 lint-staged

1. npm install husky lint-staged --save-dev

复制代码

配置 package.json

在 package.json 中添加以下配置：

1. {
2.   "husky": {
3.     "hooks": {
4.       "pre-commit": "lint-staged"
5.     }
6.   },
7.   "lint-staged": {
8.     "*.{js,mjs,cjs,ts,vue}": "eslint --fix"
9.   }
10. }

复制代码

这样，每次提交接码时，lint-staged 会运行 ESLint 并主动修复可修复的题目。
同志们，到这里关于eslint主动化在项目的运行就实现。但是我们可以会遇到一些题目，请参考下面处理！
常见题目处理

1、You can also run this command directly using 'npm init @eslint/config'.

执行 npx eslint --init 时，出现题目。这个题目是你的项目中初始化一个 ESLint 配置，但是你遇到了一个错误。错误信息表明存在与 npm 会话相关的题目，可能是由于一个可选依赖项安装失败。
检查下 node 版本，发起使用 node 16+，我用的是v16.14.2。
2、eslint 版本不一致

如果你是新项目，那么按照上面的配置来，很少出现题目。但是如果你是在老项目上重新加eslint，我的发起是非须要不加。
但是如果需要加的话，发起你先完成“执行Eslint检查”，然后触发npm run lint，看下有哪些文件、代码出现题目。而且你可能刚出现以下题目：

1. [plugin:vite-plugin-eslint] Failed to load plugin '@typescript-eslint' declared in '.eslintrc.js': Class extends value undefined is not a constructor or null

复制代码

有时候，@typescript-eslint 插件的版本较旧可能与较新的 ESLint 版本不兼容。以下是办理此题目的一些步骤：
1、更新 @typescript-eslint 插件。尝试将 @typescript-eslint 插件更新到最新版本。使用以下命令更新：

1. npm install @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest --save-dev

复制代码

2.确保 vite-plugin-eslint 插件是最新的。

1. npm install vite-plugin-eslint@latest --save-dev

复制代码

3、打扫缓存并重新安装依赖。删除node_modules和package-lock.json，然后重新安装全部依赖：

1. rm -rf node_modules package-lock.json
2. npm install

复制代码

4.手动运行 ESLint 检查。确保 ESLint 本身可以正常运行。在项目目次中，使用以下命令运行 ESLint：

1. npx eslint src --ext .js,.ts,.vue

复制代码

如果以上步骤没有办理题目，可以参考 ESLint、@typescript-eslint和vite-plugin-eslint的官方文档和 GitHub 题目跟踪器，看看是否有类似题目的办理方案。
3、Invalid option '--ext' - perhaps you meant '-c'?You're using eslint.config.js, some command line flags are no longer available.

1. > eslint . --ext .js,.mjs,.cjs,.ts,.vue
3. Invalid option '--ext' - perhaps you meant '-c'?
4. You're using eslint.config.js, some command line flags are no longer available. Please see https://eslint.org/docs/latest/use/command-line-interface for details.

复制代码

在使用 eslint.config.mjs 配置文件时，ESLint 的命令行选项有所不同。--ext 选项在使用新的 eslint.config.* 文件时不再可用，由于文件扩展名可以直接在配置文件中指定。
已经在 eslint.config.mjs 文件中指定了匹配模式为 **/*.{js,mjs,cjs,ts,vue}，这会告诉 ESLint 主动处理这些扩展名的文件，因此无需在命令行中指定 --ext。
使用 eslint 命令直接运行：
直接使用一下命令：

1. eslint .

复制代码

如果您需要进一步自界说检查的目次或文件，可以在命令行中指定目次或文件路径，而无需使用--ext选项。比方：

1. eslint src/

复制代码

4、ConfigError: Config (unnamed): Key "rules": Key "constructor-super": structuredClone is not defined

1. > eslint .
4. Oops! Something went wrong! :(
6. ESLint: 9.8.0
8. ConfigError: Config (unnamed): Key "rules": Key "constructor-super": structuredClone is not defined

复制代码

相比上面那种费时的配置处理，下面这种方式，不失为最简朴的方式之一，直接跳过打包工具的配置，由开发工具来举行ESLint的检查、修复。
借助编辑器和 IDE（一直在项目中配置失败怎么办？）

我们集成 ESLint 到编辑器或 IDE，这是非常快捷简朴的操作。
大多数现代编辑器和 IDE（如 VSCode、WebStorm、Sublime Text 等）都支持 ESLint 插件。通过安装 ESLint 插件，可以实现以下功能：

• 实时检查：在你编写代码时，编辑器会主动运行 ESLint，并在代码中标志出不符合规则的地方。
  
• 主动修复：在生存文件时，编辑器可以主动运行 ESLint 的 --fix 选项，主动修复简朴的题目。
  

1、安装 IDE 中的 ESLint 插件

• 打开 VS Code: 打开你的 Vue 3 项目。
  
• 进入扩展市场: 点击左侧活动栏中的“扩展”图标。
  
• 搜索 ESLint: 在搜索框中输入 “ESLint”。
  
• 安装插件: 找到 ESLint 插件后，然后点击“安装”。
  

2. 配置项目目次 .vscode/settings.json

为了让 ESLint 插件在生存文件时主动检查和修复代码题目，你需要在项目根目次下的 .vscode/settings.json 文件中创建或更新以下配置：

1. {
2.     "editor.codeActionsOnSave": {
3.         "source.fixAll.eslint": true
4.     },
5.     "eslint.validate": [
6.         "javascript",
7.         "javascriptreact",
8.         "vue"
9.     ]
10. }

复制代码

• editor.codeActionsOnSave: 这个配置项确保在生存文件时，VS Code 会主动应用全部 ESLint 规则举行修复。
  
• eslint.validate: 这个配置项指定哪些文件类型将由 ESLint 插件举行验证。在这里，我们添加了 JavaScript、JavaScript React 和 Vue 文件。
  

是不是很简朴，但是这个条件是需要新入职的员工在IDE先安装插件，可能有的刚入行的老师不熟练，以是这个有点微瑕。但是这个不失为是一个简朴快捷的代码规范方式。
来看看，实际应用效果

假设你在 VS Code 中编辑一个 Vue 组件文件 HelloWorld.vue，并且 ESLint 配置要求使用单引号，但你使用了双引号：

1. <template>
2.   <div class="hello">Hello, World!</div>
3. </template>
5. <script>
6. export default {
7.   name: "HelloWorld"
8. }
9. </script>

复制代码

如果 ESLint 配置要求使用单引号，并且你在 VS Code 中生存文件时，ESLint 将会主动将双引号修复为单引号：

1. <template>
2.   <div class='hello'>Hello, World!</div>
3. </template>
5. <script>
6. export default {
7.   name: 'HelloWorld'
8. }
9. </script>

复制代码

总结

通过项目集成 ESLint，你可以实时检测和修复代码题目，确保代码质量的一致性。这有助于保持代码的一致性和可读性。而我们也可以通过在开发工具 VS Code 中集成 ESLint，这两者不但可以实时得到代码提示，而且还能在生存时主动修复题目，从而进步开发服从和代码质量。
盼望这篇文章对你有所帮助！接下来给大家保举一篇我针对前端面试的多年履历文章，盼望大家看完以后都可以领取到心仪的offer哦!
文章：《聊聊前端面试那些事儿》

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。