# fabric

**Repository Path**: tb211/fabric

## Basic Information

- **Project Name**: fabric
- **Description**: 提供统一的Prettier、Eslint和StyleLint规则以供使用。
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-08-23
- **Last Updated**: 2024-01-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# @tangbin/fabric

提供统一的 Prettier、Eslint、Babel 和 TypeScript 规则以供使用。

## Install

```shell
#npm
npm install @tangbin/fabric

#pnpm
pnpm add @tangbin/fabric
```

由于使用 pnpm 安装会导致一些 bin 目录下的命令无法执行，所以请在执行 `pnpm install` 之前，在根目录下创建 `.npmrc` 配置文件

```swift
shamefully-hoist=true
```

默认情况下，pnpm 创建一个半严格的 node_modules，这意味着依赖项可以访问未声明的依赖项，但 node_modules 之外的模块不行。 通过这种布局，生态系统中的大多数的包都可以正常工作。 但是，如果某些工具仅在提升的依赖项位于根目录的 node_modules 时才有效，您可以将其设置为 true 来为您提升它们。

## Usage

```shell
npx tb_fabric --init
# ? 请选择项目类型：（暂时只支持react、vue、util和node） react
# ? 是否需要创建 Editorconfig 配置文件？ Yes
# ? 是否需要创建 Prettier 配置文件？ Yes
# ? 是否需要创建 Typescript 配置文件？ Yes
# ? 是否需要创建 Babel 配置文件？ Yes
# ? 是否需要创建 Eslint 配置文件？ Yes
# ? 是否需要创建 Browserslist 配置文件？ Yes
# ? 是否需要创建 Commit Lint & Changelog 配置文件？ Yes

# 配置文件 .editorconfig 创建成功
# 配置文件 .prettierrc.js 创建成功
# 配置文件 .prettierignore 创建成功
# 配置文件 env.d.ts 创建成功
# 配置文件 tsconfig.json 创建成功
# 配置文件 babel.config.js 创建成功
# 配置文件 .eslintrc.js 创建成功
# 配置文件 .eslintignore 创建成功
# 配置文件 .browserslistrc 创建成功
# 配置文件 .cz-config.js 创建成功
# 配置文件 .versionrc.js 创建成功
# 配置文件 commitlint.config.js 创建成功
```

可以对生成的配置文件进行按需修改。

### Prettier

```shell
npm set-script prettier "prettier --write src"

npm run prettier
```

### Commit Lint & Changelog

要正常使用 commit lint 和 changelog 的功能，需要进行一些前置工作。

首先需要在 `package.json` 中设置 script，然后执行一系列命令：

```shell
npm set-script prepare "husky install"
npm set-script commit "cz"
npm set-script release "standard-version"

# install husky
npm run prepare

# add hooks
npx husky add .husky/pre-commit "npx lint-staged"
# 最后的 ${1} 可能无法正常生成，需要手动填充。。
npx husky add .husky/commit-msg  'npx --no -- commitlint --edit ${1}'
```

手动修改 `.husky/commit-msg` 文件

```sh
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npx --no -- commitlint --edit ${1}
```

在 `package.json` 文件中添加如下属性：

```json
{
  "config": {
    "commitizen": {
      "path": "node_modules/cz-customizable"
    }
  },
  "lint-staged": {
    "*.{ts,tsx}": "eslint",
    "*.{js,css,less,md,ts,tsx}": "prettier --write"
  }
}
```

最后可以使用如下命令提交代码和生成 changelog：

```shell
# commit
git add .
npm run commit

# create changelog
npm run release
```