前端代码格式化规范【一】

装依赖

pnpm add husky @commitlint/cli @commitlint/config-conventional -D

初始化husky

pnpm exec husky init

配置 Commitlint

commitlint.config.js

export default {
  extends: ['@commitlint/config-conventional'],  
  rules: {
    'type-enum': [
      2,
      'always',
      [
        'bug',      // 此项特别针对bug号，用于向测试反馈bug列表的bug修改情况
        'feat',     // 新功能（feature）
        'fix',      // 修补bug
        'docs',     // 文档（documentation）
        'style',    // 格式（不影响代码运行的变动）
        'refactor', // 重构（即不是新增功能，也不是修改bug的代码变动）
        'test',     // 增加测试
        'chore',    // 构建过程或辅助工具的变动
        'revert',   // feat(pencil): add ‘graphiteWidth’ option (撤销之前的commit)
        'merge'     // 合并分支， 例如： merge（前端页面）： feature-xxxx修改线程地址
      ]
    ]
  }
}

继承 @commitlint/config-conventional 的默认规则
新建一个.husky\commit-msg.sh文件输入以下内容

. "$(dirname -- "$0")/_/husky.sh"

npx --no -- commitlint --edit $1

提交规范完成接下来使用eslint+prettier+biomejs 完成代码格式的验证

npm install eslint -g
全局安装后之后，执行eslint --init 选最新的9.X 在package.json的script中加入下面
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0"

安装prettier
pnpm add prettier -D

新建.prettierrc 文件

{
  "singleQuote": true,
  "jsxSingleQuote": false,
  "trailingComma": "all",
  "printWidth": 100,
  "proseWrap": "never",
  "importOrder": ["^(react|react-dom)$", "^([a-z]|@[a-z])", "", ".*"],
  "plugins": ["@ianvs/prettier-plugin-sort-imports"],
  "overrides": [
    {
      "files": ".prettierrc",
      "options": {
        "parser": "json"
      }
    }
  ]
}

上面是用的antd-design的配置信息 importOrder和 @ianvs/prettier-plugin-sort-imports是用来做import排序的 vue 换成vue的正则即可

安装lint-staged

pnpm add lint-staged -D 在package.json中加入

"lint-staged": {
    "*.{ts,tsx,js,jsx}": "biome format --write",
    "*.{json,less,md}": "prettier --ignore-unknown --write"
}

这里更具项目情况去配置

为什么要使用biomejs

biomejs 在引入$schema后，代码有很多风格有很好的建议，而且Biome 基于 Rust 编程语言构建，性能更好 在项目中增加依赖
pnpm add @biomejs/biome -D
然后执行
npx @biomejs/biome init更改biomejs配置

{
	"$schema": "https://biomejs.dev/schemas/1.7.3/schema.json",
	"formatter": {
    "enabled": true,
    "ignore": ["./dist/*", "./es/**/*", "./lib/**/*", "_site/**/*", "./node_modules/*"],
    "indentStyle": "space",
    "lineWidth": 100,
    "indentWidth": 2
  },
  "javascript": {
    "formatter": {
      "quoteStyle": "single"
    }
  }
}

希望那天biomejs 一统江湖 到时候不需要这么繁琐的配置