终结代码混乱：SoybeanAdmin的ESLint+Prettier+Git Hooks全链路规范方案

终结代码混乱：SoybeanAdmin的ESLint+Prettier+Git Hooks全链路规范方案

【免费下载链接】soybean-admin Soybean Admin 是一个清新优雅、高颜值且功能强大的后台管理模板，基于最新的前端技术栈，包括 Vue3, Vite5, TypeScript, Pinia 和 UnoCSS。它内置了丰富的主题配置和组件，代码规范严谨，实现了自动化的文件路由系统。 项目地址: https://gitcode.com/GitHub_Trending/soy/soybean-admin

你是否还在为团队协作中的代码格式混乱、提交规范不一而头疼？本文将详解SoybeanAdmin如何通过ESLint、Prettier与Git Hooks构建自动化代码质量保障体系，让你5分钟上手企业级规范配置。

ESLint：静态代码检查核心配置

SoybeanAdmin采用@soybeanjs/eslint-config实现零配置开箱即用，核心配置文件eslint.config.js定义了Vue项目特有的规则集：

import { defineConfig } from '@soybeanjs/eslint-config';

export default defineConfig(
  { vue: true, unocss: true },
  {
    rules: {
      'vue/multi-word-component-names': [
        'warn',
        { ignores: ['index', 'App', 'Register', '[id]', '[url]'] }
      ],
      'vue/component-name-in-template-casing': [
        'warn',
        'PascalCase',
        { ignores: ['/^icon-/'] }
      ],
      'unocss/order-attributify': 'off'
    }
  }
);

上述配置解决了三个关键问题：

1. 通过multi-word-component-names规则强制组件命名规范，同时豁免特殊场景（如路由参数页[id].vue）
2. 要求模板中组件使用PascalCase命名风格，对图标组件icon-*例外处理
3. 关闭UnoCSS属性排序规则以兼容项目编码习惯

执行pnpm lint即可触发全量代码检查，配合IDE插件可实现实时错误提示。

提交前的质量关卡：lint-staged与simple-git-hooks

项目通过package.json配置实现提交阶段的自动化检查：

{
  "scripts": {
    "prepare": "simple-git-hooks",
    "lint": "eslint . --fix"
  },
  "simple-git-hooks": {
    "commit-msg": "pnpm sa git-commit-verify",
    "pre-commit": "pnpm typecheck && pnpm lint-staged"
  },
  "lint-staged": {
    "*": "eslint --fix"
  }
}

这套配置实现了三重防护：

1. pre-commit钩子：通过simple-git-hooks触发，先执行类型检查再运行lint-staged
2. 增量检查：仅对暂存区文件执行ESLint修复，大幅提升检查效率
3. 提交信息验证：通过sa git-commit-verify确保符合Angular提交规范

配置联动与开发体验优化

规则冲突解决方案

尽管项目未显式配置Prettier，但通过@soybeanjs/eslint-config内部集成，已实现格式化规则与ESLint的无缝协同。关键在于package.json中定义的依赖关系：

{
  "devDependencies": {
    "@soybeanjs/eslint-config": "1.3.7",
    "eslint": "9.6.0",
    "eslint-plugin-vue": "9.27.0",
    "vue-eslint-parser": "9.4.3"
  }
}

组件规范实践案例

以src/components/common/app-provider.vue为例，组件严格遵循命名规范与类型定义：

<script setup lang="ts">
import { createTextVNode, defineComponent } from 'vue';
import { useDialog, useLoadingBar, useMessage, useNotification } from 'naive-ui';

defineOptions({
  name: 'AppProvider' // 符合PascalCase命名规范
});
</script>

完整实施流程图

快速上手与扩展建议

1. 初始化项目：

git clone https://gitcode.com/GitHub_Trending/soy/soybean-admin
cd soybean-admin
pnpm install

2. 自定义规则扩展： 在eslint.config.js的rules字段添加项目特需规则，如：

{
  rules: {
    // 禁止console.log在生产环境
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  }
}

3. 常见问题排查：

• 规则冲突：执行pnpm lint --debug查看规则来源
• 提交失败：检查simple-git-hooks是否成功安装（查看node_modules/.git/hooks目录）

通过这套规范体系，SoybeanAdmin实现了从编码到提交的全流程质量管控。配合src/views/home/modules/creativity-banner.vue等组件的最佳实践，既保证了代码质量，又不失开发灵活性。收藏本文，下次搭建项目直接复用这套成熟方案！

【免费下载链接】soybean-admin Soybean Admin 是一个清新优雅、高颜值且功能强大的后台管理模板，基于最新的前端技术栈，包括 Vue3, Vite5, TypeScript, Pinia 和 UnoCSS。它内置了丰富的主题配置和组件，代码规范严谨，实现了自动化的文件路由系统。 项目地址: https://gitcode.com/GitHub_Trending/soy/soybean-admin