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

• 2021 年 6 月 24 日
• 筆記
• eslint, React

创建 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无此问题