Knowledge

QiShunwang

知识分享

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

2021/6/24 22:16:13    来源:

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

文章引用:http://www.qishunwang.net/knowledge_show_194209.aspx