创建react项目并集成eslint/prettier/commit-lint

创建 react 项目

npx create-react-app jira-new --template typescript

如果不想使用 TS，而要用 JS 的话，则删除 —template typescript 后缀

添加 prettier

npm install --save-dev --save-exact prettier
echo {}> .prettierrc.json

兼容 eslint 规则

npm install --save-dev eslint-config-prettier

在 package.json 中添加如下语句：

{
	"extends": [
		"some-other-config-you-use",
		"prettier"
	]
}

添加 Git hooks

npx mrm lint-staged

如果运行失败，则运行下面语句，其实上面那句命令等价于下面四条命令

npm install --save-dev husky lint-staged
npx husky install
npm set-script prepare "husky install"
npx husky add .husky/pre-commit "npx lint-staged"

注意，windows 不能直接添加 pre-commit，需要分步执行

npx husky add .husky/pre-commit

然后在 .husky/pre-commit 文件中添加 npx lint-staged 命令

在 package.json 中添加 lint-staged 命令

"lint-staged": {
  "**/*": "prettier --write --ignore-unknown"
}

添加 commit-lint

commit-lint 的作用是规范化 git 提交，约束 git 提交时的语句

# Install commitlint cli and conventional config
npm install --save-dev @commitlint/{config-conventional,cli}
# For Windows:
npm install --save-dev @commitlint/config-conventional @commitlint/cli
# Configure commitlint to use conventional config
echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js

还是注意，在windows下面，最后一句输出的语句会被双引号包裹，需要手动从 commitlint.config.js 文件内容中删除

npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'

windows分步执行，mac无此问题