基础规范
规范代码组织结构
统一代码风格，即源代码的书写风格
组件、函数等命名规范
开发工具规范
代码组织结构 统一代码风格
使用Lint规范代码
HTMLHint
CSSLint
ESLint
TSLint
规范化命名，提升可读性
命名法：（1）驼峰命名法；（2）下划线命名法；（3）匈牙利命名法
CSS及其预处理器命名规则：如Airbnb CSS/Saas指南
组件命名规则：（1）按照功能来命名，比如SideBar就是一个侧边栏功能的组件；（2）按页面来切分组件，比如NewsItem就是用于展示新闻的组件，它既用于列表页，又用于相关新闻页；（3）按上下文来命名组件，如NewsChildItem就是按需要将上一个组件的某个共用元素拆分出来
使用插件规范开发工具，提升开发效率
EditorConfig，它可以让我们读取项目中的.editorconfig配置，以遵循统一的编辑器规范，诸如两个空格的缩进
Lint插件，如ESLint、HTMLHint，可以帮助我们在IDE及编辑器上显示Lint问题
单词拼写检测，直接在代码中显示拼错的单词，可以帮助其他人阅读代码
路径补全（Path Intellisense），能自动提醒我们可以引用的资源、库路径
代码自动补全，包含不同语言的代码补全
Emmet插件，可以帮助我们快速编写HTML、CSS等
代码格式化，可以帮助我们格式化代码
项目文档化：README搭建指南
运行环境
依赖准备，以及如何搭建
项目安装指南
线上示例
相关文档链接
相关人员联系方式，讨论群
绘制架构图：减少沟通成本
代码生成架构图：Graphviz、Darge.js
专业工具绘制架构图：Visio（收费）、OmniGraffle（收费）、Dia（开源）
软件附带工具：Keynote、SmartArt
在线工具：ProcessOn
可编辑文档库：提升协作性
Wiki
Confluence
Git + Markdown
记录架构决策
标题
日期
描述决策相关的状态，包含提议、通过、完成、已弃用、已取代等
价值中立的、用于描述事实上下文的背景
应对这种场景的相应决策
记录应用决策后产生的后果
可视化文档： 比如ViewUI官方文档iviewui.com/components/…
看板工具： 统一管理业务知识
Jira
Tapd
禅道
Teambition
提交信息： 每次代码提交文档化
用commitlint插件规范提交日志格式
用standard-version插件来生成changelog文件
通过流程化提高代码质量
代码预处理Lint + Git Hooks：（1）通过Lint做静态代码分析；（2）运行测试；（3）风格检测，如规范函数名及变量、代码格式规范、限制语言特性、函数行数限制、多重嵌套限制、未使用代码清除等；（4）使用git hooks，如"commit-msg"中执行"commitlint"，"pre-commit"中执行"npm run lint"，"pre-push"中执行"npm run test && npm run build --prod"
手动检视代码：（1）常规代码检视Code Review；（2）阻塞式代码检视merge request
使用工具提升代码质量
代码扫描工具：Sonar
IDE快速重构：Intellij IDEA
测试策略
参考资料：
《前端架构：从入门到微前端》
微信公众号“前端那些事儿”：
相关文章：