指南

JowayYoung2025/5/15大约 5 分钟

背景

代码规范在前端工程化实践中扮演着非常重要的角色，它主要用于约束团队成员的编码规范和编码风格，使用代码规范有这些好处。

强制规范团队的编码规范和编码风格，使新旧成员的编码习惯保持一致，有利于项目的维护和扩展
提高项目代码的可维护性和可接入性，让新成员能够快速适应项目的架构和需求，降低项目的学习成本
保障项目的整体质量，减少无用代码、重复代码、错误代码和漏洞代码的产生几率，提高项目的稳定性和安全性

为了实现这些目标，代码校验工具起到非常重要的作用。众所周知，几乎所有编辑器都能配置代码校验工具检测代码中的错误和漏洞，根据提供的修复方案格输出正确的代码，使得代码更加严谨。

通过使用代码校验工具，开发人员可以轻松地遵循代码规范，在编码时也能避免常见的错误和漏洞，以便提高项目的代码质量和开发效率。

介绍

@yangzw/bruce-std是一个集成代码校验的VSCode配置工具，配合VSCode插件为用户提供前端文件的代码校验、代码修复和错误提示的功能。一条命令就能一次生成stylelint + eslint + commitlint + prettier + editorconfig的全局配置，正真做到配置一体化处理，使得项目完全脱离这些繁琐配置的影响。

它的主要作用是约束团队成员的编码规范和编码风格，以便提高项目代码的可维护性和可接入性，保障项目的整体质量，减少无用代码、重复代码、错误代码和漏洞代码的产生几率。它的根本目的是通过一次部署全局运行，统一所有项目的编码规范和编码风格，帮助开发人员养成规范的码字习惯，减少不必要的错误和漏洞，提高项目的代码质量和开发效率。

在全局环境中使用它，开发人员可以轻松地进行代码校验，避免常见的错误和漏洞，在编码时遵循统一的编码规范和编码风格。这样不仅可以提高代码的可读性和可维护性，还能降低项目的学习成本和维护成本，使得团队协作更加高效顺畅。

依赖

@yangzw/bruce-std依赖多个核心Npm模块的最新版本。

postcss babel typescript prettier stylelint eslint typescript-eslint markdownlint commitlint commitizen editorconfig

为了方便表达，统一这些名词。

后续提及的Prettier、Stylelint、Eslint和Markdownlint都是表示VSCode插件
后续提及的prettier、stylelint、eslint和markdownlint都是表示Npm模块

安装

使用npm/yarn/pnpm安装@yangzw/bruce-std。

npm

npm i -g @yangzw/bruce-std

yarn

yarn add global @yangzw/bruce-std

pnpm

pnpm i -g @yangzw/bruce-std

使用VSCode安装Beautify/Prettier/Stylelint/Eslint/Markdownlint/Editorconfig。

Beautify：美化HTML/CSS/JS类型文件(作为Prettier的辅助)
Editorconfig：统一编码风格
Eslint：校验JS类型文件
Markdownlint：校验MD类型文件
Prettier：美化所有类型文件
Stylelint：校验CSS类型文件

考虑到prettier比较固执，只在stylelint中集成prettier，暂未在eslint中集成prettier，而eslint提供的美化功能同样非常厉害。另外，prettier还能美化其它格式的文件，但是排除json/md文件在外。

在某些时候Prettier真的非常别扭和执着，所以使用Beautify代替它美化html/json文件。

使用

功能	命令	缩写	范围	使用	描述
复制配置	bruce-std copy	`bruce-std c`	`Beautify/Prettier` `Stylelint/Eslint/Markdownlint`	全局	打开`settings.json`粘贴配置
初始配置	bruce-std init	`bruce-std i`	`Commitlint/Editorconfig`	局部	自动将配置写入`package.json` 自动生成`.editorconfig`和`czrc.cjs`
更新配置	bruce-std update	`bruce-std u`	`Beautify/Prettier` `Stylelint/Eslint/Markdownlint`	全局	自动将配置写入`settings.json`

bruce-std c和bruce-std u用于配置Beautify/Prettier/Stylelint/Eslint/Markdownlint
bruce-std i用于配置Commitlint/Editorconfig
bruce-std c会抛出settings.json的文件路径，在CMD工具中可以直接打开文件
bruce-std u会覆写settings.json，导致原来文件中存在的注释会被清除，慎用
手动配置可能比较保险，具体操作请查看配置

功能	命令	缩写
帮助信息	bruce-std --help	`bruce-std -h`
版本信息	bruce-std --version	`bruce-std -v`

因为这些代码校验工具各自的特殊性，@yangzw/bruce-std分别对Beautify/Prettier/Stylelint/Eslint/Markdownlint和Commitlint/Editorconfig做针对性的处理。

对Beautify/Prettier/Stylelint/Eslint/Markdownlint做成全局统一配置，执行bruce-std c或bruce-std u在VSCode的settings.json中生成全局配置
对Commitlint/Editorconfig做成项目单一配置，执行bruce-std i在项目目录package.json中生成局部配置，同时生成.editorconfig和czrc.cjs

总之，第一条注意事项只需执行一次就能全局生效，第二条注意事项需要在每个项目中执行一次才能正常生效。