一、代碼格式化規(guī)范
目前項目中使用的 vetur 插件內(nèi)置有 prettier 格式化，也可以安裝 prettier code formatter 插件翩蘸，eslint 也包含部分代碼風(fēng)格檢查的功能，eslint 和 prettier 本身就有部分規(guī)則是沖突的，導(dǎo)致格式化混亂雌贱，所以必須統(tǒng)一代碼格式化規(guī)范
1、vscode 中的配置優(yōu)先級
- 默認配置文件（優(yōu)先級最低）
- 用戶配置文件（優(yōu)先級次之）
- 工程配置文件 （優(yōu)先級最高）
為了統(tǒng)一大家的代碼風(fēng)格偿短，統(tǒng)一使用項目中的配置文件作為配置項欣孤。由于 ESLint 的主要功能是代碼質(zhì)量檢查，Prettier 的主要功能是代碼風(fēng)格檢查翔冀，所以不要在 ESLint 中去配置代碼風(fēng)格相關(guān)的規(guī)則导街。
- prettier。 一個很流行的代碼格式化工具纤子，你很容易在編輯器找到實現(xiàn)它的各種插件搬瑰，這里用它在代碼提交前做代碼格式化款票。
- eslint。 代碼檢查工具泽论。eslint 也可以負責(zé)一部分代碼格式檢查的工作艾少，但是 prettier 已經(jīng)做的很好了，所以我便沒用 eslint 的代碼格式檢查翼悴，只讓其負責(zé)代碼錯誤檢查缚够。
2、解決配置沖突
npm i eslint-config-prettier eslint-plugin-prettier -D
eslint-config-prettier 關(guān)閉 Eslint 中與 Prettier 沖突的選項鹦赎，eslint-plugin-prettier 將 prettier 的規(guī)則設(shè)置為 eslint 的規(guī)則谍椅，對不符合規(guī)則的進行提示
3、prettierrc 配置文件說明
//.prettierrc.js
module.exports = {
printWidth: 160, //編輯器每行的長度古话，默認80
tabWidth: 4, //制表符tab的寬度雏吭，默認值是2
useTabs: false, //代碼縮進是否用制表符tab，默認false
semi: true, //是否使用分號陪踩，默認true杖们，使用分號
singleQuote: true, //是否使用單引號，默認為false
quoteProps: 'as-needed', //對象屬性的引號使用 as-needed 僅在需要的時候使用 consistent 有一個屬性需要引號肩狂，就都需要引號 preserve 保留用戶輸入的情況
jsxSingleQuote: false,
trailingComma: 'none', //末尾逗號 none 末尾沒有逗號 es5 es5有效的地方保留 all 在可能的地方都加上逗號
bracketSpacing: true, //字面量對象括號中的空格摘完，默認true true - Example: { foo: bar }. false - Example: {foo: bar}.
jsxBracketSameLine: false,
arrowParens: 'avoid', //箭頭函數(shù)中的括號always avoid
htmlWhitespaceSensitivity: 'ignore',
vueIndentScriptAndStyle: false,//是否給vue中的 <script> and <style>標(biāo)簽加縮進
endOfLine: 'auto', //行末尾標(biāo)識
eslintIntegration: true, //不讓prettier使用eslint的代碼格式進行校驗
}
4、eslint 配置文件說明
//.eslintrc.js
module.exports = {
root: true,
env: {
node: true
},
'extends': [
'plugin:vue/essential',
"plugin:prettier/recommended",
// '@vue/standard'
],
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
// 'vue/script-indent': ['error', 4, { 'baseIndent': 1 }],
// "quotes": [2, "single", { "avoidEscape": true }],
// 使用prettier來替換eslint的規(guī)則
"prettier/prettier": "error",
"no-var": 2,//禁用var傻谁，用let和const代替
"no-unused-vars": [2, { "args": "none" }], //消除未使用的變量 不檢查函數(shù)的參數(shù)
"no-redeclare": 2, //禁止多次聲明同一變量
"no-dupe-keys": 2,//在創(chuàng)建對象字面量時不允許鍵重復(fù)
'eqeqeq': ['error', 'always', { null: 'ignore' }], // 強制使用全等
},
parserOptions: {
parser: 'babel-eslint',
"ecmaVersion": 6,
"sourceType": "module"
}
}
二孝治、代碼提交規(guī)范
1、安裝 husky 和 lint-stage
//husky新版本配置方法完全不一樣审磁，這里鎖定版本號
npm i husky@4.2.5 lint-stage -D
Husky 能夠阻止不規(guī)范的代碼提交和推送荆秦，確保本地的代碼已經(jīng)通過檢查才能 push 到遠程。
lint-stage 的作用是只對當(dāng)前修改后的文件進行掃描力图，即進行 git add 加入到 stage 區(qū)的文件進行掃描即可步绸，完成對增量代碼進行檢查
2、配置 commitlint 提交規(guī)則
npm i @commitlint/cli @commitlint/config-conventional -D
//commitlint.config.js
// https://commitlint.js.org/#/
module.exports = {
extends: [
"@commitlint/config-conventional"
],
rules: {
// 'name:[level, 'always', 72]'吃媒，level可選0, 1, 2瓤介，0為disable，1為warning赘那，2為error刑桑，第二位為應(yīng)用與否，可選always| never募舟，第三位該rule的值
// update: 更新某功能(不是feat, 不是fix)
// feat: 新增功能(feature)
// fix: bug 修復(fù)
// style: 樣式調(diào)整
// merge：分支合并
// revert：回滾某個更早之前的提交
// build：主要目的是修改項目構(gòu)建系統(tǒng)(例如 glup祠斧，webpack，rollup 的配置等)的提交
// ci：主要目的是修改項目繼續(xù)集成流程(例如 Travis拱礁，Jenkins琢锋，GitLab CI辕漂，Circle等)的提交
// docs：文檔更新
// perf：性能, 體驗優(yōu)化
// refactor：重構(gòu)代碼(既沒有新增功能，也沒有修復(fù) bug)
// test：新增測試用例或是更新現(xiàn)有測試
// chore：不屬于以上類型的其他類型
'type-enum': [2, 'always', ['update', 'feat', 'fix', 'style', 'merge', 'revert', 'build', 'ci', 'docs', 'perf', 'refactor', 'test', 'chore']],
'type-case': [0], //type小寫
'type-empty': [0], //type不為為空
'scope-empty': [0],
'scope-case': [0],
'subject-full-stop': [0, 'never'],
'subject-case': [0, 'never'],
'header-max-length': [0, 'always', 72]
}
};
3吴超、配置 package.json 文件
{
"name": "name",
"version": "0.1.0",
"description": "description",
"author": "author",
"private": true,
"scripts": {
"dev": "vue-cli-service serve",
"build": "vue-cli-service build"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged",
"commit-msg": "commitlint -e $HUSKY_GIT_PARAMS"
}
},
"lint-staged": {
"src/**/*.{js,jsx,vue,json,css,less,scss,sass}": [
"prettier --write",
"eslint --fix",
"git add"
]
},
"dependencies": {
"axios": "^0.19.0",
"core-js": "^2.6.5",
"element-ui": "^2.12.0",
"md5": "^2.2.1",
"vue": "^2.6.10",
"vue-router": "^3.0.3",
"vuex": "^3.0.1"
},
"devDependencies": {
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
"@commitlint/cli": "^12.1.4",
"@commitlint/config-conventional": "^12.1.4",
"@vue/cli-plugin-babel": "^3.5.0",
"@vue/cli-plugin-eslint": "^3.5.0",
"@vue/cli-plugin-unit-mocha": "^3.5.0",
"@vue/cli-service": "^3.5.3",
"@vue/eslint-config-standard": "^4.0.0",
"@vue/test-utils": "1.0.0-beta.29",
"babel-eslint": "^10.0.1",
"babel-plugin-component": "^1.1.1",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"compression-webpack-plugin": "^2.0.0",
"eslint": "^5.8.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^3.4.0",
"eslint-plugin-vue": "^5.0.0",
"husky": "^4.2.5",
"lint-staged": "^11.0.0",
"node-sass": "^4.9.0",
"sass-loader": "^7.1.0",
"uglifyjs-webpack-plugin": "^2.1.2",
"vue-template-compiler": "^2.5.21"
}
}
4钉嘹、提交代碼
husky 會在你提交前，調(diào)用 pre-commit 鉤子鲸阻，執(zhí)行 lint-staged跋涣，如果代碼不符合 prettier 配置的規(guī)則，會進行格式化鸟悴；然后再用 eslint 的規(guī)則進行檢查陈辱，如果有不符合規(guī)則且無法自動修復(fù)的，就會停止此次提交细诸。如果都通過了就會講代碼添加到 stage性置，然后 commit。
git add .
git commit -m "feat: commit內(nèi)容"
git push
本文由博客一文多發(fā)平臺 OpenWrite 發(fā)布揍堰！
