🔥🔥 最全的 ESLint 配置流程来了！（欢迎来踩）最全的ESlint配置流程，如何集成到Vue、React以及C

在前端开发中，代码质量和一致性至关重要。ESLint 是帮助你提升代码质量的关键工具，尤其是在使用 Vue 和 React 进行开发时，合理配置和使用 ESLint 能够大幅提升开发效率和代码质量。但是，你知道如何简单详细配置，并让它自动为你提示和修复代码问题吗？如果还不清楚，抓紧学习，这里一站式步骤配置到你的项目中！

目前您可能还用不到这篇文章，不过可以先收藏起来。希望将来它能为您提供所需的帮助！也欢迎在评论区分享你的问题或见解。

~ 简单说一下 ESLint 是做什么的 ~

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

1. 实时提示：在你编写代码的同时，ESLint 插件会及时指出语法错误和风格问题，让你第一时间修正。
2. 自动修复：配置自动修复配置后，ESLint 会在你保存文件时自动修复常见错误，如缩进、引号类型等，省时省力。
3. 统一风格：通过 ESLint 配置，你和团队可以遵循一致的编码风格，提高代码的可读性和维护性。
4. 减少错误：ESLint 能帮助你捕获未定义变量、未使用变量等潜在错误，降低 bug 发生的概率。

遵循你配置好的 ESLint 规则，能确保你的代码始终符合最佳状态，便于项目的长期维护和功能扩展。

🔥🔥只需5步，搞定ESLint集成

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

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

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

在创建过程中，可以选择默认配置或自定义配置。

2. 安装 ESLint

进入项目目录，安装 ESLint 及相关插件：

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

注意：如果你的 eslint 版本 >9.0.0，需要确保 Node.js 版本符合要求（如 ^18.18.0、^20.9.0 或 >=21.1.0）。以下是我项目的版本组合：

• eslint 版本：8.39.0
• eslint-plugin-vue 版本：9.11.0

3. 初始化 ESLint 配置

使用以下命令初始化 ESLint 配置文件：

npx eslint --init

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

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

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

✔ How would you like to use ESLint? · problems
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · vue
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · browser
✔ What format do you want your config file to be in? · JavaScript
The config that you've selected requires the following dependencies:

eslint-plugin-vue@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest
? Would you like to install them now with npm? › No / Yes

生成的 .eslintrc.js 文件（eslint 大于等于 v9.0.0 版本会生成eslint.config.mjs，扁平配置格式），包含初始配置。下面是我配置 Vue3 项目时，eslint 自动生成的配置:

module.exports = {
    // 指定代码运行的环境
    "env": {
        "browser": true,  // 允许使用浏览器环境中的全局变量，如 window 和 document
        "es2021": true  // 支持 ECMAScript 2021 的语法
    },
    // 继承一些推荐的配置和规则集
    "extends": [
        "eslint:recommended",  // 继承 ESLint 的推荐规则
        "plugin:vue/essential",  // 继承 Vue 的基础规则集，适用于 Vue.js 项目
        "plugin:@typescript-eslint/recommended"  // 继承 TypeScript 的推荐规则集，适用于 TypeScript 项目
    ],
    // 解析器选项，定义如何解析不同的 ECMAScript 版本和模块
    "parserOptions": {
        "ecmaVersion": 12,  // 指定 ECMAScript 版本为 12（ES2021）
        "parser": "@typescript-eslint/parser",  // 使用 @typescript-eslint/parser 解析 TypeScript 代码
        "sourceType": "module"  // 指定使用 ES 模块的模块系统
    },
    // 插件部分，增加对 Vue 和 TypeScript 的支持
    "plugins": [
        "vue",  // 支持 Vue.js 代码的解析和校验
        "@typescript-eslint"  // 支持 TypeScript 代码的解析和校验
    ],
    // 自定义的规则配置（当前为空，但可以添加自定义规则）
    "rules": {
        // 例如： "semi": ["error", "always"] 强制要求语句以分号结束
    }
};

