DataEase 前端工程化：ESLint、Prettier 与 Git Hooks 配置
项目地址: https://gitcode.com/GitHub_Trending/da/dataease 你是否还在为团队代码风格不统一而头疼？是否经常在代码 review 时花费大量时间讨论格式问题？本文将详细介绍 DataEase 前端项目如何通过 ESLint、Prettier 和 Git Hooks 构建自动化代码质量保障体系，让你彻底摆脱这些困扰。读完本文，你将掌握前端工程化配置的最佳实践，实现代码风格自动检查、格式化以及提交前的质量把关。
工程化配置概览
DataEase 前端项目采用了一套完整的工程化解决方案，通过 ESLint 进行代码质量检查，Prettier 负责代码格式化，同时结合 StyleLint 对样式文件进行规范。这些工具的配置文件集中在 core/core-frontend 目录下，形成了一套可复用的前端工程化模板。
核心配置文件清单
| 工具 | 配置文件路径 | 作用 |
|---|---|---|
| ESLint | .eslintrc.js | JavaScript/TypeScript 代码质量检查 |
| Prettier | prettier.config.js | 代码格式化规则 |
| StyleLint | stylelint.config.js | CSS/LESS 样式规范检查 |
| 依赖管理 | package.json | 工程化工具依赖配置 |
ESLint：代码质量的守护者
ESLint 是 DataEase 前端项目中保障代码质量的核心工具，它能够静态分析代码，找出潜在的错误和不规范的写法。
配置解析
DataEase 的 ESLint 配置位于 .eslintrc.js，主要特点包括：
- 继承了
plugin:vue/vue3-essential和@typescript-eslint/recommended规则集，兼顾 Vue 和 TypeScript 的最佳实践 - 使用
vue-eslint-parser解析 Vue 单文件组件 - 解决了 ESLint 和 Prettier 的冲突：
extends: [
'prettier',
'plugin:vue/vue3-essential',
'plugin:@typescript-eslint/recommended',
'plugin:prettier/recommended' // 解决ESlint和Prettier冲突
]
关键规则定制
针对项目特点，DataEase 对一些规则进行了定制：
rules: {
// 允许使用{}类型
'@typescript-eslint/ban-types': [
'error',
{
extendDefaults: true,
types: {
'{}': false
}
}
],
// 关闭Vue组件名必须为多单词的限制
'vue/multi-word-component-names': 0,
// 允许使用any类型
'@typescript-eslint/no-explicit-any': ['off'],
// 允许解构props
'vue/no-setup-props-destructure': ['off']
}
运行与集成
在 package.json 中配置了 lint 命令：
"scripts": {
"lint": "eslint . --ext .vue,.js,.ts,.jsx,.tsx --fix"
}
执行以下命令即可对项目进行代码检查并自动修复部分问题：
npm run lint
Prettier：代码格式化的统一标准
Prettier 负责代码的格式化工作，确保团队成员编写的代码具有一致的风格。
配置详解
DataEase 的 Prettier 配置位于 prettier.config.js，主要规则包括：
module.exports = {
// 一行最多 100 字符
printWidth: 100,
// 使用 2 个空格缩进
tabWidth: 2,
// 不使用缩进符，而使用空格
useTabs: false,
// 不尾随分号
semi: false,
// 使用单引号
singleQuote: true,
// 多行逗号分割的语法中，最后一行不加逗号
trailingComma: 'none',
// 单个参数的箭头函数不加括号 x => x
arrowParens: 'avoid',
// 对象大括号内两边加空格 { a:0 }
bracketSpacing: true
}
这些配置体现了 DataEase 前端团队的代码风格偏好，例如使用单引号、不使用分号结尾等。
与 ESLint 的协作
通过 eslint-config-prettier 和 eslint-plugin-prettier 两个包，DataEase 实现了 ESLint 与 Prettier 的无缝协作。前者禁用 ESLint 中与 Prettier 冲突的规则，后者则将 Prettier 作为 ESLint 的规则来运行，从而在执行 eslint --fix 时同时完成代码质量检查和格式化。
StyleLint：样式代码的规范利器
除了 JavaScript/TypeScript 代码，DataEase 还使用 StyleLint 对 CSS/LESS 样式文件进行规范。
配置要点
StyleLint 配置位于 stylelint.config.js，主要特点包括：
- 支持 Vue 单文件组件中的样式检查
- 集成
stylelint-order插件，强制 CSS 属性按特定顺序排列 - 自定义了大量规则，如支持
rpx单位、忽略 Vue 深度选择器等
属性排序规则
StyleLint 配置中定义了详细的 CSS 属性排序规则，确保样式代码的可读性和一致性：
'order/properties-order': [
'position',
'top',
'right',
'bottom',
'left',
'z-index',
'display',
// ... 更多属性
]
这种排序方式遵循了"布局相关属性优先，然后是盒模型，接着是排版和视觉效果"的逻辑，符合大多数开发者的思维习惯。
运行命令
在 package.json 中配置了 StyleLint 相关命令：
"scripts": {
"lint:stylelint": "stylelint --fix \"**/*.{vue,less,postcss,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/"
}
集成与自动化
DataEase 前端项目通过 npm scripts 将各种工程化工具集成在一起，形成了完整的自动化工作流。
开发与构建流程
在 package.json 中定义了丰富的 scripts 命令，涵盖了从开发到构建的各个环节：
"scripts": {
"dev": "NODE_OPTIONS=--max_old_space_size=4096 vite --mode dev --host 0.0.0.0",
"build:base": "NODE_OPTIONS=--max_old_space_size=4096 vite build --mode base && npm run build:flush",
"ts:check": "vue-tsc --noEmit",
"lint": "eslint . --ext .vue,.js,.ts,.jsx,.tsx --fix",
"lint:stylelint": "stylelint --fix \"**/*.{vue,less,postcss,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/",
"preview": "vite preview"
}
这些命令可以单独执行，也可以组合使用，形成完整的开发流水线。
编辑器集成建议
为了获得最佳的开发体验，建议在编辑器中安装以下插件：
- ESLint：实时检查代码质量问题
- Prettier：保存时自动格式化代码
- StyleLint：实时检查样式代码问题
同时，在项目中添加 .editorconfig 文件，可以进一步统一不同编辑器之间的基础格式设置。
总结与展望
DataEase 前端项目通过 ESLint、Prettier 和 StyleLint 的组合使用，构建了一套完善的代码质量保障体系。这些工具的配置文件集中在 core/core-frontend 目录下，形成了可复用的工程化模板。
虽然目前项目中尚未集成 Git Hooks 相关工具，但这将是下一步优化的方向。通过集成 husky 和 lint-staged，可以在代码提交前自动运行 lint 检查，从源头保证代码质量。
采用这套工程化方案后，DataEase 前端团队的开发效率得到了显著提升，代码质量更加稳定，团队协作更加顺畅。希望本文的分享能够帮助更多前端团队构建适合自己的工程化体系。
如果你对 DataEase 的前端工程化配置有任何疑问或建议，欢迎查阅项目源码或参与社区讨论。项目完整代码可通过以下地址获取：
git clone https://gitcode.com/GitHub_Trending/da/dataease
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
