回顧兩年前整理的前端規範

規範類的制定我指望是惟一的...

包括eslint，就不要玩什麼自定義了，統一standard

包括編輯器，就不要sublime、webstorm、 IDEA了，統一vscode

包括editor，就不要說4個空格縮進了，統一縮進2個space

包括mock，由於公司並未使用 Swagger，而後我就不要express router、easyMock了，統一mockjs

...

乾貨吧，話很少說

首先是編輯器vscode

對於vscode，要求安裝如下插件（很少介紹，有興趣的自行baidu/google）：

一、editorConfig

root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

複製代碼

二、fileheader

​

"fileheader.Author": "FE.Bolin",
"fileheader.LastModifiedBy": "FE.Bolin",
"fileheader.tpl": "/*\r\n * @Author: {author} \r\n * @Date: {createTime} \r\n * @Last Modified by: {lastModifiedBy} \r\n * @Last Modified time: {updateTime} \r\n */\r\n"
複製代碼

三、eslint

讀取項目中.eslinttrc.js文件，也能夠引用一個全局的

"eslint.autoFixOnSave": true,
"eslint.options": {
  "configFile": ".eslintrc.js"
},
"eslint.validate": [
  "javascript",
  "javascriptreact", {
    "language": "html",
    "autoFix": true
  },
  {
    "language": "vue",
    "autoFix": true
  }
]
複製代碼

四、Git Lens

五、Git History

---

提供一份我本身的vscode配置：

{
  "files.exclude": {
    "**/.git": true,
    "**/.svn": true,
    "**/.hg": true,
    "**/CVS": true,
    "**/.DS_Store": true,
    "**/tmp": true,
    "**/node_modules": true,
    "**/bower_components": true,
    "**/dist": true,
    "**/dist_dev": true,
    "**/dist_test": true,
    "**/dist_pre": true,
    "**/dist_cloud": true,
    "**/.history": true
  },
  "files.watcherExclude": {
    "**/.git/objects/**": true,
    "**/.git/subtree-cache/**": true,
    "**/node_modules/**": true,
    "**/tmp/**": true,
    "**/bower_components/**": true,
    "**/dist/**": true,
    "**/dist_dev/**": true,
    "**/dist_test/**": true,
    "**/dist_pre/**": true,
    "**/dist_cloud/**": true
  },
  "files.trimTrailingWhitespace": true,
  "git.enableSmartCommit": true,
  "fileheader.Author": "FE.Bolin",
  "fileheader.LastModifiedBy": "FE.Bolin",
  "fileheader.tpl": "/*\r\n * @Author: {author} \r\n * @Date: {createTime} \r\n * @Last Modified by: {lastModifiedBy} \r\n * @Last Modified time: {updateTime} \r\n */\r\n",
  "vetur.format.defaultFormatter.html": "prettier",
  "eslint.options": {
    "configFile": ".eslintrc.js"
  },
  "eslint.autoFixOnSave": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  "guides.normal.color.dark": "rgba(91, 91, 91, 0.6)",
  "guides.normal.color.light": "rgba(220, 220, 220, 0.7)",
  "guides.active.color.dark": "rgba(210, 110, 210, 0.6)",
  "guides.active.color.light": "rgba(200, 100, 100, 0.7)",
  "guides.active.style": "dashed",
  "guides.normal.style": "dashed",
  "guides.stack.style": "dashed",
  "editor.renderIndentGuides": false,
  "gitlens.advanced.messages": {
    "suppressCommitHasNoPreviousCommitWarning": false,
    "suppressCommitNotFoundWarning": false,
    "suppressFileNotUnderSourceControlWarning": false,
    "suppressGitVersionWarning": false,
    "suppressLineUncommittedWarning": false,
    "suppressNoRepositoryWarning": false,
    "suppressResultsExplorerNotice": false,
    "suppressShowKeyBindingsNotice": true
  },
  "explorer.confirmDelete": false,
  "window.zoomLevel": -1,
  "files.associations": {
    "*.vm": "html",
    "*.cjson": "jsonc",
    "*.wxss": "css",
    "*.wxs": "javascript"
  },
  "gitlens.historyExplorer.enabled": true,
  "javascript.updateImportsOnFileMove.enabled": "always",
  "terminal.integrated.rendererType": "dom",
  "px-to-rem.px-per-rem": 37.5,
  "px-to-rem.number-of-decimals-digits": 6,
  "vsicons.dontShowNewVersionMessage": true,
  "emmet.includeLanguages": {
    "wxml": "html"
  },
  "minapp-vscode.disableAutoConfig": true,
  "diffEditor.ignoreTrimWhitespace": true,
  "workbench.statusBar.feedback.visible": false,
  "gitlens.views.fileHistory.enabled": true,
  "gitlens.views.lineHistory.enabled": true,
  "breadcrumbs.enabled": true,
  "editor.renderWhitespace": "none"
}
複製代碼