4. 配置 ESLint

在 .eslintrc.js 文件中添加更丰富的 ESLint 配置。以下是一个更完整的示例：

require('@rushstack/eslint-patch/modern-module-resolution')

module.exports = {
    root: true, // 指定此配置文件为根配置，ESLint 将不会查找父目录中的配置文件
    env: {
        node: true, // 启用 Node.js 环境
        browser: true, // 启用浏览器环境
        es2021: true // 启用 ES2021 的全新语法
    },
    extends: [
        'plugin:vue/vue3-essential', // 基本 Vue 3 规则
        'eslint:recommended', // ESLint 推荐的规则
        '@vue/eslint-config-typescript', // Vue + TypeScript 的 ESLint 配置
        '@vue/eslint-config-prettier/skip-formatting' // 与 Prettier 兼容的 ESLint 配置，跳过格式化规则
    ],
    overrides: [
        {
            files: ['cypress/e2e/**/*.{cy,spec}.{js,ts,jsx,tsx}'], // 对 Cypress 测试文件的特定规则
            extends: ['plugin:cypress/recommended'] // 启用 Cypress 的推荐规则
        }
    ],
    parserOptions: {
        ecmaVersion: 2021, // 支持 ECMAScript 2021 的语法
        sourceType: 'module' // 使用 ES 模块的语法
    },
    rules: {
        // 代码风格规则
        'semi': [2, 'never'], // 不使用分号
        'indent': [
            2,
            4,
            { SwitchCase: 1 } // switch 语句中的 case 分支使用 1 个空格缩进
        ],
        'no-multi-spaces': 2, // 不允许多个连续的空格
        'space-unary-ops': [2, { words: true, nonwords: false }], // 一元运算符后必须有空格
        'space-infix-ops': 2, // 中缀操作符周围必须有空格
        'space-before-blocks': [2, 'always'], // 代码块前必须有空格
        'no-mixed-spaces-and-tabs': 2, // 不允许混合使用空格和制表符
        'no-multiple-empty-lines': [2, { max: 1 }], // 连续空行不超过 1 行
        'no-trailing-spaces': 2, // 行尾不允许有空格
        'no-whitespace-before-property': 2, // 属性名和点运算符之间不能有空格
        'no-irregular-whitespace': 2, // 不允许出现不规则的空白字符
        'space-in-parens': [2, 'never'], // 圆括号内不能有空格
        'comma-dangle': [2, 'never'], // 逗号不允许有拖尾
        'array-bracket-spacing': [2, 'never'], // 数组括号内不允许有空格
        'object-curly-spacing': [2, 'never'], // 对象括号内不允许有空格
        'max-len': ['error', { code: 120 }], // 行宽最大为 120 字符
        'operator-linebreak': [2, 'before'], // 运算符换行时，运算符在行首
        'comma-style': [2, 'last'], // 逗号风格：换行时在行尾
        'no-extra-semi': 2, // 不允许出现多余的分号
        'curly': [2, 'all'], // 使用大括号包裹所有控制结构
        'key-spacing': [2, { beforeColon: false, afterColon: true }], // 属性名与冒号之间不能有空格，冒号后必须有空格
        'comma-spacing': [2, { before: false, after: true }], // 逗号后必须有空格
        'semi-spacing': [2, { before: false, after: true }], // 分号后必须有空格
        'camelcase': [1, { properties: 'always' }], // 强制使用驼峰命名法
        'new-cap': ['error', { newIsCap: true, capIsNew: false }], // 构造函数首字母必须大写
        'spaced-comment': [2, 'always'], // 注释后必须有空格
        'no-inline-comments': 2, // 不允许行内注释
        'eqeqeq': [2, 'always', { null: 'ignore' }], // 强制使用全等 (===) 运算符
        'no-else-return': [1, { allowElseIf: false }], // 禁止 else 语句，如果 if 语句中已返回值
        'no-loop-func': 2, // 禁止在循环中定义函数
        'no-restricted-syntax': [
            1,
            {
                selector: 'BinaryExpression[operator=\'instanceof\']',
                message: 'Use \'instanceof\' for object type detection.' // 不建议使用 instanceof 来检测对象类型
            },
            {
                selector: 'BinaryExpression[operator=\'typeof\']',
                message: 'Use \'typeof\' for type detection.' // 不建议使用 typeof 来检测类型
            },
            {
                selector: 'CallExpression[callee.name=\'parseInt\']',
                message: 'Use Math.floor, Math.round, or Math.ceil instead of parseInt to remove decimal points.' // 不建议使用 parseInt 来移除小数点
            }
        ],
        'no-implicit-coercion': [1, { allow: ['!!'] }], // 禁止隐式类型转换
        'radix': [2, 'always'], // parseInt 函数必须指定进制
        'quotes': [2, 'single'], // 强制使用单引号
        'no-array-constructor': 2, // 不允许使用 Array 构造函数
        'max-lines-per-function': [
            1,
            {
                max: 50, // 函数最大行数为 50 行
                skipComments: true, // 跳过注释行
                skipBlankLines: true, // 跳过空行
                IIFEs: true // 对立即调用的函数表达式 (IIFE) 应用规则
            }
        ],
        'max-params': [1, 6], // 函数参数最大数量为 6
        'no-eval': 2, // 禁止使用 eval
        'prefer-const': 1, // 建议使用 const 声明不变的变量
        'no-var': 1, // 建议使用 let/const 替代 var
        'prefer-destructuring': [
            1,
            { object: true, array: false } // 建议使用解构赋值
        ],
        'prefer-template': 1, // 建议使用模板字符串
        'template-curly-spacing': [2, 'never'], // 模板字符串中的花括号内不允许有空格
        'no-duplicate-imports': 2, // 禁止重复导入
        // TypeScript 特定规则
        '@typescript-eslint/no-unused-vars': 'error', // 禁止未使用的变量
        '@typescript-eslint/explicit-module-boundary-types': 'off' // 允许省略函数的返回类型
    },
    globals: {
        withDefaults: true, // Vue 3 特性
        defineExpose: true, // Vue 3 特性
        defineEmits: true, // Vue 3 特性
        defineProps: true // Vue 3 特性
    }
}

