@tangbin/fabric

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

Install

#npm
npm install @tangbin/fabric

#pnpm
pnpm add @tangbin/fabric

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

shamefully-hoist=true

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

Usage

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

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

npm run prettier

Commit Lint & Changelog

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

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

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 文件

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

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

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

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

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

# commit
git add .
npm run commit

# create changelog
npm run release