關於eslint

簡單粗暴的全用eslint standard規範，校驗代碼也是最嚴格的recommended，編輯器對於eslint的配置上面已經說了，項目中配置eslint這裏也很少描述了，描述下Git Hooks的配合約束eslint代碼

首先在項目中安裝兩個npm包，

npm i husky lint-staged -D -S
複製代碼

而後在package.jsonz增長以下配置：

"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
},
"lint-staged": {
  "linters": {
    "src/**/*.{js,vue}": [
      "eslint --fix",
      "git add"
    ]
  },
  "ignore": []
}
複製代碼

husky的做用就是在本地提交以前作校驗，固然是按eslint規範校驗

lint-staged的做用就是隻校驗你修改的文件，不作全局校驗

如上配置，每次它只會在你本地 commit 以前，校驗你提交的內容是否符合你本地配置的 eslint規則。若是不符合就會執行 eslint --fix 嘗試自動修復，修復失敗，則會提示錯誤，手動修復好錯誤後才容許提交代碼。

關於mockjs

首先安裝npm

npm i mockjs -D -S
複製代碼

在src目錄下新建mock文件夾，對應各views模塊創建對應的mock數據模塊。

全部的 mock 數據都放在 /src/mock 目錄下，它只會攔截 /src/mock/index.js 文件中攔截的 url。

本地環境開發時，在config/dev.env.js中，定義MOCK屬性：

module.exports = {
  NODE_ENV: '"development"',
  ENV_CONFIG: '"dev"',
  NPM_CONFIG_REPORT: 'false',
  BASE_API: '"https://dev.example.com/"',
  MOCK: 'true'
}
複製代碼

在src/main.js中引入mock

process.env.MOCK && require('./mock')
複製代碼

我是如何作到開發/生產環境切換、僅部分接口mock攔截的呢？

首先mock攔截是正則匹配url，那麼咱們在url和http請求攔截處作處理：

import Mock from 'mockjs'
import exampleApi from './example'

// example
const reg_example = /\/example\/list\/isMock/

Mock.mock(reg_example, 'post', exampleApi.list)

export default Mock
複製代碼

我在mock的url上加上isMock，而後在請求時提供參數isMock: true/false

import { axiosFetch } from '@/utils/axios'

export const exampleApi = {
  requestPath: 'example/list',
  isMock: true,
  list (params = {}) {
    return axiosFetch(this.requestPath, params, {
      isMock: this.isMock
    })
  }
}

複製代碼

最後，在請求攔截器裏作process.env.MOCK && config.isMock的雙重判斷，並改寫url

/* request攔截器 */
service.interceptors.request.use(config => {
  ...
  // 處理mock
  if (process.env.MOCK && config.isMock) {
    config.url = `${config.url}/'isMock'}`
  }
  return config
}, error => {
  Promise.reject(error)
})
複製代碼

就這樣，經過環境變量、請求配置、請求攔截器三者配合實現~

關於Git

爲了保證master的優雅一條線，功能分支必須合併commit後，才能rebase/merge到master