如果想添加更丰富的配置，见官网 ESLint 配置或者中文网 ESLint 配置。

注意，这里也是可以通过 node 环境判断是否执行某些配置。如process.env.NODE_ENV === 'production' ? 'error' : 'off',

5. 执行 ESLint 检查

你可以在 package.json 文件中添加以下脚本，以便在本地开发或构建时运行 ESLint：

{
  "scripts": {
    "lint": "eslint . --ext .js,.mjs,.cjs,.ts,.vue",
    "lint:fix": "eslint . --ext .js,.mjs,.cjs,.ts,.vue --fix"
  }
}

使用以下命令来检查和修复代码：

npm run lint
npm run lint:fix

通过这五个步骤，你就可以在 Vue 3 项目中轻松集成并使用 ESLint 进行代码质量检查。

注意：ESLint 的 --fix 选项只能自动修复那些被标记为“可自动修复”的规则错误，例如代码格式化、简单的语法修正等。但对于一些复杂的规则，--fix 无法处理，需要手动修复这些问题。

我们不能每次都手动执行 eslint 吧！也不能每次都对所有的文件都检查和修复吧！！

🎯Git Hooks：在提交代码时自动执行 ESLint 检测并修复格式问题

Git Hooks 不仅能避免每次手动运行 ESLint，还能只对新修改的代码。在项目开发中，我们通常不希望对所有文件进行代码格式检测，而只针对新修改的代码进行检查。为此，可以借助 Git Hooks 在提交代码时自动运行 ESLint，并使用 husky 和 lint-staged 实现这一流程。同样只需 5 步即可完成配置：

1. 安装 husky 和 lint-staged

