在 Vite 项目中配置自定义 ESLint 规则，主要分为 安装依赖、创建配置文件 和 （可选）集成到开发服务器 三个核心步骤。以下是详细指南：

第一步：安装必要的 ESLint 依赖

首先，你需要安装 ESLint 核心包以及针对你项目技术栈的解析器和插件。

1. 安装基础包

# npm
npm install --save-dev eslint

# yarn
yarn add -D eslint

# pnpm
pnpm add -D eslint

2. 根据项目类型安装对应插件

• 对于 JavaScript 项目：
  • 通常只需要 eslint 本身。
• 对于 TypeScript 项目：

  pnpm add -D @typescript-eslint/parser @typescript-eslint/eslint-plugin
  

• 对于 Vue 项目 (Vue 3)：

  pnpm add -D eslint-plugin-vue
  

第二步：创建并配置 .eslintrc.cjs 文件

这是配置自定义规则的核心文件。Vite 项目推荐使用 .cjs 后缀以确保兼容性。

在项目根目录下创建 .eslintrc.cjs 文件，并根据你的需求进行配置。

基础模板 (JavaScript)

// .eslintrc.cjs
module.exports = {
  // 指定环境，让 ESLint 知道哪些全局变量是合法的
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  // 指定 ESLint 的推荐规则集
  extends: ['eslint:recommended'],
  // 指定解析器选项
  parserOptions: {
    ecmaVersion: 'latest', // 支持最新的 ECMAScript 特性
    sourceType: 'module',  // 使用 ES 模块
  },
  // 自定义规则
  rules: {
    // 例如：将 console.log 在生产环境设为警告，在开发环境关闭
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    
    // 其他自定义规则示例
    'semi': ['error', 'always'], // 强制使用分号
    'quotes': ['error', 'single'], // 强制使用单引号
    'indent': ['error', 2], // 强制使用2个空格缩进
  },
};

TypeScript + Vue 3 模板

// .eslintrc.cjs
module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'eslint:recommended',
    '@typescript-eslint/recommended', // TypeScript 的推荐规则
    'plugin:vue/vue3-essential', // Vue 3 的基础规则
    // 或者使用更严格的规则: 'plugin:vue/vue3-recommended'
  ],
  overrides: [],
  parser: 'vue-eslint-parser', // 用于解析 .vue 文件
  parserOptions: {
    ecmaVersion: 'latest',
    parser: '@typescript-eslint/parser', // 在 .vue 文件中解析 TypeScript
    sourceType: 'module',
    extraFileExtensions: ['.vue'],
  },
  plugins: ['vue', '@typescript-eslint'],
  rules: {
    // 在这里添加你的自定义规则
    'vue/multi-word-component-names': 'off', // 关闭组件名必须多单词的规则
    '@typescript-eslint/no-explicit-any': 'warn', // 将 any 类型设为警告
    'no-unused-vars': 'off', // 关闭基础规则，由 TS 插件接管
    '@typescript-eslint/no-unused-vars': ['error'], // 使用 TS 插件的规则
  },
};

关键点：

• rules 对象就是你定义自定义规则的地方。
• 规则的值可以是：
  • "off" 或 0：关闭规则。
  • "warn" 或 1：将规则视为警告（不会导致构建失败）。
  • "error" 或 2：将规则视为错误（会导致 lint 失败）。
• 你可以查阅 ESLint 官方规则文档、@typescript-eslint 规则 或 eslint-plugin-vue 规则 来找到所有可用的规则。

第三步：（可选）集成到 Vite 开发服务器

为了让 ESLint 错误直接在浏览器中显示，你可以安装 vite-plugin-eslint 插件。

1. 安装插件:

   pnpm add -D vite-plugin-eslint
   

2. 配置 vite.config.js:

   // 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({ // 添加插件
         cache: false, // 开发时建议关闭缓存以便实时看到错误
       }),
     ],
   });
   

完成此步骤后，在开发模式 (vite dev) 下，任何不符合 ESLint 规则的代码都会在浏览器中以醒目的错误或警告形式弹出，极大地提升了开发体验。

额外建议：添加 Lint 脚本

在 package.json 中添加脚本来方便地运行 ESLint：

{
  "scripts": {
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx,.vue",
    "lint:fix": "eslint . --ext .js,.jsx,.ts,.tsx,.vue --fix"
  }
}

• npm run lint：检查整个项目中的代码问题。
• npm run lint:fix：自动修复那些可以被自动修复的问题（如分号、引号、缩进等）。

通过以上三步，你就可以在 Vite 项目中成功配置并使用自定义的 ESLint 规则了。