OpenTiny/TinyVue代码规范：ESLint+Prettier配置

技术文档

OpenTiny/TinyVue代码规范：ESLint+Prettier配置

【免费下载链接】tiny-vue TinyVue is an enterprise-class UI component library of OpenTiny community, support both Vue.js 2 and Vue.js 3, as well as PC and mobile. 项目地址: https://gitcode.com/opentiny/tiny-vue

前言：为什么需要统一的代码规范？

在企业级前端项目中，代码规范不仅仅是\"好看\"的问题，它直接关系到：

团队协作效率：统一的代码风格减少代码review时的认知负担
代码质量保障：静态检查工具提前发现潜在问题
维护成本降低：一致的代码结构便于后续维护和迭代
新人上手速度：规范的代码风格让新成员快速融入项目

OpenTiny/TinyVue作为企业级UI组件库，采用了业界领先的ESLint + Prettier组合来确保代码质量。

核心配置解析

1. ESLint配置（.eslintrc.js）

/* eslint-env node *//** @type {import(\'eslint\').Linter.Config} */module.exports = { extends: [\'@antfu\', \'plugin:prettier/recommended\'], rules: { // Vue组件标签顺序规范 \'vue/component-tags-order\': [ \'error\', { order: [[\'script\', \'template\'], \'style\'] } ], // 自定义规则覆盖 \'vue/attribute-hyphenation\': \'off\', \'vue/v-on-event-hyphenation\': \'off\', \'vue/order-in-components\': \'off\', // ... 更多规则配置 }}

关键特性：

基于@antfu配置：使用Anthony Fu的ESLint配置作为基础
Prettier集成：通过plugin:prettier/recommended确保与Prettier兼容
Vue特定规则：针对Vue.js框架的专门优化
灵活的规则覆盖：根据项目需求自定义规则开关

2. Prettier配置（.prettierrc）

{ \"semi\": false, \"singleQuote\": true, \"printWidth\": 120, \"trailingComma\": \"none\", \"quoteProps\": \"preserve\", \"endOfLine\": \"auto\", \"bracketSpacing\": true, \"jsxBracketSameLine\": true, \"jsxSingleQuote\": false, \"useTabs\": false, \"tabWidth\": 2, \"proseWrap\": \"preserve\", \"arrowParens\": \"always\"}

格式化规则详解：

配置项值说明 semi false 不使用分号 singleQuote true 使用单引号 printWidth 120 每行最大字符数 trailingComma none 不使用尾随逗号 tabWidth 2 缩进使用2个空格

3. Git提交规范（commitlint.config.js）

module.exports = { extends: [\'@commitlint/config-conventional\'], rules: { \'header-max-length\': [1, \'always\', 150] }}

支持Conventional Commits规范，确保提交信息的标准化。

工作流集成

1. Package.json脚本配置

{ \"scripts\": { \"format\": \"prettier --write --cache packages/**/{*.vue,*.js,*.ts,*.jsx,*.tsx,*.less} examples/**/{*.vue,*.js,*.ts,*.jsx,*.tsx} internals/**/{*.js,*.ts}\", \"lint\": \"eslint \\\"packages/**/{*.vue,*.js,*.ts}\\\" --quiet --fix\", \"lint:doc\": \"eslint \\\"examples/**/{*.vue,*.js,*.ts}\\\" --quiet --fix\", \"prettier\": \"prettier --config .prettierrc --write .\" }}

2. 开发工作流

mermaid

最佳实践指南

1. 本地开发配置

安装必要的开发依赖：

pnpm install -D eslint prettier @antfu/eslint-config

配置编辑器（VSCode示例）：

{ \"editor.codeActionsOnSave\": { \"source.fixAll.eslint\": \"explicit\" }, \"editor.formatOnSave\": true, \"eslint.validate\": [ \"javascript\", \"javascriptreact\", \"typescript\", \"vue\" ]}

2. 自定义规则扩展

如果需要添加项目特定规则：

// .eslintrc.jsmodule.exports = { extends: [\'@antfu\', \'plugin:prettier/recommended\'], rules: { // 项目特定规则 \'no-console\': process.env.NODE_ENV === \'production\' ? \'error\' : \'warn\', \'no-debugger\': process.env.NODE_ENV === \'production\' ? \'error\' : \'warn\' }}

3. 多环境配置

针对不同目录的差异化配置：

// examples/sites/demos/.eslintrc.cjsmodule.exports = { extends: [\'../../.eslintrc.js\'], rules: { // 演示代码特定规则 \'no-console\': \'off\' }}

常见问题解决

1. 规则冲突处理

当ESLint和Prettier规则冲突时：

// 使用prettier插件解决冲突extends: [\'@antfu\', \'plugin:prettier/recommended\']

2. 性能优化

对于大型项目，启用缓存：

prettier --write --cache [文件模式]eslint --cache --fix [文件模式]

3. 忽略文件配置

创建.eslintignore和.prettierignore：

# .eslintignoredist/node_modules/*.min.js

总结

OpenTiny/TinyVue的代码规范配置体现了现代前端项目的最佳实践：

标准化：统一的代码风格和提交规范
自动化：集成到开发工作流的各个环节
可扩展：灵活的规则配置和覆盖机制
高性能：缓存机制确保大型项目的检查效率

通过这套配置，团队可以：

✅ 确保代码质量一致性
✅ 提高开发效率
✅ 降低维护成本
✅ 便于新人快速上手

建议在实际项目中参考此配置，根据团队需求进行适当调整，打造最适合自己项目的代码规范体系。

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

OpenTiny/TinyVue代码规范：ESLint+Prettier配置