首先，安装 husky 和 lint-staged 作为开发依赖：

npm install husky lint-staged --save-dev

2. 配置Husky

接下来，通过以下命令初始化 Husky 来管理 Git Hooks：

npx husky install

这个命令操作会在项目根目录下创建一个 .husky/ 文件夹。随后，在 package.json 中添加一条脚本命令，方便启用 Husky：

{
  "scripts": {
    "prepare": "husky install"
  }
}

3. 添加 pre-commit Hook

使用 Husky 添加一个 pre-commit 钩子：

npx husky add .husky/pre-commit "npx lint-staged"

执行上述命令后，会在 .husky/ 目录下生成一个 pre-commit 文件，内容如下：

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx lint-staged

4. 配置 lint-staged

在 package.json 中添加 lint-staged 配置，指定在提交时要检查的文件及对应的命令。

{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,mjs,cjs,ts,vue}": "eslint --fix"
  }
}

5. 测试配置是否成功！

完成上述配置后，尝试修改某个文件（例如添加一行空白），然后使用 git add <文件路径> 和 git commit。此时，lint-staged 和 Husky 的钩子将会被触发，自动运行 ESLint 并修复格式问题。以下是我的执行结果示例：

至此，Git Hooks 的配置就完成了。以后在提交代码时，lint-staged 会自动运行 ESLint 检测并修复可自动修复的问题，确保提交的代码符合规范。

到这里我们就可以结束了，已经满足我们的要求了。 但是如果，我就想检查和修改所有的文件代码呢？

🎯更深入的集成：开发与打包时自动检查与修复

在实际开发中，我们开发与打包时自动检查与修复项目所有的文件。那么有没有更快捷的方法来集成 ESLint，使其在本地运行和部署打包时自动执行呢？

接下来，我们将探讨如何在 Vite 和 Webpack 中集成 ESLint，并确保在 CI/CD 流程中始终保持代码的高质量。注意：这部分配置可能稍显复杂，因为它可能涉及依赖版本、Node 版本等问题。如果你觉得麻烦，配置到 Git Hooks 即可满足大部分项目的需求。

Vite 集成

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

首先，安装插件：

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

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

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import eslintPlugin from 'vite-plugin-eslint';

export default defineConfig({
    plugins: [
        vue(),
        eslintPlugin({
            // 可以在这里传入自定义配置
            // 默认会读取项目中的 .eslintrc.js 文件
        })
    ]
});

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

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

注意：千万不要小瞧这个include、exclude，这两个配置可以帮助我们在老项目中，检查和自动修复分批进行（老项目文件太多，不规范的更多）。

通过这种方式，你不仅能在开发阶段发现并修复代码问题，还能在打包时确保代码的质量。

Webpack 集成

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

首先，安装插件：

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

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

const ESLintPlugin = require('eslint-webpack-plugin');

module.exports = {
    // 其他 Webpack 配置
    plugins: [
        new ESLintPlugin({
            extensions: ['js', 'vue', 'ts'], // 指定要检查的文件类型
            fix: true, // 启用自动修复功能
            cache: true, // 启用缓存，提高检查性能
            exclude: 'node_modules', // 排除的目录
            failOnError: true, // 如果有错误则使构建失败
        })
    ]
};

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

注意：如果的项目是 Vue2，并且是 Vue-Cli 搭建的项目，可以通过配置lintOnSave 来决定是否在保存文件时自动触发代码检查。 配置如下：

module.exports = {
  lintOnSave: true,  // true 开启保存时自动 lint；false 关闭
  // publicPath: process.env.VUE_APP_ENV === 'prod' ? '' || '/',
  // css: {},
  // chainWebpack: {},
  // devServer: {}
}

CI/CD 集成

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

• GitHub Actions:

name: CI

on: [push, pull_request]

jobs:
  lint:
    name: Lint Code Base
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Install Dependencies
        run: npm install
      - name: Run ESLint
        run: npm run lint

