规范类的制定我期望是唯一的...
包括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