一个项目是会有多个成员来开辟的，因而一致开辟范例是很有必要的，不然每个人都有本身的作风，同步以后代码都邑报错。
我这边是用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"
}