• GitLab CI:

stages:
  - lint

eslint:
  stage: lint
  script:
    - npm install
    - npm run lint

通过在 CI/CD 流程中集成 ESLint，可以在每次提交或合并请求时自动检查代码，确保代码符合团队的编码标准。

上面都需要下载依赖，就会涉及版本不兼容问题，那么有没有更简单的方式呢？答案是有的，我们往下看

🚀最快的集成方式：借助编辑器和 IDE 实现 ESLint 自动化检查和修复（你不能错过的最简单方法）

当我们谈到代码规范时，大多数人的第一反应可能是复杂的依赖安装、各种版本不兼容、甚至是让人头疼的配置过程。但其实，有一种方法可以让你完全跳过这些麻烦，只需要几分钟配置，就能轻松实现代码风格统一、自动修复格式错误，这就是——直接借助编辑器和 IDE。

这可能是最简单的 ESLint 集成方式，没有之一。它完全绕过了复杂的依赖版本问题，也不需要考虑 Node 版本的兼容性。如果你是一名个人开发者，或者团队中每个成员都已经习惯使用同一个编辑器，那么这个方法简直是为你量身定做的。

为什么选择这种方式？

大多数现代编辑器和 IDE（如 VSCode、WebStorm、Sublime Text 等）都支持 ESLint 插件。通过安装 ESLint 插件，可以实现以下功能：

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

这里已经简单到，仅需 3 步！

1. 如何在 VS Code 中快速配置 ESLint 插件？

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

2. 配置 .vscode/settings.json

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

{
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true  // 保存时自动修复 ESLint 报错
    },
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "vue"
    ],
    "eslint.options": { 
        "configFile": ".eslintrc.js" // 指定 ESLint 配置文件路径 
    }
}

• editor.codeActionsOnSave: 这个配置项确保在保存文件时，VS Code 会自动应用所有 ESLint 规则进行修复。
• eslint.validate: 这个配置项指定哪些文件类型将由 ESLint 插件进行验证。在这里，我们添加了 JavaScript、JavaScript React 和 Vue 文件。
• eslint.options.configFile: 明确指定 ESLint 配置文件的路径，这对于在多配置文件环境中确保 ESLint 使用正确的规则非常重要。

在大多数情况下， .vscode/settings.json 不需要额外配置 ESLint 配置文件路径，因为 VSCode 的 ESLint 插件会自动读取项目根目录中的 .eslintrc.js 或其他格式的 ESLint 配置文件（如 .eslintrc.json、.eslintrc.yaml、.eslintrc 等）。这个文件自己创建，自己编写就行。

3. 实战效果

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

<template>
  <div class="hello">Hello, World!</div>
</template>

<script>
export default {
  name: "HelloWorld"
}
</script>

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

<template>
  <div class='hello'>Hello, World!</div>
</template>

<script>
export default {
  name: 'HelloWorld'
}
</script>

是不是超简单？但这个方法的前提是开发者需要在编辑器中正确配置 ESLint 插件。如果团队成员不愿意配置或使用不同的编辑器，效果可能会打折扣。但对于个人开发者，尤其是刚上手 ESLint 的朋友，这是快速上手、解决代码规范问题的最佳方案！

总结

总之，通过合理配置 ESLint 和 Git Hooks，我们可以满足绝大多数情况下的代码质量需求。如果你希望在开发或打包阶段自动检查和修复项目中的所有问题，可以考虑将 ESLint 配置到打包工具中。然而，这一过程可能涉及复杂的依赖版本管理、Node 版本不兼容以及繁琐的配置步骤。(常见 ESLint 配置问题收录)

为简化这一过程，最快的集成方式是利用编辑器和 IDE 中的 ESLint 插件。这些插件可以实时监控代码，自动检测并修复问题，无需繁琐的手动配置。

希望这篇文章对你有所帮助！你有什么关于 ESLint 集成的经验或问题吗？欢迎在评论区分享你的见解或提问！