前端规范体系

俗话说：“没有规矩不成方圆。”在前端项目开发过程中也是一样的。

如果一个项目只有一个人开发，那么这个人的习惯就可以是这个项目开发的规矩。

如果一个项目有几个人开发，那么这几个人的共识就可以是这个项目开发的规矩。

如果一个项目存在人员流动性，要想项目代码尽可能的统一，那么就必须有一套标准统一的、适合项目实际情况的开发规范。

通过对三年工作经历的总结，我封装了自己的开发规范库：Sherry Standard，里面包含了 ESLint, Prettier, stylelint, commitlint 的配置。

如果你是个人开发者，但有多个自己的项目，建议你也像这样封装 npm 包，在自己的项目模板里集成，这样能极大地简化你的项目模板，而且方便你去维护你自己的规范。

如果你是公司的前端 Leader，建议你结合你的团队情况，封装属于你们团队的 npm 包并集成到项目模板里，且严格要求各个项目和 developer 去执行，这样既有利于统一标准，也便于对团队的规范进行统一制定和执行。

这个专栏的前六篇文章详细介绍了各项开发工具库的集成，最后本篇文章将对这些工具库的集成做一个简单的汇总。

零、规范体系

在整个前端开发流程中，从拿到需求、UI设计、UX设计之后，还需要前端架构设计、项目基础设施搭建、业务组件设计等等、代码开发。

在整个过程中，需要有 PRD规范、UI设计规范、UX设计规范、前端设计规范、前端代码编写规范、代码文件组织规范、Git提交规范这一系列规范来约束前端项目的开发。

我们可以通过一些工具来保证代码编写、文件命名、Git提交的规范。

一、ESLint

文章传送门：一、项目集成 ESLint

ESLint 是用于对编写的 JS 代码进行格式化的工具，不同的框架还根据自己的特性进行了扩展，React 有 eslint-plugin-react ，Vue 有 eslint-plugin-vue。

在 Sherry Standard 里，我封装了 Vue3+TS 的 ESLint 配置：eslint-config-sherry-ts。

只需在 package.json 里进行简单的配置，并在 IDE 里配置好 ESLint 插件，即可享受 ESLint 带来的规范化 coding 旅程。

二、Prettier

文章传送门：二、ESLint 集成 Prettier (附 Prettier 配置)

Prettier 是一个用于格式化任意纯文本文件的工具，它可以集成到 ESLint 里，也可以单独去使用。

在 Sherry Standard 里，我封装了 Prettier 的配置：prettier-config-sherry。

只需在 package.json 里进行简单的配置，结合 Prettier 的命令行命令，在 IDE 里配置好 Prettier 插件，即可享受 Prettier 提供的各种格式化服务。

三、强制规范化

文章传送门：三、项目集成 husky 与 lint-staged

Git 提交的时候，需要对刚编写的代码强制进行格式化，避免有人因为没有在开发过程中遵循规范，而提交了不符合规范的代码。这时使用到的工具是 husky 和 lint-staged。

husky 是为了在项目准备时就为 developer 安装好 Git 的各项 hook，lint-staged 是为了在 developer 每次提交代码时强制为 Git Staged 区的代码执行预设的格式化命令。

由于这两个工具是集成在项目中的，因此我没有给它们封装定制化的配置，而是为我的每一类项目都做了项目模板，保证自己创建的项目都是满足我的规范化要求的。

四、规范文件名和目录名

文章传送门：四、项目集成 ls-lint

除了代码内容需要格式化之外，项目的目录命名和文件命名也同样需要格式化，ls-lint 就是完成这项工作的。

ls-lint 的集成和配置都非常简单，因此也没有封装定制化配置，而是集成到了项目模板里。

五、规范 Git 提交信息

文章传送门：五、项目集成 commitlint

Git 提交时，如果提交的信息不规范，也会给代码版本管理带来很大的困难。commitlint 的作用就是检测 git 提交的 message 是否符合规范。

在 Sherry Standard 里，我封装了 Commitlint 的配置：commitlint-config-sherry。

只需在 package.json 里做一个简单的配置，然后在 husky 中增加一个 commit-msg 的 git hook，在里面填上命令 pnpx commitlint -e -s 即可。

六、格式化样式代码

文章传送门：六、项目集成 stylelint

在开发过程中，Frontend Developer 除了要编写 JavaScript 代码外，通常还需要编写样式代码，不管是行内样式还是单独定义的样式，不管是 css 还是 less, scss, stylus，这些代码都可以借助 Stylelint 来规范化。

在 Sherry Standard 里，我封装了 Stylelint 的配置：stylelint-config-sherry。

只需在 package.json 里做一个简单的配置，即可结合 Stylelint 的 CLI 和 IDE 插件来对编写的样式代码进行格式化了。

结尾

虽然这些工具能在一定程度上解决前端开发过程中的部分规范化问题，但仍然无法解决所有的规范化问题。

要想前端项目能够足够规范，仍然需要有一份相对完整的开发规范文档作为规定，并且严格要求所有 developer 去遵循这些规定。