前端规范【三】 biomejs2.x + lefthook + commitlint

biomejs2.x 也是出了好久了 更新下biomejs.2.x的配置

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

需要 biomejs 插件

安装

pnpm add @biomejs/biome -D

配置

执行npx @biomejs/biome init

贴一个我们项目的配置

{
  "$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
  "files": {
    "ignoreUnknown": true,
    "includes": ["**", "!public/**/*", "!node_modules/**/*", "!dist/**/*"]
  },
  "formatter": {
    "enabled": true,
    "indentStyle": "space",
    "lineWidth": 100,
    "indentWidth": 2
  },
  "linter": {
    "rules": {
      "style": {
        "useImportType": "off",
        "useNumberNamespace": "off",
        "useNodejsImportProtocol": "off",
        "noNonNullAssertion": "off",
        "noUnusedTemplateLiteral": "info",
        "useConst": {
          "level": "warn",
          "fix": "unsafe"
        }
      },
      "complexity": {
        "noUselessTypeConstraint": "off",
        "noForEach": "off",
        "useDateNow": "off"
      },
      "correctness": {
        "useExhaustiveDependencies": "off",
        "useHookAtTopLevel": "off",
        "noUnusedFunctionParameters": "off",
        "noUnusedVariables": "off",
        "useUniqueElementIds": "off",
        "useParseIntRadix": "off"
      },
      "security": {
        "noDangerouslySetInnerHtml": "off"
      },
      "suspicious": {
       "noConsole": {
          "level": "warn",
          "options": {
            "allow": ["warn", "error"]
          }
        },
        "noDebugger": "warn",
        "noGlobalIsNan": "off",
        "noGlobalIsFinite": "off",
        "noExplicitAny": "off",
        "noArrayIndexKey": "off",
        "noConfusingVoidType": "off",
        "noThenProperty": "off",
        "noTemplateCurlyInString": "off"
      },
      "performance": {
        "noDelete": "off",
        "noAccumulatingSpread": "off",
        "noDynamicNamespaceImportAccess": "off"
      },
      "a11y": {
        "noAriaHiddenOnFocusable": "off",
        "noLabelWithoutControl": "off",
        "useFocusableInteractive": "off",
        "useKeyWithClickEvents": "off",
        "useSemanticElements": "off",
        "noStaticElementInteractions": "off",
        "useAriaPropsSupportedByRole": "off",
        "useAriaPropsForRole": "off",
        "useValidAnchor": "off",
        "useMediaCaption": "off"
      },
      "nursery": {
        "useSortedClasses": {
          "level": "warn",
          "fix": "safe"
        }
      }
    }
  },
  "css": {
    "formatter": {
      "quoteStyle": "single"
    }
  },
  "javascript": {
    "jsxRuntime": "reactClassic",
    "formatter": {
      "quoteStyle": "single",
      "semicolons": "asNeeded"
    }
  },
  "assist": {
    "enabled": true,
    "actions": {
      "source": {
        "organizeImports": {
          "level": "on",
          "options": {
            "identifierOrder": "natural",
            "groups": [
              [":NODE:", ":BUN:"],
              ":BLANK_LINE:",
              ["react", "react-dom/**", "react-dom", "react-router", "react-router-dom"],
              ["vue", "vue-router"],
              ":BLANK_LINE:",
              ["@/**", "**"]
            ]
          }
        }
      }
    }
  }
}

biomejs 支持情况

集成

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

--error-on-warnings 代表遇到错误 会退出 --diagnostic-level=warn 代表只有warn 以上的才会报错
--colors=off 代表输出是否有颜色（关掉颜色 在ci 环境里 转成 ASCII 码 兼容性高）

biomejs配置项说明

在biomejs.json中有多个配置项 files biomejs 格式化的范围限定
linter 一些代码风格规范
formatter 代码格式规范
assist 是一些辅助操作 比如 导入排序

tips: 2.x 删除了 files 下面ignore 将他合并到了 file.includes 下面 这个文件忽略有两种做法

使用文件注释

// biome-ignore lint: <explanation>
// biome-ignore assist: <explanation>
// biome-ignore syntax: <explanation>
// biome-ignore lint/suspicious: <explanation>
// biome-ignore lint/suspicious/noDebugger: <explanation>
// biome-ignore lint/suspicious/noDebugger(foo): <explanation>
// biome-ignore-all lint: <explanation>
// biome-ignore-start lint: <explanation>
// biome-ignore-end lint: <explanation>

ingore files

在inclues 里面使用 "!" 不能单独使用！而是要在一个大集合里去排除，比如 ** 比如 src/**

{
    "files": {
        "includes": ["**", "!**/*.test.js", "**/special.test.js", "!test"]
    }
}

不自动修复

往往我们会配置 ide 自动修复bug "source.fixAll.biome": "explicit", 比如我们定义一个变量用了 let 还没往下写代码 点击保存
啪！
变成了const 这时候就要用到

... linter.rules.style
    "useConst": {
      "level": "warn",
      "fix": "unsafe"
    }
...

unsafe 和 none 的区别是 unsafe 保留了编辑器手动修复的能力

类名排序 tailwindcss unocss

... linter.rules
 "nursery": {
    "useSortedClasses": {
      "level": "warn", //
      "fix": "safe"
    }
  }
...

提交校验-@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 --error-on-warnings --no-errors-on-unmatched --files-ignore-unknown=true --colors=off  --diagnostic-level=warn {staged_files}
      stage_fixed: true

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

vscode 配置

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

biomejs也是支持越来越好了，目前也比较稳定了 不像1.x extension 老是报 unconnect to server

接下来期待 oxlint 😁😁😁