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