vite + vue 怎么增加 eslint

<think>好的，我现在需要在Vite和Vue项目中集成ESLint。用户已经提供了一些引用资料，我需要仔细看看这些资料里的步骤，然后整理出一个清晰的配置流程。首先，引用[1]提到项目框架已经包括了Vite+Vue3+TypeScript+ESLint等工具，说明ESLint是已经存在的，但用户可能想了解具体的集成方法。接下来，引用[2]和[3]提到了安装lint-staged和相关Prettier的依赖，还有配置文件的创建步骤。 首先，我应该分步骤来指导用户如何配置ESLint。第一步通常是安装必要的依赖。根据引用[3]，需要安装ESLint以及相关的插件，比如eslint-plugin-vue用于Vue语法支持，还有@typescript-eslint/eslint-plugin用于TypeScript。可能还需要安装Prettier相关的包来和ESLint配合使用。然后，初始化ESLint配置，可以通过运行npx eslint --init来生成配置文件，或者手动创建.eslintrc.cjs文件，特别是因为Vite项目使用CJS模块可能需要这样的配置。 接下来，配置ESLint规则，可能需要覆盖Vue和TypeScript的解析器选项。例如，设置parser为'vue-eslint-parser'，并指定parserOptions里的parser为@typescript-eslint/parser。此外，添加扩展配置，如plugin:vue/vue3-recommended和@typescript-eslint/recommended，确保Vue3和TypeScript的语法检查正确。 然后，配置Prettier以避免与ESLint冲突，根据引用[3]，需要安装eslint-config-prettier和eslint-plugin-prettier，并在ESLint配置中扩展这些插件。同时，在项目根目录下创建.prettierrc.cjs文件来定义Prettier的格式化规则。 接下来，添加脚本命令到package.json中，比如"lint"和"lint:fix"，方便用户运行检查和自动修复。此外，集成到IDE中，比如VSCode的ESLint插件，可以实时显示错误，并在保存时自动修复。 另外，引用[2]提到使用lint-staged来对暂存区的文件进行检查，这可以作为Git钩子的一部分，确保提交的代码符合规范。需要安装husky和lint-staged，配置package.json中的lint-staged部分，针对不同的文件类型运行相应的命令。 最后，可能需要注意一些常见问题，比如配置文件的后缀是否正确（.cjs），依赖版本是否兼容，以及如何解决ESLint和Prettier的规则冲突。同时，用户可能需要了解如何扩展或自定义规则，以适应项目需求。 总结一下，步骤大致分为安装依赖、初始化配置、调整规则、集成Prettier、添加脚本、配置IDE和Git钩子，以及处理常见问题。需要确保每一步都清晰，并且参考用户提供的引用内容中的具体命令和配置示例，保证回答的准确性。</think>### Vite + Vue 项目集成 ESLint 的配置步骤 #### 一、安装依赖 1. **基础依赖** 安装 ESLint 核心库及 Vue/TypeScript 插件： ```bash pnpm add eslint eslint-plugin-vue @typescript-eslint/eslint-plugin @typescript-eslint/parser -D ``` 2. **Prettier 集成** 确保 ESLint 与 Prettier 兼容（引用[3]）： ```bash pnpm add prettier eslint-config-prettier eslint-plugin-prettier -D ``` --- #### 二、初始化 ESLint 配置 1. **创建配置文件** 在项目根目录新建 `.eslintrc.cjs`（注意后缀为 `.cjs`，适配 Vite 的模块系统）： ```javascript module.exports = { root: true, env: { browser: true, es2021: true }, extends: [ 'eslint:recommended', 'plugin:vue/vue3-recommended', 'plugin:@typescript-eslint/recommended', 'plugin:prettier/recommended' // 集成 Prettier 规则 ], parser: 'vue-eslint-parser', parserOptions: { parser: '@typescript-eslint/parser', sourceType: 'module' }, rules: { 'vue/multi-word-component-names': 'off' // 可选：关闭组件名多单词校验 } }; ``` --- #### 三、配置 Prettier 1. **创建 Prettier 配置文件** 新建 `.prettierrc.cjs`（引用[3]）： ```javascript module.exports = { semi: false, singleQuote: true, trailingComma: 'none', printWidth: 100 }; ``` --- #### 四、添加脚本命令 在 `package.json` 中添加： ```json { "scripts": { "lint": "eslint . --ext .vue,.ts,.js", "lint:fix": "eslint . --ext .vue,.ts,.js --fix" } } ``` --- #### 五、IDE 集成（以 VSCode 为例） 1. 安装 **ESLint** 和 **Prettier** 插件 2. 在设置中启用保存自动修复： ```json { "editor.codeActionsOnSave": { "source.fixAll.eslint": true } } ``` --- #### 六、Git 提交校验（可选） 1. 安装 **husky** + **lint-staged**（引用[2]）： ```bash pnpm add husky lint-staged -D npx husky install npx husky add .husky/pre-commit "npx lint-staged" ``` 2. 配置 `package.json`： ```json { "lint-staged": { "*.{vue,ts,js}": ["eslint --fix", "prettier --write"] } } ``` --- #### 常见问题 1. **配置文件后缀错误** 若项目使用 ESM，需改为 `.eslintrc.mjs` 或调整 `package.json` 的 `type` 字段。 2. **依赖版本冲突** 建议锁定版本号或使用 `pnpm` 的自动依赖解析。 3. **规则自定义** 通过 `.eslintrc.cjs` 的 `rules` 字段调整，例如禁用 `console`： ```javascript rules: { 'no-console': 'error' } ``` ---