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

---

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

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

#### 1. 安装基础包
```bash
# npm
npm install --save-dev eslint

# yarn
yarn add -D eslint

# pnpm
pnpm add -D eslint
```

#### 2. 根据项目类型安装对应插件
*   **对于 JavaScript 项目**：
    *   通常只需要 `eslint` 本身。
*   **对于 TypeScript 项目**：
    ```bash
    pnpm add -D @typescript-eslint/parser @typescript-eslint/eslint-plugin
    ```
*   **对于 Vue 项目 (Vue 3)**：
    ```bash
    pnpm add -D eslint-plugin-vue
    ```

---

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

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

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

#### 基础模板 (JavaScript)
```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 模板
```javascript
// .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 官方规则文档](https://eslint.org/docs/latest/rules/)、[@typescript-eslint 规则](https://typescript-eslint.io/rules/) 或 [eslint-plugin-vue 规则](https://eslint.vuejs.org/rules/) 来找到所有可用的规则。

---

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

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

1.  **安装插件**:
    ```bash
    pnpm add -D vite-plugin-eslint
    ```

2.  **配置 `vite.config.js`**:
    ```javascript
    // 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：

```json
{
  "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 规则了。

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

Vite中如何配置自定义ESLint规则？（2026 Vite全新配置教程 全程避坑，亲测有效）

在 Vite 项目中配置自定义 ESLint 规则，主要分为 安装依赖、创建配置文件 和 （可选）集成到开发服务器 三个核心步骤：
第一步：安装必要的 ESLint 依赖
第二步：创建并配置 `.eslintrc.cjs` 文件
第三步：（可选）集成到 Vite 开发服务器

前端

开发工具

Vite项目配置ESLint规则指南：安装ESLint核心包及对应插件，创建.eslintrc.cjs配置文件自定义规则，可选集成vite-plugin-eslint实现浏览器实时错误提示。支持JavaScript/TypeScript/Vue项目，提供基础模板和详细配置说明。

TypeScript

服务器

4核4G3M云服务器 新用户低至38元/年！

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云AI代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

功能1上新10个字符

功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符。

功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符。

功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符

功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符

功能4上新

文章&问答评论现已支持表情

全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验

社区富文本编辑器全新改版！诚邀体验～ 

精选全网热门MCP server，让你的AI更好用 🚀

💥开发者 MCP广场重磅上线！

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

Vite中如何配置自定义ESLint规则？（2026 Vite全新配置教程 全程避坑，亲测有效）-腾讯云开发者社区-腾讯云

Vite中如何配置自定义ESLint规则？（2026 Vite全新配置教程全程避坑，亲测有效）

Vite中如何配置自定义ESLint规则？（2026 Vite全新配置教程全程避坑，亲测有效）

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

Vite中如何配置自定义ESLint规则？（2026 Vite全新配置教程 全程避坑，亲测有效）

Vite中如何配置自定义ESLint规则？（2026 Vite全新配置教程 全程避坑，亲测有效）

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

Vite中如何配置自定义ESLint规则？（2026 Vite全新配置教程全程避坑，亲测有效）

Vite中如何配置自定义ESLint规则？（2026 Vite全新配置教程全程避坑，亲测有效）