Vue3项目工程化指南：Antfu整合Prettier与ESLint全流程

在Vue3项目开发中，代码规范与格式校验直接影响团队协作效率和代码维护性。本文将通过Antfu生态配置方案，详解如何实现ESLint代码检查、Prettier自动格式化与Git提交校验的无缝衔接，打造前端工程化最佳实践。

一、环境搭建与工具选型

1.1 核心工具定位

ESLint负责逻辑层面的代码质量检查，识别未使用变量、错误类型转换等问题。Prettier专注代码样式格式化，自动处理缩进、引号、换行等格式问题。两者通过eslint-config-prettier和eslint-plugin-prettier实现互补协作。

1.2 依赖安装

npm install --save-dev eslint prettier 
@typescript-eslint/eslint-plugin @typescript-eslint/parser 
eslint-config-prettier eslint-plugin-prettier 
@antfu/eslint-config

二、配置方案实施

2.1 ESLint规则配置

创建.eslintrc.cjs配置文件：

module.exports = {
  extends: [
    '@antfu',
    'plugin:prettier/recommended'
  ],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  }
}

2.2 Prettier风格定制

创建.prettierrc配置文件：

{
  "semi": false,
  "singleQuote": true,
  "trailingComma": "none"
}

2.3 自动化脚本配置

在package.json中添加：

"scripts": {
  "lint": "eslint --ext .js,.ts,.vue src",
  "format": "prettier --write src//.{js,ts,vue}"
}

三、Git提交校验集成

3.1 Husky钩子配置

npx husky-init && npm install
npx husky add .husky/pre-commit "npm run lint && npm run format"

3.2 lint-staged增量检测

配置package.json：

"lint-staged": {
  ".{js,ts,vue}": [
    "eslint --fix",
    "prettier --write"
  ]
}

四、TypeScript增强方案

4.1 严格模式启用

在tsconfig.json中开启：

{
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true
  }
}

4.2 类型定义管理

安装第三方库类型：

npm install --save-dev @types/lodash @types/node

五、常见问题解决方案

5.1 规则冲突处理

当ESLint的max-len规则与Prettier换行规则冲突时，通过eslint-config-prettier自动禁用冲突的ESLint规则。

5.2 自动修复机制

组合使用效果：

• ESLint --fix 修复逻辑错误
• Prettier --write 重写代码格式

通过本文配置方案，开发者可在Vue3项目中实现编码时实时校验、保存时自动格式化、提交时强制检测的三重质量保障。Antfu配置方案大幅降低维护成本，使团队能聚焦业务逻辑开发，持续输出高质量代码。