【前端工程化】Eslint+Prettier vue项目实现文件保存时自动代码格式化
工作流程：
- 当保存文件时，VS Code 触发格式化
- ESLint 首先运行代码质量检查
eslint-plugin-prettier调用 Prettier 进行格式化eslint-config-prettier确保 ESLint 不干涉格式化规则@vue/eslint-config-prettier确保 Vue 单文件组件正确格式化- 格式化结果自动应用到文件
实现步骤
1. 安装ESLint
- 检查Eslint的版本，配合Prettier一起使用，需要版本大于8
package.js
"devDependencies": {
"eslint": "^8.0.0",
}2. 安装在 Vue 项目中集成 ESLint 和 Prettier 所需的开发依赖包
bash
npm install -D prettier eslint-plugin-prettier eslint-config-prettier @vue/eslint-config-prettier- 作用：
prettier
- 代码格式化工具核心包
- 负责实际的代码格式化工作
- 支持 JavaScript, TypeScript, CSS, SCSS, Less, HTML, Vue 等多种语言
eslint-plugin-prettier
- 将 Prettier 作为 ESLint 插件运行
- 允许通过 ESLint 规则运行 Prettier
- 在 ESLint 错误中显示 Prettier 的格式化问题
- 启用规则：
"prettier/prettier": "error"
eslint-config-prettier
- 禁用所有与 Prettier 冲突的 ESLint 规则
- 确保 ESLint 不会报告 Prettier 已处理的格式问题
- 防止两个工具在相同问题上产生冲突报告
@vue/eslint-config-prettier
Vue 官方提供的 Prettier 集成配置
专门针对 Vue 项目优化
包含：
eslint-config-prettier的基础功能- Vue 特定规则与 Prettier 的兼容配置
- 针对
.vue文件的优化设置
3. 典型配置
- 在
.eslintrc.js或package.json的 eslintConfig 中，这里使用的新建配置文件.eslintrc.js、.eslintignore文件和.prettierrc、.prettierignore文件
.eslintrc.js
module.exports = {
root: true,
env: {
node: true,
browser: true,
es2021: true,
},
extends: [
'plugin:vue/vue3-essential',
'eslint:recommended',
'prettier', // 直接使用 prettier 而不是 @vue/prettier
],
plugins: ['prettier'],
parserOptions: {
parser: '@babel/eslint-parser',
ecmaVersion: 2021,
sourceType: 'module',
requireConfigFile: false,
},
rules: {
'prettier/prettier': 'warn',
'vue/multi-word-component-names': 'off',
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'vue/html-self-closing': [
'warn',
{
html: {
void: 'always',
normal: 'always',
component: 'always',
},
svg: 'always',
math: 'always',
},
],
'vue/attribute-hyphenation': ['warn', 'always'],
'vue/v-bind-style': ['warn', 'shorthand'],
},
};
.eslintignore
/public
/dist
/node_modules
src/assets/fonts/**/*.js
*.log
.prettierrc
{
"semi": true,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "all",
"printWidth": 100,
"bracketSpacing": true,
"arrowParens": "always",
"endOfLine": "auto"
}
.prettierignore
/dist
/node_modules
/public
src/assets/fonts/**/*.js
*.html4. 配置 VS Code
-
安装 VS Code 扩展：
- ESLint (dbaeumer.vscode-eslint)
- Prettier - Code formatter (esbenp.prettier-vscode)
- Volar (Vue 官方推荐扩展)
-
在项目根目录创建
.vscode/settings.json文件：
settings.json
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.validate": [
"javascript",
"javascriptreact",
"vue"
],
"files.associations": {
"*.vue": "vue"
},
"prettier.enable": true,
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}5. 应用更改
- 安装所有依赖：
bash
npm install- 测试配置是否生效：
bash
npm run lint6. 验证自动格式化
- 在 VS Code 中打开一个 Vue 文件
- 添加一些格式混乱的代码
- 保存文件（Ctrl+S）
- 应该会自动格式化代码
总结
- ESLint：作为代码质量检查的核心工具（版本≥8.0）
- Prettier：负责代码风格的统一格式化
- 集成插件 ：
eslint-plugin-prettier：将 Prettier 作为 ESLint 规则运行eslint-config-prettier：解决规则冲突@vue/eslint-config-prettier：优化 Vue 单文件组件支持
这种配置实现了高效的自动化工作流：当开发者保存文件时，VS Code 会触发 ESLint 进行代码质量检查，然后通过 Prettier 自动应用统一的代码风格，整个过程无需人工干预。
统一代码风格是现代前端工程化的基石。通过本文介绍的 ESLint + Prettier 自动化工作流，您的 Vue 项目将获得以下关键优势：
- 效率提升：消除手动格式化时间，让开发者专注于核心逻辑
- 质量保证：实时错误检测防止低级错误进入生产环境
- 团队协作：统一的代码风格消除个人偏好带来的差异
- 专业规范：符合 Vue 官方推荐的最佳实践
"好的代码不需要解释，它自己会说话。" - Robert C. Martin
下一步建议：
- 根据团队规范调整
.prettierrc中的风格设置 - 集成 Git Hooks（如 husky + lint-staged）确保提交代码的质量
- 定期更新依赖版本以获取最新特性和安全修复
实践出真知：立即在您的 Vue 项目中实施这套工作流，体验自动化代码格式化带来的开发愉悦感。当每次保存文件时看到代码自动变得整洁规范，您会感谢今天的决定。
扩展阅读：
让工程化工具成为您高质量代码生产的流水线，而非约束创造力的枷锁。Happy coding! 💻✨