@blueking/bkui-lint

蓝鲸前端通用代码质量检查工具集，提供 ESLint、Prettier、Stylelint、Biome 等工具的标准化配置

✨ 特性

• 🚀 开箱即用 - 预配置的 ESLint、Prettier、Stylelint、Biome 规则
• 🎯 Vue 3 支持 - 针对 Vue 3 项目优化的代码检查规则
• 📦 TypeScript 支持 - 完整的 TypeScript 类型检查配置
• 🎨 代码格式化 - 统一的代码风格和格式化规则
• 🔧 Git Hooks - 集成 pre-commit 和 commit-msg 钩子
• 📝 提交规范 - 标准化的 commit message 格式检查
• ⚡ 性能优化 - 基于 Biome 的高性能代码检查

📦 安装

# 使用 npm
npm install --save-dev @blueking/bkui-lint

# 使用 yarn
yarn add -D @blueking/bkui-lint

# 使用 pnpm
pnpm add -D @blueking/bkui-lint

🚀 快速开始

1. 配置 ESLint

创建 eslint.config.mjs 文件：

import bkuiLint from '@blueking/bkui-lint/eslint.mjs';

export default bkuiLint;

2. 配置 Prettier

创建 prettier.config.mjs 文件：

import prettierConfig from '@blueking/bkui-lint/prettier.mjs';

export default prettierConfig;

3. 配置 Stylelint

创建 stylelint.config.mjs 文件：

import stylelintConfig from '@blueking/bkui-lint/stylelint.mjs';

export default stylelintConfig;

4. 配置 Biome

创建 biome.json 文件：

{
  "extends": ["@blueking/bkui-lint/bk-biome.json"],
  "root": true
}

5. 配置 Git Hooks

首次使用时执行：

npx simple-git-hooks

在 package.json 中添加：

{
  "simple-git-hooks": {
    "pre-commit": "npx lint-staged --concurrent false",
    "commit-msg": "node ./node_modules/@blueking/bkui-lint/verifiy-commit.mjs $1"
  }
}

6. 配置 lint-staged

创建 .lintstagedrc.mjs 文件：

import lintStagedConfig from '@blueking/bkui-lint/.lintstagedrc.mjs';

export default lintStagedConfig;

📋 包含的工具

ESLint 配置

• 基础规则: 基于 @eslint/js 推荐配置
• TypeScript 支持: 使用 typescript-eslint 提供完整的 TS 支持
• Vue 3 支持: 集成 eslint-plugin-vue 的 Vue 3 推荐规则
• 代码风格: 集成 eslint-plugin-prettier 和 eslint-config-prettier
• 代码质量: 集成腾讯代码规范 eslint-config-tencent
• 代码排序: 使用 eslint-plugin-perfectionist 自动排序导入、属性等
• 自定义规则: 包含针对蓝鲸项目的自定义 ESLint 规则

Prettier 配置

• 代码格式化: 统一的代码风格配置
• Vue 支持: 针对 Vue 文件的特殊格式化规则
• TypeScript 支持: 完整的 TS/TSX 文件格式化

Stylelint 配置

• CSS/SCSS 支持: 基于 stylelint-config-standard-scss
• Vue 样式支持: 支持 Vue 单文件组件中的样式检查
• Less 支持: 支持 Less 预处理器
• 代码排序: 使用 stylelint-config-recess-order 进行属性排序

Biome 配置

• 高性能检查: 基于 Rust 的高性能代码检查
• 代码格式化: 快速的代码格式化功能
• TypeScript 支持: 完整的 TS 类型检查
• 导入排序: 自动整理和排序导入语句

🔧 高级配置

自定义 ESLint 规则

import bkuiLint from '@blueking/bkui-lint/eslint.mjs';

export default [
  ...bkuiLint,
  {
    rules: {
      // 你的自定义规则
      'no-console': 'warn',
    },
  },
];

自定义 Prettier 配置

import prettierConfig from '@blueking/bkui-lint/prettier.mjs';

export default {
  ...prettierConfig,
  // 你的自定义配置
  printWidth: 100,
};

自定义 Stylelint 配置

import stylelintConfig from '@blueking/bkui-lint/stylelint.mjs';

export default {
  ...stylelintConfig,
  rules: {
    ...stylelintConfig.rules,
    // 你的自定义规则
    'selector-max-id': 2,
  },
};

📝 提交规范

本工具集包含标准的 commit message 格式检查，支持以下格式：

新格式（推荐）

feat: 添加新功能
fix: 修复 bug
docs: 文档更新
style: 代码格式调整
refactor: 代码重构
perf: 性能优化
test: 测试相关
chore: 构建过程或辅助工具的变动

旧格式（兼容）

feature: 新特性
bugfix: 线上功能bug
minor: 不重要的修改
optimization: 功能优化
sprintfix: 未上线代码修改
merge: 分支合并及冲突解决

🛠️ 脚本命令

在 package.json 中添加以下脚本：

{
  "scripts": {
    "lint": "eslint . --ext .js,.ts,.vue",
    "lint:fix": "eslint . --ext .js,.ts,.vue --fix",
    "format": "prettier --write .",
    "stylelint": "stylelint \"src/**/*.{css,scss,vue}\"",
    "stylelint:fix": "stylelint \"src/**/*.{css,scss,vue}\" --fix",
    "biome:check": "biome check .",
    "biome:format": "biome format --write .",
    "prepare": "simple-git-hooks"
  }
}