Vue 2 + Vite 项目集成 ESLint 和 Prettier-EW帮帮网

在 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 插件：

安装插件：

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

在 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 插件并启用保存时自动格式化：

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

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

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

安装依赖：

npm install --save-dev husky lint-staged

在 package.json 中添加配置：

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

初始化 husky：
```
npx husky install
```

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

10. 测试

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

npm run lint
npm run format

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

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

Vue 2 + Vite 项目集成 ESLint 和 Prettier