前端團隊開發時，是必須要有一個統一的前端規範的，用一套統一的規範來規範開發者，可以有效的避免在提交和拉取程式碼時造成的程式碼錯亂問題，這邊文章主要講下我們團隊的程式碼規範使用，eslint結合vscode儲存時自動修復不規範程式碼，githooks提交程式碼時的eslint校驗和資訊規範。

新增eslint

vue-cli3構建一個新專案(包含eslint模組),完成後新增 .eslintrc.js 配置如下:

module.exports = {
 root: true,parserOptions: {
 parser: 'babel-eslint',sourceType: 'module'
 },env: {
 browser: true
 },// https://github.com/standard/standard/blob/master/docs/RULES-en.md
 extends: [
 'plugin:vue/base'
 ],// required to lint *.vue files
 plugins: [
 'vue'
 ],// add your custom rules here
 'rules': {
 // allow paren-less arrow functions
 'indent': [2,2],// 兩個空格的縮排
 'quotes': [2,'single'],// js必須使用單引號
 'linebreak-style': [2,'unix'],// 換行風格 unix/windows
 'semi': [2,'never'],// 語句強制分號結尾
 // 'no-console': [1],// 不允許console語句
 'no-unused-vars': [1],// 聲明瞭變數但是沒有使用檢測
 'space-unary-ops': [1,{ 'words': true,'nonwords': false }],// 一元運算子的前/後要不要加空格
 'brace-style': [2,'1tbs',{ 'allowSingleLine': false }],// 大括號風格
 'comma-spacing': [2,{ 'before': false,'after': true }],// 逗號後有空格，前沒有空格
 'comma-style': [2,'last'],// 逗號跟在結尾
 'key-spacing': [2,{ 'beforeColon': false,'afterColon': true }],// 物件字面量中冒號的前後空格
 'lines-around-comment': [ // 行前/行後備注
  2,{
  'beforeBlockComment': false,// 段註釋的前後
  'beforeLineComment': false,// 行註釋的前面
  'afterBlockComment': false,// 塊註釋的後面
  'afterLineComment': false,// 行註釋的後面
  'allowBlockStart': true,'allowObjectStart': true,'allowArrayStart': true
  }],'max-depth': [2,4],// 程式碼最多允許4層巢狀
 'max-len': [1,1000,'max-nested-callbacks': [2,3],// 回撥巢狀深度
 'max-params': [2,5],// 函式最多隻能有5個引數
 'max-statements': [1,80],// 單個函式最多80條語句
 'no-array-constructor': [2],// 禁止使用陣列構造器
 'no-lonely-if': 2,// // 禁止else語句內只有if語句
 'no-multiple-empty-lines': [2,{ 'max': 3,'maxEOF': 1 }],// 空行最多不能超過2行
 'no-nested-ternary': 2,// 不使用巢狀的三元表示式
 'no-spaced-func': 2,// 函式呼叫時 函式名與()之間不能有空格
 'no-trailing-spaces': 2,// 一行結束後面不要有空格
 'no-unneeded-ternary': 2,// 禁止不必要的巢狀 var isYes = answer === 1 ? true : false;簡單的判斷用三元表示式代替
 'object-curly-spacing': [2,'always',{ // 大括號內是否允許不必要的空格 always始終允許；never始終不允許
  'objectsInObjects': false,'arraysInObjects': false
 }],'arrow-spacing': 2,// =>的前/後括號
 'block-scoped-var': 2,// 塊語句中使用var
 'no-dupe-class-members': 2,// 'no-var': 1,// 禁用var，用let和const代替
 'object-shorthand': [1,'always'],// 強制物件字面量縮寫語法
 'array-bracket-spacing': [2,// 是否允許非空數組裡面有多餘的空格
 'operator-linebreak': [2,'after'],// 換行時運算子在行尾還是行首
 // 'semi-spacing': [2,'after': false }],// 分號前後空格
 'keyword-spacing': ['error'],'space-before-blocks': 2,// 不以新行開始的塊{前面要不要有空格
 'block-spacing': [2,'space-before-function-paren': [2,// 函式定義時括號前面要不要有空格
 'space-in-parens': [2,// 小括號裡面要不要有空格
 'spaced-comment': [1,{
  'exceptions': ['-','*','+']
  }],// 註釋風格要不要有空格什麼的
 'arrow-parens': 0,// allow async-await
 'generator-star-spacing': 0,// allow debugger during development
 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
 },globals: {
 '$': false,'jquery': false,'ActiveXObject': false,'arbor': true,'layer': false
 }
}

執行 npm run lint 會給出報錯，執行 npm run serve 也會對專案進行eslint校驗，無法通過校驗就會報錯

可以結合vscode的eslint外掛快速修復無法通過驗證的程式碼，首先下載外掛，然後更改setting.json配置檔案，具體如下:

"eslint.validate": [
 "javascript","javascriptreact","vue-html"
],"eslint.run": "onSave","editor.codeActionsOnSave": {
 "source.fixAll.eslint": true
}

配置完成之後重啟vscode，在編輯程式碼的時候如果未符合eslint的校驗，儲存時會自動修復程式碼。

新增git hooks

前端團隊開發中如果沒有做正確的校驗就提交了程式碼，拉取程式碼時會導致很多地方爆紅不符合定製的開發規範，因此可以在提交程式碼時做些限制.在 git 提交程式碼時，會觸發一些列的鉤子函式，可以通過 husky 這個git hooks的工具來進行程式碼提交校驗,需要先安裝依賴包 cnpm i -D husky lint-staged @commitlint/config-conventional @commitlint/cli .然後在package.json中新增如下程式碼:

// package.json
"husky": {
 "hooks": {
 "pre-commit": "lint-staged",// 在pre-commit階段執行下面配置的校驗功能
 "commit-msg": "commitlint -E HUSKY_GIT_PARAMS" // 這個是規範提交的資訊的，結合commitlint.config.js使用
 }
},"lint-staged": {
 "src/**/*.{js,vue}": [
 "npm run lint","git add ."
 ]
}

// commitlint.config.js
// 參考的官方配置，提交的資訊必須按照下面規範書寫，類似`git commit -m 'feat: 新增eslint'`
module.exports = {
 parserPreset: 'conventional-changelog-conventionalcommits',rules: {
 'body-leading-blank': [1,'body-max-line-length': [2,100],'footer-leading-blank': [1,'footer-max-line-length': [2,'header-max-length': [2,'scope-case': [2,'lower-case'],'subject-case': [
  2,'never',['sentence-case','start-case','pascal-case','upper-case']
 ],'subject-empty': [2,'subject-full-stop': [2,'.'],'type-case': [2,'type-empty': [2,'type-enum': [
  2,[
  'build','chore','ci','docs','feat','fix','perf','refactor','revert','style','test'
  ]
 ]
 }
}

接下來修改檔案提交程式碼，最後commit的時候就會對已修改檔案進行校驗，如果eslint校驗不通過，或者commit資訊不符合規範都是不能提交程式碼的，以上步驟已經可以很好的改善程式碼和提交資訊規範，這對於團隊專案開發能夠很大對提高程式碼質量。

總結

到此這篇關於使用eslint和githooks統一前端風格的技巧的文章就介紹到這了,更多相關eslint和githooks統一前端風格內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！