共计 7011 个字符，预计需要花费 18 分钟才能阅读完成。
一个项目是会有多个成员来开发的，因此统一开发规范是很有必要的，不然每个人都有自己的风格，同步之后代码都会报错。我这边是用 Vscode 编译器的。
首先用 vue-cli3.0 创建一个工程其中选择 eslint+prettier 类型，并且下载 Vscode 的插件 eslint 和 prettier，这样编译器就会效验规则了。项目中会生成.eslintrc.js 文件，该文件是用于配置 eslint 规则的
module.exports = {
root: true,
env: {
mocha: true,
es6: true,
node: true,
browser: true
},
parserOptions: {
parser: ‘babel-eslint’
},
plugins: [‘vue’, ‘vue-i18nstring’], // 这边主要增加 vue, 和 vue-i18nstirng 插件
extends: [‘plugin:vue/strongly-recommended’, ‘@vue/prettier’],
rules: {// 这边就是配置一些具体的规则，具体规则查看 eslint，大部分不需要改，开发过程中发现问题了，觉得不合适，可以配置进来
// 判断代码中是否存在中文 (这边如果不需要多语言模块，那么就不需要配置)
“vue-i18nstring/no-chinese-character-vue”: 1,
“vue-i18nstring/no-chinese-character-js”: 1,
‘vue/html-indent’: 1,
// 以下是去除 console 和 debugger 当然还有其他很多，如分号之类，根据风格就行修改
‘no-console’: process.env.NODE_ENV === ‘production’
? 0
: [
‘error’,
{
allow: [‘warn’, ‘error’]
}
],
‘no-debugger’: process.env.NODE_ENV === ‘production’? 0 : 2
},
globals: {
expect: true,
sinon: true
}
};
有了 vscode 插件和这个配置文件，那么就可以检测代码了。此外一般格式化风格也会有差异，这边 vscode 支持.prettierrc 文件来配置。这样所以这个项目的格式化风格就会一致了。
{
“printWidth”: 80,
“tabWidth”: 2,
“singleQuote”: true,
“trailingComma”: “none”,
“bracketSpacing”: true,
“semi”: true,
“useTabs”: false,
“proseWrap”: “never”,
“overrides”: [// 这边是除去不需要检测的文件
{
“files”: [
“*.json”,
“.eslintrc”,
“.babelrc”,
“.stylelintrc”,
“.prettierrc”
],
“options”: {
“parser”: “json”,
“tabWidth”: 2
}
}
]
}
当然这边仅仅做这个还是不够的，为啥呢，因为有人可能会提交一些代码还有错误的代码。因此这边采用 git 仓库。首先全局安装：npm install -g commitizen，这个工具是一个 git 提交的工具，可以做一些提交的检测然后 commitizen init cz-customizable –save –save-exact，这样就会自动在 package.json 增加
“config”: {
“commitizen”: {
“path”: “./node_modules/cz-customizable”
}
}
之后我们就可以使用 git cz 来代替 git commit 了，使用命令之后按给出的提出，给出相应的选择。这些选中都是可以修改了（配置文件可参考 node_modules/cz-customizable/cz-config-EXAMPLE.js）这边给出一个 demo，在根目录下创建.cz-config.js
‘use strict’;
module.exports = {
types: [
{value: ‘feat’, name: ‘feat: A new feature’},
{value: ‘test’, name: ‘feat: A new test’},
{value: ‘fix’, name: ‘fix: A bug fix’},
{value: ‘docs’, name: ‘docs: Documentation only changes’},
{
value: ‘style’,
name:
‘style: Changes that do not affect the meaning of the code\n (white-space, formatting, missing semi-colons, etc)’
},
{
value: ‘refactor’,
name:
‘refactor: A code change that neither fixes a bug nor adds a feature’
},
{
value: ‘perf’,
name: ‘perf: A code change that improves performance’
},
{value: ‘test’, name: ‘test: Adding missing tests’},
{
value: ‘chore’,
name:
‘chore: Changes to the build process or auxiliary tools\n and libraries such as documentation generation’
},
{value: ‘revert’, name: ‘revert: Revert to a commit’},
{value: ‘WIP’, name: ‘WIP: Work in progress’}
],
scopes: [
{name: ‘architecture’},
{name: ‘batch-selector’},
{name: ‘cascade-selector’},
{name: ‘highlight’},
{name: ‘holiday-picker’},
{name: ‘ip-input’},
{name: ‘map-picker’},
{name: ‘page’},
{name: ‘period-selector’},
{name: ‘plan’},
{name: ‘pwd-input’},
{name: ‘table-tree-column’},
{name: ‘time-picker’},
{name: ‘time-selector’},
{name: ‘tree-select’},
{name: ’empty’},
{name: ‘utils’},
{name: ‘others’}
],
// it needs to match the value for field type. Eg.: ‘fix’
/*
scopeOverrides: {
fix: [
{name: ‘merge’},
{name: ‘style’},
{name: ‘e2eTest’},
{name: ‘unitTest’}
]
},
*/
// override the messages, defaults are as follows
messages: {
type: “Select the type of change that you’re committing:”,
scope: ‘\nDenote the SCOPE of this change (optional):’,
// used if allowCustomScopes is true
customScope: ‘Denote the SCOPE of this change:’,
subject: ‘Write a SHORT, IMPERATIVE tense description of the change:\n’,
body:
‘Provide a LONGER description of the change (optional). Use “|” to break new line:\n’,
breaking: ‘List any BREAKING CHANGES (optional):\n’,
footer:
‘List any ISSUES CLOSED by this change (optional). E.g.: #31, #34:\n’,
confirmCommit: ‘Are you sure you want to proceed with the commit above?’
},
allowCustomScopes: true,
allowBreakingChanges: [‘feat’, ‘fix’],
// limit subject length
subjectLimit: 100
};
上述内容都可以进行修改。到现在为止只是对提交的信息做了效验，这是为了提交日志的规范性，那么这个是仅仅不够，我们应该在检测一下所提交的代码是否符合规范才行。为此我们需要安装 husky（这个是用于提交 git 代码的钩子函数）, npm install husky –save-dev, 安装完之后，我们就需要在 packages.json 增加运行钩子函数。
“husky”: {
“hooks”: {
“pre-commit”: “npm run lint”,
“commit-msg”: ….,
等钩子函数
}
}
这样就简单的成功对代码进行效验了，当然这边更进一步的可以使用 lint-staged 这个, 可以将取得所有被提交的文件依次执行写好的任务。也就是说钩子函数中我们只需要这样写
“husky”: {
“hooks”: {
“pre-commit”: “lint-staged”,
“commit-msg”: ….,
等钩子函数
}
}
然后在配置一个.lintstagedrc 文件，并写好需要执行的命令
{
“*.js”: [
“vue-cli-service lint packages src”,
“git add”
], // 这边是检测 js 代码
“*.vue”: [
“vue-cli-service lint packages”,
“git add”
], // 这边是检测 vue 代码
“packages/**/*.scss”: [
“stylelint packages/**/*.scss –fix”,
“git add”
] // 这个是检测样式的，后面再补充
}
然后用是 commit-msg 增加 commitlint -E HUSKY_GIT_PARAMS, 通过安装 commitlint 来检测提交代码的规范
之后就是 stylelint 的效验，这个是用于效验 css 的规范，比如样式的顺序，width 需要在 height 之，等等这一类的规范安装 npm i stylelint –save-dev 然后增加.styleintrc 文件，用于添加效验规则
{
“plugins”: [“stylelint-prettier”, “stylelint-scss”],
“extends”: [
“stylelint-config-idiomatic-order”,
“stylelint-config-standard”,
“stylelint-config-prettier”
],
“rules”: {
“at-rule-no-unknown”: null,
“scss/at-rule-no-unknown”: true,
“prettier/prettier”: true
}
}
最后附上一份较全的 package.json 文件
{
“name”: “test”,
“version”: “0.01”,
“scripts”: {
“lint”: “vue-cli-service lint packages src && stylelint packages/**/*.scss –fix”,
“cz:changelog”: “conventional-changelog -p angular -i CHANGELOG.md -s && git add CHANGELOG.md”,
“dev”: “vue-cli-service serve”,
“lib:all”: “npm run lib:clean && npm run lib:i18n && npm run lib:common && npm run lib:umd && npm run lib:utils”,
“lib:clean”: “rimraf lib”,
“lib:common”: “cross-env LIB_TYPE=common vue-cli-service build –no-clean –target lib –formats commonjs –name hui-pro src/index.js”,
“lib:i18n”: “cross-env NODE_ENV=js babel src/locale –out-dir lib/locale”,
“lib:utils”: “cross-env NODE_ENV=node babel-node bin/generateIndex && cross-env NODE_ENV=js babel packages/utils –out-dir utils”,
“lib:umd”: “cross-env LIB_TYPE=umd vue-cli-service build –no-clean –target lib –formats umd-min –name hui-pro src/index.js”,
“vuepress:dev”: “vuepress dev docs”
},
“dependencies”: {
“jsencrypt”: “^2.3.1”,
“moment”: “^2.24.0”,
“qs”: “^6.5.2”
},
“devDependencies”: {
“@babel/cli”: “^7.2.3”,
“@babel/node”: “^7.2.2”,
“@commitlint/cli”: “^7.2.0”,
“@commitlint/config-conventional”: “^7.5.0”,
“@vue/cli-plugin-babel”: “^3.3.0”,
“@vue/cli-plugin-eslint”: “^3.3.0”,
“@vue/cli-service”: “^3.3.0”,
“@vue/eslint-config-prettier”: “^4.0.1”,
“babel-eslint”: “^10.0.1”,
“babel-plugin-import”: “^1.11.0”,
“babel-plugin-module-resolver”: “^3.1.3”,
“commitizen”: “^3.0.5”,
“conventional-changelog”: “^3.0.5”,
“cross-env”: “^5.2.0”,
“cz-customizable”: “^5.2.0”,
“eslint”: “^5.8.0”,
“eslint-plugin-vue”: “^5.0.0”,
“highlightjs”: “^9.12.0”,
“husky”: “^1.1.1”,
“ip”: “^1.1.5”,
“lint-staged”: “^8.1.3”,
“node-sass”: “^4.11.0”,
“prettier-eslint”: “^8.8.2”,
“prettier-stylelint”: “^0.4.2”,
“sass-loader”: “^7.1.0”,
“stylelint”: “^9.10.1”,
“stylelint-config-idiomatic-order”: “^6.2.0”,
“stylelint-config-prettier”: “^5.0.0”,
“stylelint-config-standard”: “^18.2.0”,
“stylelint-prettier”: “^1.0.6”,
“stylelint-scss”: “^3.5.1”,
“stylelint-webpack-plugin”: “^0.10.5”,
“vue”: “^2.5.21”,
“vue-cli-plugin-changelog”: “^1.1.9”,
“vue-cli-plugin-lint-staged”: “^0.1.1”,
“vue-router”: “^3.0.1”,
“vue-svg-loader”: “^0.12.0”,
“vue-template-compiler”: “^2.5.21”,
“webpack-node-externals”: “^1.7.2”
},
“postcss”: {
“plugins”: {
“autoprefixer”: {}
}
},
“browserslist”: [
“Chrome > 48”,
“Edge > 16”,
“Firefox > 62”,
“IE > 9”,
“Safari > 11”
],
“commitlint”: {
“extends”: [
“@commitlint/config-conventional”
]
},
“config”: {
“commitizen”: {
“path”: “node_modules/cz-customizable”
}
},
“files”: [
“lib”,
“src”,
“packages”,
“utils”
],
“husky”: {
“hooks”: {
“commit-msg”: “commitlint -E HUSKY_GIT_PARAMS”,
“post-merge”: “npm install”,
“pre-commit”: “lint-staged”
}
},
“main”: “lib/hui-pro.common.js”
}
