# react-ui

**Repository Path**: zhangyaowl/react-ui

## Basic Information

- **Project Name**: react-ui
- **Description**: react-ui 组件库
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-04-15
- **Last Updated**: 2025-04-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### monorepo

#### 新建 pnpm-workspace.yaml

- 配置子项目

```yaml
packages:
  - packages/*
```

#### 规范化设计

- js
  - eslint9
  - prettier
- css
  - stylelint
- git
  - commitlint
  - husky
- 拼写检查

##### eslint

- vscode 安装 `eslint 插件`
- 依赖安装

```shell
# --workspace-root 或者 -w 表示在跟项目安装依赖
pnpm install eslint@9.6.0 -D -w
```

- 新建 eslint.config.mjs
  >

```js
// eslint.config.mjs （必须用 .mjs 或 package.json 设置 "type": "module"）

export default [
  {
    rules: {
      semi: 'error',
      'prefer-const': 'error'
    }
  }
]
```

- 安装 typescript 依赖，@eslint/js 插件官方推荐配置集

```shell
pnpm install -D -w @eslint/js typescript typescript-eslint
```

- 安装 vscode Prettier 插件， 添加 .prettierrc 配置文件

```shell
pnpm install -D prettier -w
```

```json
{
  "arrowParens": "avoid",
  "endOfLine": "lf",
  "printWidth": 140,
  "trailingComma": "none",
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true
}
```

- vscode 配置修改 format on save，项目下添加 .vscode/settings.json 配置

```json
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.tabSize": 2
}
```

- 最终 eslint.config.mjs 配置

```js
// eslint.config.mjs （必须用 .mjs 或 package.json 设置 "type": "module"）
import js from '@eslint/js'
import tseslint from 'typescript-eslint'

export default tseslint.config({
  extends: [js.configs.recommended, ...tseslint.configs.recommended],
  files: ['**/*.{js,ts,tsx}'],
  ignores: ['apps/**/*/{tmp,.dumi}/**/*', '*.js', '**/*/build/**/*', '**/*/es/**/*', '**/*/dist/**/*'],
  // 自定义规则
  rules: {},
  // 语言选项
  languageOptions: {
    // 转换器
    parser: tseslint.parser,
    // 转换选项
    parserOptions: {
      // ts项目 tsconfig 文件位置
      project: [],
      // ts配置跟目录
      tsconfigRootDir: import.meta.dirname
    }
  }
})
```

#### cSpell

- 拼写检查, vscode 插件安装 Code Spell Checker，新建 .cspell/custom-words.txt 文件，将不符合规范的自动加到 txt 文件中

```
pnpm install -D -w cspell
```

```json
// 新建 cspell.json
{
  "import": ["@cspell/dict-lorem-ipsum/cspell-ext.json"],
  "caseSensitive": false,
  "dictionaries": ["custom-words"],
  "dictionaryDefinitions": [
    {
      "name": "custom-words",
      "path": "./.cspell/custom-words.txt",
      "addWords": true
    }
  ],
  "files": ["**/*.{js,jsx,ts,tsx,md}"],
  "ignorePaths": [
    "**/node_modules/**",
    "**/dist/**",
    "**/lib/**",
    "**/docs/**",
    "**/stats.html",
    "**/language/**",
    "**/language.ts",
    "**/package.json",
    "eslint.config.js"
  ]
}
```

- 最终 .vscode/settings.json 配置

```json
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.tabSize": 2,
  "cSpell.enabled": true,
  "cSpell.files": ["*"],
  "cSpell.fixSpellingWithRenameProvider": true,
  "cSpell.enabledFileTypes": {
    "*": true,
    "json": true,
    "typescript": true,
    "javascript": true,
    "markdown": true
  },
  "cSpell.customDictionaries": {}
}
```

- 安装 vscode Error Lens 插件

#### stylelint

- 依赖安装

```shell
pnpm install -D stylelint stylelint-config-standard-scss -w
```

- 新建配置文件 stylelint.config.mjs

```js
/** @type {import('stylelint').Config} */
export default {
  extends: ['stylelint-config-standard-scss']
}
```

#### git 提交规范

- git init 新建 .gitignore

```
node_modules
.DS_Store
**/build
**/dist
**/es

# dumi
**/.dumi
**/tmp
**/docs-dist

.turbo

.cspellcache

pnpm-lock.yaml
yarn.lock

node_modules/
```

