当前位置：首页 > article >正文

Vue 2 + Webpack 项目中集成 ESLint 和 Prettier

article 2025/2/19 0:00:42

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

1. 安装 ESLint 和 Prettier 相关依赖

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

npm install --save-dev eslint prettier eslint-plugin-vue eslint-config-prettier eslint-plugin-prettier babel-eslint

eslint: ESLint 核心库。
prettier: Prettier 核心库。
eslint-plugin-vue: Vue 2 的 ESLint 插件。
eslint-config-prettier: 关闭 ESLint 中与 Prettier 冲突的规则。
eslint-plugin-prettier: 将 Prettier 作为 ESLint 的插件运行。
babel-eslint: 用于解析 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', // 使用 babel-eslint 解析器
  },
  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. 配置编辑器（可选）

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

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

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

如果你想在 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"
    ]
  }
}