前端工程化最佳實踐

一、代碼格式化規范

目前項目中使用的 vetur 插件內置有 prettier 格式化，也可以安裝 prettier code formatter 插件，eslint 也包含部分代碼風格檢查的功能，eslint 和 prettier 本身就有部分規則是沖突的，導致格式化混亂，所以必須統一代碼格式化規范

1、vscode 中的配置優先級

• 默認配置文件（優先級最低）
• 用戶配置文件（優先級次之）
• 工程配置文件 （優先級最高）

為了統一大家的代碼風格，統一使用項目中的配置文件作為配置項。由於 ESLint 的主要功能是代碼質量檢查，Prettier 的主要功能是代碼風格檢查，所以不要在 ESLint 中去配置代碼風格相關的規則。

• prettier。 一個很流行的代碼格式化工具，你很容易在編輯器找到實現它的各種插件，這里用它在代碼提交前做代碼格式化。
• eslint。 代碼檢查工具。eslint 也可以負責一部分代碼格式檢查的工作，但是 prettier 已經做的很好了，所以我便沒用 eslint 的代碼格式檢查，只讓其負責代碼錯誤檢查。

2、解決配置沖突

npm i eslint-config-prettier  eslint-plugin-prettier -D

eslint-config-prettier 關閉 Eslint 中與 Prettier 沖突的選項，eslint-plugin-prettier 將 prettier 的規則設置為 eslint 的規則，對不符合規則的進行提示

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', //箭頭函數中的括號always avoid
    htmlWhitespaceSensitivity: 'ignore',
    vueIndentScriptAndStyle: false,//是否給vue中的 <script> and <style>標簽加縮進
    endOfLine: 'auto', //行末尾標識
    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的規則
        "prettier/prettier": "error",
        "no-var": 2,//禁用var，用let和const代替
        "no-unused-vars": [2, { "args": "none" }],  //消除未使用的變量  不檢查函數的參數
        "no-redeclare": 2, //禁止多次聲明同一變量
        "no-dupe-keys": 2,//在創建對象字面量時不允許鍵重復
        'eqeqeq': ['error', 'always', { null: 'ignore' }], // 強制使用全等
    },
    parserOptions: {
        parser: 'babel-eslint',
        "ecmaVersion": 6,
        "sourceType": "module"
    }
}

二、代碼提交規范

1、安裝 husky 和 lint-stage

//husky新版本配置方法完全不一樣，這里鎖定版本號
npm i husky@4.2.5 lint-stage -D

Husky 能夠阻止不規范的代碼提交和推送，確保本地的代碼已經通過檢查才能 push 到遠程。

lint-stage 的作用是只對當前修改后的文件進行掃描，即進行 git add 加入到 stage 區的文件進行掃描即可，完成對增量代碼進行檢查

2、配置 commitlint 提交規則

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，第二位為應用與否，可選always| never，第三位該rule的值
        // update: 更新某功能(不是feat, 不是fix)
        // feat: 新增功能(feature)
        // fix: bug 修復
        // style: 樣式調整
        // merge：分支合並
        // revert：回滾某個更早之前的提交

        // build：主要目的是修改項目構建系統(例如 glup，webpack，rollup 的配置等)的提交
        // ci：主要目的是修改項目繼續集成流程(例如 Travis，Jenkins，GitLab CI，Circle等)的提交
        // docs：文檔更新
        // perf：性能, 體驗優化
        // refactor：重構代碼(既沒有新增功能，也沒有修復 bug)
        // test：新增測試用例或是更新現有測試
        // 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 會在你提交前，調用 pre-commit 鈎子，執行 lint-staged，如果代碼不符合 prettier 配置的規則，會進行格式化；然后再用 eslint 的規則進行檢查，如果有不符合規則且無法自動修復的，就會停止此次提交。如果都通過了就會講代碼添加到 stage，然后 commit。

git add .
git commit -m "feat: commit內容"
git push