前端编码规范

# 一、编码规范官方文档

《参考总结资料》open in new window

# 1.Linter 修复工具

Linter 英译为衣服上多出来的小球、绒毛等，后指粘毛器（养猫🐱的人都知道这东西）。早在1978年，Stephen C.Johnson 在 debug 自己的 C 语言时的灵感：做一个工具来提示自己的代码写的哪里有问题，像【粘毛器】一样，把多出来的【毛球】去掉。

ESLintopen in new window, commitlintopen in new window, stylelintopen in new window, markdownlintopen in new window, prettierlintopen in new window

# 2.静态资源站点

vuepressopen in new window，这个一般来写技术文档，我的个人博客就是基于 vuepress 搭建静态资源站点，使用 github actions 自动发布。

# 3.node 库相关

inquireropen in new windowcommanderopen in new window

# 4.多包管理工具

lernaopen in new window

# 5.包管理工具

pnpmopen in new window

# 6.代码模板相关

ejsopen in new window

# 二、技术选型

1. 多包：monorepo lerna
2. 包管理工具：pnpm
3. lint：markdownlint、commitlint、stylelint、eslint、prettier
4. CLI
5. 测试：jest mocha

# 三、搭建思路

# 1.搭建项目基本框架

1. 初始化项目：lerna+pnpm的多包构建；
2. 梳理html规范、git规范、markdown规范、CHANGELOG规范；
3. 创建commitlint-config、markdownlint-config,使用npm scripts发布npm包；【我的npm主页open in new window】
4. 使用vuepress搭建静态资源站点，创建markdown及commitlint规范文档;
5. 支持CHANGELOG自动化更新；
6. 使用git action发布静态资源站点。

# 2、完善 lint 规则

eslint 定制化能力

1. 提供 CSS、Javascript、TypeScript、Node 编码规范；
2. 创建 stylelint-config，支持测试用例(结合jest测试工具使用可查看我的stylelint_npmopen in new window说明)；

   WARNING

   sass、less在2012年作为预处理器非常先进，2024年建议使用postcssopen in new window，参考github文档open in new window结合构建工具配置和lint定制化。postcss回归到样式的规范化，即如何将css植入到js代码中。

3. 创建eslint-config，支持不同维度（js、ts、react、vue）下的 eslint 定制；
   • 如缩进、换行分号、不能为空、空格、单行最大行数、禁止连续赋值、字符串强制单引号、Boolean用!!、命名等。参考《JavaScript 编码规范》open in new window
   • 可参考标准模板encode-fe-eslint-configopen in new window
4. 支持prettier

# 3、搭建 Node 脚手架

eslint plugin、CLI Node Api

1. 编码一套定制的 eslint 插件；
2. 编写一套完整的 CLI，支持一键接入；
3. 支持自动创建 .eslintrc.js、.eslintignore、.stylelintrc.js、.stylelintignore、commitlint.config.js、.markdownlint.json、.markdownlintignore、.prettierrc.js、.editorconfig 等；

# 4、实现一键扫描、一键修复

1、husky + git commit针对有问题的内容进行拦截；2、针对以上规范实现一键扫描、修复 利用lint工具

通过提供 CLI 的产物，实现一键接入（通过一键方式安装CLI,用最小的成本落地）、一键扫描（结合lint工具，扫描问题）、一键修复（当遇到不符合lint规范项目时如何fix）、一键升级（npm包升级）的功能。