代码管理需要一套统一而完整的代码规范制约。—— By Luxun.
工具和插件
- vscode
- eslint
- Vetur
项目集成eslint
先装一波第三方依赖
1
2
npm install eslint eslint-config-standard eslint-friendly-formatter eslint-loader eslint-plugin-import
eslint-plugin-node eslint-plugin-promise eslint-plugin-standard eslint-plugin-vue --save-dev
配置文件
.editorconfi，没有则新建
1
2
3
4
5
6
7
8
9
root = true
[*]
charset = utf-8
indent_style = space //这边设置为空格，因为vscode prettier默认是空格缩进
indent_size = 2 //缩进两个空格
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
.eslintignore，没有则新建
一些无需校验的文件：
1
2
3
4
5
/build/
/config/
/dist/
/src/assets/js/lib/
/*.js
.eslintrc.js,没有则新建
这里配置校验规则：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
// https://eslint.org/docs/user-guide/configuring
module.exports = {
root: true,
parserOptions: {
parser: 'babel-eslint'
},
env: {
browser: true,
node: true,
commonjs: true,
es6: true
},
extends: [
// https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
// consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
'plugin:vue/essential',
// https://github.com/standard/standard/blob/master/docs/RULES-en.md
'standard'
],
// required to lint *.vue files
plugins: ['vue'],
// add your custom rules here
rules: {
// allow async-await
'generator-star-spacing': 'off',
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
//缩进，进行警告，不抛出error
indent: ['error', 2],
'no-tabs': 0
}
}
webpack.config.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const createLintingRule = () => ({
test: /\.(js|vue)$/,
loader: 'eslint-loader',
enforce: 'pre',
include: [resolve('src'), resolve('test')],
options: {
formatter: require('eslint-friendly-formatter'),
emitWarning: !config.dev.showEslintErrorsInOverlay
}
})
...
module: {
rules: [
...(config.dev.useEslint ? [createLintingRule()] : [])
...
vscode配置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "force-aligned"
}
},
"eslint.enable": true,
"eslint.autoFixOnSave": true,
"eslint.run": "onType",
"eslint.options": {
"extensions": [
".js",
".vue"
]
},
"eslint.validate": [
"javascript",
"html",
"vue",
{
"language": "html",
"autoFix": true
}
],
// 以下是按照ESLint格式化代码
"vetur.format.defaultFormatter.js": "vscode-typescript",
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
"editor.detectIndentation": false,//vscode默认启用了根据文件类型自动设置tabsize的选项.关键设置
好了，现在基本风格应该是保持统一了，下面展示段格式化的代码片段
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!-- html自动对齐， 标签属性强制对齐 -->
<template>
<div class="error-page">
<div class="error-img"></div>
<div class="error-content">
<h1>403</h1>
<div class="desc">抱歉，你无权访问该页面</div>
<el-button type="primary"
@click="handleIndexJump">返回首页</el-button>
</div>
</div>
</template>
<script>
// js 无分号，单引号，函数名称后有空格，代码缩进两个空格距离
export default {
data () {
return {
}
},
methods: {
handleIndexJump () {
this.$router.push('/')
}
}
}
</script>
<style lang="scss" scoped>
.error-img {
background-image: url('~assets/images/403.svg');
}
</style>
End.
