前端工程化-格式化

React專案

Pre-commit Hook，在git commit之前進行程式碼格式化

為了防止一些不規範的程式碼 commit並push到遠端,我們可以在git命令執行前用一些鉤子來檢測並阻止。現在大前端主要有兩種git鉤子外掛：husky（jquery與next.js都在用），pre-commit(antd在用)。

1. 安裝 prettier prettier 文件

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

   • 在 .prettierrc.json

     中寫入

     {
       "singleQuote": true, // 單引號
       "semi": false, // 分號
       "tabWidth": 2, // 製表符寬度
       "useTabs": false, // 使用製表符
       "bracketSpacing": true, // 物件屬性新增 空格 { foo: 'aaa' }
       "arrowParens": "avoid",
       "printWidth": 200, // 程式碼換行長度
       "jsxBracketSameLine": true,
       "jsxSingleQuote": true
     }
     

   • 在 .prettierignore 中寫入

     # Ignore artifacts:
     build
     coverage
      
     

2. 安裝 Pre-commit Hook

   npx mrm lint-staged
   

   這時在package.json中會多出一些欄位

   "devDependencies": {
     "husky": ">=6",
     "lint-staged": ">=10",
     "prettier": "2.5.1"
   },
   "lint-staged": {
     "*.{js,css,md}": "prettier --write"
   }
   

   在lint-staged中另新增檔案型別ts,tsx,js,jsx： "*.{js,css,md,ts,tsx,js,jsx}": "prettier --write"

   npx mrm lint-staged不成功出現錯誤，可能是因為:

   • 沒有把prettier新增到 devDependencies： 重新安裝

   • node 版本太低，升級node版本

     n模組是專門用來管理nodejs的版本，

     • 安裝n模組：npm install -g n
     • 把當前系統的 Node 更新成最新的 “穩定版本”: n stable

3. 安裝 eslint-config-prettier

   npm i eslint-config-prettier --save-dev
   

   在package.json的eslintConfig規則中新增 prettier規則，放在後面，覆蓋一部分的eslint規則

   "eslintConfig": {  "extends": [    "react-app",    "react-app/jest"  ]}
   

   "eslintConfig": {  "extends": [    "react-app",    "react-app/jest",    "prettier"  ]}
   

commitlint： 規範化 commit message的內容

1. 安裝 commitlint： commitlint 文件

# Install and configure if needed
npm install --save-dev @commitlint/{cli,config-conventional}
# 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

# Active hooks
npx husky install
# or
yarn husky install

# Add hook
npx husky add .husky/commit-msg 'npx --no -- commitlint --edit $1'
# or
yarn husky add .husky/commit-msg 'yarn commitlint --edit $1'

commitlint規範：

commit message: feat: add login