創建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無此問題