工程搭建---代码风格统一
一个项目是会有多个成员来开发的，所以统一开发规范是颇有必要的，否则每一个人都有本身的风格，同步以后代码都会报错。
我这边是用Vscode编译器的。css
首先用vue-cli3.0建立一个工程
其中选择eslint+prettier类型，而且下载Vscode的插件eslint和prettier，这样编译器就会效验规则了。
项目中会生成.eslintrc.js文件，该文件是用于配置eslint规则的html
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文件来配置。
这样因此这个项目的格式化风格就会一致了。vue
{
"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增长node
"config": {
"commitizen": {
"path": "./node_modules/cz-customizable"
}
}
以后咱们就可使用git cz 来代替 git commit了，使用命令以后按给出的提出，给出相应的选择。这些选中都是能够修改了（配置文件可参考node_modules/cz-customizable/cz-config-EXAMPLE.js）这边给出一个demo，在根目录下建立.cz-config.jswebpack
'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增长运行钩子函数。git
"husky": {
"hooks": {
"pre-commit": "npm run lint",
"commit-msg": ....,
等钩子函数
}
}
这样就简单的成功对代码进行效验了，固然这边更进一步的可使用lint-staged这个,能够将取得全部被提交的文件依次执行写好的任务。也就是说钩子函数中咱们只须要这样写es6
"husky": {
"hooks": {
"pre-commit": "lint-staged",
"commit-msg": ....,
等钩子函数
}
}
而后在配置一个.lintstagedrc文件，并写好须要执行的命令web
{
"*.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来检测提交代码的规范vue-router
以后就是stylelint的效验，这个是用于效验css的规范，好比样式的顺序，width须要在height之，等等这一类的规范
安装npm i stylelint --save-dev而后增长.styleintrc文件，用于添加效验规则vue-cli
{
"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"
}
相关文章
- 1. 统一代码风格工具 editorConfig
- 2. 统一代码风格工具——editorConfig
- 3. 代码风格统一之代码自动格式化
- 4. 使用ASTYLE统一C++代码风格
- 5. vscode团队代码风格统一
- 6. 代码风格-统一，整齐，美态
- 7. esLint:作代码统一风格规范
- 8. 代码风格统一规范
- 9. 代码风格统一：commitlint & eslint & standard-version
- 10. ESLint+Prettier统一TypeScript代码风格
- 更多相关文章...
- • Markdown 代码 - Markdown 教程
- • Eclipse 代码模板 - Eclipse 教程
- • IntelliJ IDEA代码格式化设置
- • IntelliJ IDEA安装代码格式化插件
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
欢迎关注本站公众号,获取更多信息
