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

王玲波_柏林發表於2018-12-21
前端

規範類的制定我期望是唯一的…

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

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

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

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

…

乾貨吧，話不多說

首先是編輯器vscode

對於vscode，要求安裝以下外掛（不多介紹，有興趣的自行baidu/google）：

1、editorConfig
root = true[*]charset = utf-8indent_style = spaceindent_size = 2end_of_line = lfinsert_final_newline = truetrim_trailing_whitespace = true複製程式碼
2、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"複製程式碼
3、eslint

讀取專案中.eslinttrc.js檔案，也可以引用一個全域性的

"eslint.autoFixOnSave": true,"eslint.options": { 
 "configFile": ".eslintrc.js"
  },"eslint.validate": [  "javascript",  "javascriptreact", { 
   "language": "html",    "autoFix": true  
  },  { 
   "language": "vue",    "autoFix": true  
  }]複製程式碼
4、Git Lens
5、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'// exampleconst 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

來源：https://juejin.im/post/5c1ca73be51d454be8630b77

相關文章