# 前言
随着项目的成长，项目成员越来越多，以及代码管理规范的要求，配置代码风格一致变得渐渐必要起来，风格一致的代码有利于减少格式不一致的带来的冲突，不管项目有多少人参与，代码看起来都出自一人之手，提高了代码的可读性和质量。通过Eslint校验代码语法：
prettier统一格式化代码。- 保存自动修复eslint错误，自动格式化代码。
# 代码风格一致配置
TIP
推荐使用vscode开发工具，文中的配置适用于vscode
# 安装插件包
- ESLint
- Vetur
- Prettier - Code formatter
TIP
- 安装后重启vscode编辑器，防止插件不生效。
- 禁用 Beautify(如果已安装) 插件，该插件会占用格式化代码的快捷键，会和 prettier 产生冲突
# vscode插件配置
打开vscode的 Settings界面，里面有两个设置。
- USER SETTINGS(用户设置)即全局设置，其他项目也会应用这个配置。
- WORKSPACE SETTINGS（工作区设置）即项目设置，会在当前项目的根路径里创建一个.vscode/setting.json文件，然后配置只在当前项目生效。
TIP
如何进入settings界面 + mac系统下，使用快捷键进入（Ctrl + ,），或者点击左上角 Code => 首选项 => Settings
windows系统下，点击左上角文件=>首选项=>设置
推荐工作区配置，如下：
{
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "force-expand-multiline"
},
"prettyhtml": {
"printWidth": 100,
"singleQuote": false,
"wrapAttributes": false,
"sortAttributes": false
}
},
//根据文件后缀名定义vue文件类型
"files.associations": {
"*.vue": "vue"
},
"eslint.options": {
"extensions": [".js", ".vue"]
},
//配置 ESLint 检查的文件类型
//确定校验准则
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "vue",
"autoFix": true
}
],
"eslint.autoFixOnSave": true,
//保存自动格式化
"editor.formatOnSave": false,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}
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
34
35
36
37
38
39
40
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
34
35
36
37
38
39
40
# 添加配置文件
由于同时使用了 Prettier 和 Eslint ,Eslint 和 Prettier 的配置文件如下：
.eslintrc.js
module.exports = {
root: true,
env: {
node: true,
es6: true
},
extends: ['plugin:vue/essential', 'eslint:recommended', 'prettier'],
plugins: ['vue', 'prettier'],
rules: {
'prettier/prettier': 'error',
'space-before-function-paren': 0,
'comma-dangle': 0,
proseWrap: 'preserve',
arrowParens: 'avoid',
'no-undef': 0,
'no-unused-vars': 0,
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
// 强制使用单引号
quotes: ['error', 'single'],
semi: ['error', 'never']
},
globals: {
Vue: true,
weex: true
},
parserOptions: {
parser: 'babel-eslint'
}
}
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
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
.eslintignore
node_modules
.next
.temp
dist
build
lib
plugins
web
package-lock.json
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
.prettierrc.js
module.exports = {
//开启 eslint 支持
eslintIntegration: true,
//使用单引号
singleQuote: true,
//结尾不加分号
semi: false
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
.prettierignore
node_modules
.next
.temp
dist
build
lib
plugins
web
package-lock.json
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
.editorconfig
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
trim_trailing_whitespace = true
insert_final_newline = true
max_line_length = 120
[*.md]
trim_trailing_whitespace = false
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 安装node模块包
"eslint": "^5.16.0",
"eslint-plugin-prettier": "^3.1.0",
"eslint-config-prettier": "^6.0.0",
"eslint-plugin-vue": "^5.2.3",
"prettier": "^1.18.2",
1
2
3
4
5
2
3
4
5
vue开发规范 →