- husky 安装

```shell
pnpm install -D husky -w
# 初始化
npx husky init
```

- package.json 添加 lint 组合各个 lint 命令，修改 .husky/pre-commit

```shell
pnpm lint
```

#### commitlint

- commitlint 安装

```shell
pnpm install -D @commitlint/{config-conventional,cli} commitizen cz-git -w
```

- package.json 添加配置, 添加 script commit 命令

```json
"config": {
  "commitizen": {
    "path": "node_modules/cz-git"
  }
}
```

```json
"commit": "git-cz"
```

- 新建 commitlint.config.js 从 cz-git 官网复制到配置文件(选择 Emoji 模板)

```js
/** @type {import('cz-git').UserConfig} */
module.exports = {
  extends: ['@commitlint/config-conventional'], // extends can be nested
  parserPreset: 'conventional-changelog-conventionalcommits',
  prompt: {
    settings: {},
    messages: {
      skip: ':skip',
      max: 'upper %d chars',
      min: '%d chars at least',
      emptyWarning: 'can not be empty',
      upperLimitWarning: 'over limit',
      lowerLimitWarning: 'below limit'
    },
    types: [
      { value: 'feat', name: 'feat:     ✨  A new feature', emoji: '✨ ' },
      { value: 'fix', name: 'fix:      🐛  A bug fix', emoji: '🐛 ' },
      { value: 'docs', name: 'docs:     📝  Documentation only changes', emoji: '📝 ' },
      {
        value: 'style',
        name: 'style:    💄  Changes that do not affect the meaning of the code',
        emoji: '💄 '
      },
      {
        value: 'refactor',
        name: 'refactor: 📦️   A code change that neither fixes a bug nor adds a feature',
        emoji: '📦️ '
      },
      {
        value: 'perf',
        name: 'perf:     🚀  A code change that improves performance',
        emoji: '🚀 '
      },
      {
        value: 'test',
        name: 'test:     🚨  Adding missing tests or correcting existing tests',
        emoji: '🚨 '
      },
      {
        value: 'build',
        name: 'build:    🛠   Changes that affect the build system or external dependencies',
        emoji: '🛠 '
      },
      {
        value: 'ci',
        name: 'ci:       🎡  Changes to our CI configuration files and scripts',
        emoji: '🎡 '
      },
      {
        value: 'chore',
        name: "chore:    🔨  Other changes that don't modify src or test files",
        emoji: '🔨 '
      },
      { value: 'revert', name: 'revert:   ⏪️  Reverts a previous commit', emoji: ':rewind:' }
    ],
    useEmoji: true,
    confirmColorize: true,
    emojiAlign: 'center',
    questions: {
      scope: {
        description: 'What is the scope of this change (e.g. component or file name)'
      },
      subject: {
        description: 'Write a short, imperative tense description of the change'
      },
      body: {
        description: 'Provide a longer description of the change'
      },
      isBreaking: {
        description: 'Are there any breaking changes?'
      },
      breakingBody: {
        description: 'A BREAKING CHANGE commit requires a body. Please enter a longer description of the commit itself'
      },
      breaking: {
        description: 'Describe the breaking changes'
      },
      isIssueAffected: {
        description: 'Does this change affect any open issues?'
      },
      issuesBody: {
        description: 'If issues are closed, the commit requires a body. Please enter a longer description of the commit itself'
      },
      issues: {
        description: 'Add issue references (e.g. "fix #123", "re #123".)'
      }
    }
  }
}
```

- husky/commit-msg

```shell
# 使用 commitlint 校验后面的 $1
npx commitlint --edit $1
```

#### lint-staged

- 安装

```shell
pnpm install -D lint-staged -w
```

- package.json 添加 lint-staged 配置

```json
"lint-staged": {
  "*.{md,json}": [
    "prettier --cache --write --no-error-on-unmatched-pattern"
  ],
  "*.{css,scss,less}": [
    "stylelint --fix",
    "prettier --cache --write"
  ],
  "*.{js,jsx}": [
    "eslint --fix",
    "prettier --cache --write"
  ],
  "*.{ts,tsx}": [
    "eslint --fix",
    "prettier --cache --parser=typescript --write"
  ]
},
```

- 修改 pre-commit

```shell
# lint-staged 只检测缓存区的代码
pnpm lint:cspell && npx lint-staged
```