回顾两年前整理的前端规范

规范类的制定我指望是惟一的...

包括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