Vue 2 + Vite 项目集成 ESLint 和 Prettier

在 Vue 2 + Vite 项目中集成 ESLint 和 Prettier 可以帮助你规范代码风格并自动格式化代码。以下是详细的步骤：

---

1. 安装 ESLint 和 Prettier 相关依赖

在项目根目录下运行以下命令，安装 ESLint、Prettier 和相关插件：

npm install --save-dev eslint prettier eslint-plugin-vue eslint-config-prettier eslint-plugin-prettier @babel/eslint-parser

• eslint: ESLint 核心库。
• prettier: Prettier 核心库。
• eslint-plugin-vue: Vue 2 的 ESLint 插件。
• eslint-config-prettier: 关闭 ESLint 中与 Prettier 冲突的规则。
• eslint-plugin-prettier: 将 Prettier 作为 ESLint 的插件运行。
• @babel/eslint-parser: 用于解析 ES6+ 语法。

---

2. 初始化 ESLint 配置

在项目根目录下运行以下命令，初始化 ESLint 配置：

npx eslint --init

根据提示选择以下配置：

• How would you like to use ESLint? To check syntax, find problems, and enforce code style
• What type of modules does your project use? JavaScript modules (import/export)
• Which framework does your project use? Vue
• Does your project use TypeScript? No
• Where does your code run? Browser
• What format do you want your config file to be in? JavaScript

完成后，会生成一个 .eslintrc.js 文件。

---

3. 修改 ESLint 配置

打开 .eslintrc.js 文件，修改为以下内容：

module.exports = {root: true,env: {browser: true,node: true,},parserOptions: {parser: '@babel/eslint-parser', // 使用 @babel/eslint-parser 解析器sourceType: 'module',},extends: ['plugin:vue/essential', // Vue 2 的 ESLint 插件'eslint:recommended', // ESLint 推荐规则'plugin:prettier/recommended', // Prettier 插件],rules: {'prettier/prettier': 'error', // 启用 Prettier 的规则'vue/multi-word-component-names': 'off', // 关闭 Vue 组件名必须多单词的规则},
};

---

4. 配置 Prettier

在项目根目录下创建 Prettier 的配置文件 .prettierrc，并添加以下内容：

{"semi": true,"singleQuote": true,"tabWidth": 2,"trailingComma": "es5","printWidth": 80
}

• semi: 是否在语句末尾添加分号。
• singleQuote: 是否使用单引号。
• tabWidth: 缩进空格数。
• trailingComma: 是否在多行结构的最后一行添加逗号。
• printWidth: 每行代码的最大长度。

---

5. 添加 Prettier 忽略文件

在项目根目录下创建 .prettierignore 文件，指定不需要格式化的文件或目录：

/dist/
/node_modules/
/public/

---

6. 添加格式化脚本

在 package.json 中添加以下脚本：

{"scripts": {"lint": "eslint --ext .js,.vue src", // 检查代码"lint:fix": "eslint --ext .js,.vue src --fix", // 自动修复 ESLint 错误"format": "prettier --write \"src/**/*.{js,vue}\"" // 格式化代码}
}

运行以下命令检查代码：

npm run lint

运行以下命令自动修复 ESLint 错误：

npm run lint:fix

运行以下命令格式化代码：

npm run format

---

7. 配置 Vite 插件（可选）

为了让 Vite 在开发时支持 ESLint，可以安装 vite-plugin-eslint 插件：

1. 安装插件：

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

2. 在 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({include: ['src/**/*.js', 'src/**/*.vue'], // 检查的文件范围}),],
   });
   

现在，运行 npm run dev 时，Vite 会自动检查 ESLint 错误。

---

8. 配置编辑器（可选）

如果你使用的是 VSCode，可以安装 ESLint 和 Prettier 插件并启用保存时自动格式化：

1. 安装以下插件：
   • ESLint
   • Prettier - Code formatter
2. 在 VSCode 的设置中搜索 format on save，并启用保存时自动格式化。
3. 确保默认格式化工具为 Prettier：
   • 打开一个文件，右键选择 Format Document With...，然后选择 Prettier。

---

9. 提交时自动格式化（可选）

如果你想在 Git 提交时自动格式化代码，可以使用 husky 和 lint-staged：

1. 安装依赖：

   npm install --save-dev husky lint-staged
   

2. 在 package.json 中添加配置：

   {"husky": {"hooks": {"pre-commit": "lint-staged"}},"lint-staged": {"src/**/*.{js,vue}": ["prettier --write","eslint --fix","git add"]}
   }
   

3. 初始化 husky：

   npx husky install
   

现在，每次提交代码时，lint-staged 会自动格式化代码并修复 ESLint 错误。

---

10. 测试

运行以下命令检查代码格式：

npm run lint
npm run format

如果一切正常，你的代码将按照 ESLint 和 Prettier 的规则自动格式化和修复。

---

通过以上步骤，你的 Vue 2 + Vite 项目就成功集成了 ESLint 和 Prettier，并可以享受自动格式化和代码检查的便利！