前言

規(guī)范比業(yè)務(wù)開發(fā)搬磚更為重要，沒有一個(gè)好的編碼規(guī)范，維護(hù)老的代碼或者是編寫新的代碼都非常痛苦

Eslint與prettier

大大小小也做過了好幾個(gè)項(xiàng)目，每個(gè)項(xiàng)目都要做eslint校驗(yàn),所以我封裝了一個(gè)npm包以后直接安裝引入即可

yarn add osdoc-lint -D
yarn add prettier

• 新建.eslintrc.js

module.exports = {
  extends: [require.resolve('osdoc-lint/dist/eslint')],
  rules: {
    'react/require-default-props': 'off',// 也可以手動(dòng)覆蓋
  },
};

• 新建.prettierrc.js

const lint = require('osdoc-lint');
module.exports = {
  ...lint.prettier,
};

這樣省去了配置eslint規(guī)則都麻煩

git message校驗(yàn)

• 進(jìn)行pre-commit代碼規(guī)范檢測

yarn add husky lint-staged --dev

修改package.json

"lint-staged": {
  "components/**/*.ts?(x)": [
    "prettier --write",
    "eslint --fix",
    "git add"
  ],
},
"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
}

• 進(jìn)行 Commit Message 檢測

yarn add @commitlint/cli @commitlint/config-conventional commitizen cz-conventional-changelog --dev

新增.commitlintrc.js寫入以下內(nèi)容

module.exports = { extends: ['@commitlint/config-conventional'] };

修改package.json

"scripts": {
  "commit": "git-cz",
}

"husky": {
  "hooks": {
    "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
    "pre-commit": "lint-staged"
  }
},
"config": {
  "commitizen": {
    "path": "cz-conventional-changelog"
  }
}

后面提交代碼的時(shí)候使用yarn commit代替git commit

• 測試

image

選擇提交分類后回車進(jìn)行下一步

然后依次進(jìn)行下一步，如果有問題，會(huì)自動(dòng)排出。

image

這里有提示不符合規(guī)則的代碼，修復(fù)并重新提交即可

檢查完成之后會(huì)成功提交

image

到次，配置工作就完成了。

關(guān)于

• 本文首發(fā)于:讓你的git message更加規(guī)范
• 參考https://github.com/vuejs/vue