前端规范【二】 biomejs1.x + lefthook + commitlint

代码风格和格式化工具-biomejs

需要 biomejs 插件

安装

pnpm add @biomejs/biome -D

配置

执行npx @biomejs/biome init

在biomejs.json中有多个配置项
formatter、linter、organizeImports、files、javascript、css、json linter 一些代码风格规范 formatter 代码格式规范
organizeImports import 排序
files format、linter 都忽略node_modules 就在 files里面写ignore

贴一个我们项目的配置

{
  "$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
  "files": {
    "ignore": [
      "./dist/*",
      "./public/**/*",
      "./node_modules/*"
    ]
  },
  "formatter": {
    "indentWidth": 2,
    "indentStyle": "space",
    "lineWidth": 100
  },

  "javascript": {
    "formatter": {
      "quoteStyle": "single",
      "semicolons": "asNeeded"
    }
  },
  "json": {
    "parser": {
      "allowTrailingCommas": false,
      "allowComments": true
    }
  },
  "organizeImports": {
    "enabled": true
  },
  "linter": {
    "rules": {
      "recommended": true,
      "a11y": {
        "useKeyWithClickEvents": "off",
        "useKeyWithMouseEvents": "off",
        "useMediaCaption": "off",
        "useValidAnchor": "off"
      },
      "performance": {
        "noDelete": "off"
      },
      "suspicious": {
        "noExplicitAny": "off",
        "noArrayIndexKey": "off"
      },
      "complexity": {
        "noBannedTypes": "off",
        "noForEach": "off",
        "useLiteralKeys": "off"
      },
      "correctness": {
        "useExhaustiveDependencies": "off"
      },
      "style": {
        "noParameterAssign": "off"
      }
    }
  }
}

提交校验-@commitlint/cli和@commitlint/config-conventional

安装

pnpm add @commitlint/cli @commitlint/config-conventional -D
根据项目的配置在项目根目录下新建commitlint 配置文件

配置

commitlint.config.js

export default { extends: ['@commitlint/config-conventional'] }

触发工具-leftHook

安装

pnpm add lefthook -D

配置

执行 lefthook install

package.json script中增加 prepare

"scripts": {
    "prepare": "lefthook install"
}

会有一个lefthook.yaml 配置文件
lefthook 有很多钩子 我们项目中只有提交前 和对提交规范的校验 使用的是angluar 的校验规则

pre-commit:
  commands:
    check:
      glob: "*.{js,ts,cjs,mjs,d.cts,d.mts,jsx,tsx,json,jsonc,vue}"
      run: npx @biomejs/biome check --write --no-errors-on-unmatched --files-ignore-unknown=true --colors=off {staged_files}
      stage_fixed: true

commit-msg:
  commands:
    "lint commit message":
      run: npx commitlint --edit {1}

如果你是react项目，目前这套配置就够了，如果你是vue biomejs 暂时不支持对vue文件的template 进行格式化

备选-prettier(vue项目)

需要vscode prettier 插件

安装

pnpm add prettier -D

配置

新建一个配置文件prettier 的配置文件.prettierrc

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

importOrder
plugins
@ianvs/prettier-plugin-sort-imports 是做自动导入的 根据项目情况添加

vscode 配置

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.organizeImports.biome": "never"
  },
  "editor.defaultFormatter": "biomejs.biome"
}