windows 从零搭建简单的工作流

windows 从零搭建工作流项目

以下命令建议在 git-bash 中执行。

创建项目

# mkdir [projectName]
mkdir pro-test && cd pro-test

项目初始化

git

# 初始化Git仓库
git init
# 创建 .gitignore，编辑该文件例如node_modules dist等目录
touch .gitignore
# git remote add ... 和远程仓库建立连接
# git pull 拉取最新代码

package.json

# pnpm初始化，npm和yarn基本一样
pnpm init
# 如果项目是 monorepo，创建并编辑如下文件
# touch pnpm-workspace.yaml
# monorepo下的所有命令需要添加 -w，除非是在内部运行

tsconfig.json

如果项目使用 typescript

# 安装 typescript
pnpm add -D typescript
# 初始化 tsconfig.json，并根据需要修改
pnpm tsc --init

prettier

安装 prettier 用于格式化

# 安装 prettier
pnpm add -D prettier
# 创建 prettier.config.js，需要将 prettier 的配置项用 module.exports 导出
touch prettier.config.js

eslint

安装 eslint 用于检查语法

# 安装 eslint
pnpm add -D eslint
# 可以手动创建 .eslintrc.js或者使用命令自动初始化
# 手动创建并配置
touch .eslintrc.js
# 自动创建并初始化，按照选项根据需要选择，这里不要在 git-bash 中运行
pnpm eslint --init

lint-staged 配合 husky

pnpm add -D lint-staged husky

// 修改package.json
{
  "lint-staged": {
    "*.js?(x)": [
      "eslint",
      "prettier --write"
    ],
    "*.ts?(x)": [
      "eslint",
      "prettier --parser=typescript --write"
    ]
  }
}

配置 husky，建议查看官方文档

# 配置 husky
# 手动配置
npm set-script prepare "husky install"
pnpm run prepare
# 创建 git 钩子 pre-commit，提交本地仓库之前的检查
npx husky add .husky/pre-commit "pnpm lint-staged"
# 或者
npx husky add .husky/pre-commit "npx --no-install lint-staged"
# 创建 git 钩子 commit-msg，检查提交时提供的信息，可以被跳过
npx husky add .husky/commit-msg "node scripts/verifyCommitMsg.js"
# 更多钩子可以查看 .git/hooks/ 目录下

// 根据 scripts/verifyCommitMsg.js 创建文件
// 安装 @types/node 提供 node 环境的提示
// 安装 chalk 打印特色文字提示
// pnpm add -D @types/node chalk
const path = require("path");
const chalk = require("chalk");
const msgPath = path.resolve(__dirname, "../.git/COMMIT_EDITMSG");
const msg = require("fs").readFileSync(msgPath, "utf-8").trim();

const commitRE =
  /^(revert: )?(feat|fix|docs|dx|style|refactor|perf|test|workflow|build|ci|chore|types|wip|release)(\(.+\))?: .{1,50}/;

if (!commitRE.test(msg)) {
  console.log();
  console.error(
    `  ${chalk.bgRed.white(" ERROR ")} ${chalk.red(
      `invalid commit message format.`
    )}\n\n`
  );
  process.exit(1);
} 

这样每次 commit 的时候就会触发 eslint 检查语法，然后调用 prettier 格式化。如果想要格式化或者校验更多文件类型，就可以在 lint-staged 选项中添加。比如针对 .css, .scss, .md 可以使用 stylelint 格式化。