构建多人开发的 Nodejs 开发环境

在多人协作下,工具统一是很重要,以下是我在多人协作开发 Nodejs 项目的一些配置。

VSCode 配置

VSCode 一直是为开发 nodejs 的主力编辑器,大部分编码约束都是通过 VSCode 的插件完成的。

ESLint

ESLint

ESLint 是 ES 语法检查格式化工具,ESLint 在整个规范化中担任着重要的角色。

我的 ESLint 配置如下

1
2
3
4
5
6
{
// << eslint
"eslint.enable": true,
"eslint.alwaysShowStatus": true,
// >> eslint
}

docthis

docthis

为了统一代码方法注释,使用 docthis 对方法和类进行注释

配置如下:

1
2
3
4
5
6
7
8
9
{
// << docthis
"docthis.includeAuthorTag": true, //出现@Author
"docthis.authorName": "bubao",
"docthis.dateTagFormat": "yyyy-mm-dd HH:mm:ss",
"docthis.includeDateTag": true,
"docthis.includeDescriptionTag": true, //出现@Description
// >> docthis
}

korofileheader

korofileheader

在 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
{
// << koro 头部注释配置
"fileheader.customMade": {
"Description": "",
"author": "bubao",
"Date": "Do not edit",
"LastEditors": "bubao",
"LastEditTime": "Do not edit",
},

"fileheader.configObj": {
"language": {
"js": {
"head": "/**",
"middle": " * @",
"end": " */"
},
"vue": {
"head": "<!--",
"middle": " * @",
"end": " -->"
}
}
},
// >> koro 注释格式配置
}

better-comments

better-comments

在对某一行代码进行注释时,可以使用这个插件实现注释高亮,我一般用在写逻辑 TODO 说明时使用,在完成一个 TODO 后修改高亮方式。

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
{
// << better-comments 自定义注释高亮颜色
"better-comments.tags": [
{
"tag": "!", // * 警告
"color": "#FF2D00",
"strikethrough": false,
"backgroundColor": "transparent"
},
{
"tag": "?", // * 疑问
"color": "#3498DB",
"strikethrough": false,
"backgroundColor": "transparent"
},
{
"tag": "//", // * 删除注释
"color": "#474747",
"strikethrough": true,
"backgroundColor": "transparent"
},
{
"tag": "todo", // TODO
"color": "#FF8C00",
"strikethrough": false,
"backgroundColor": "transparent"
},
{
"tag": "*", // * 完成标志
"color": "#98C379",
"strikethrough": false,
"backgroundColor": "transparent"
},
{
"tag": "info", // * 说明
"color": "#99FB37",
"strikethrough": false,
"backgroundColor": "transparent"
},
{
"tag": "<<", // * 范围开始
"color": "#F2D660",
"strikethrough": false,
"backgroundColor": "transparent"
},
{
"tag": ">>", // * 范围结束
"color": "#60D6F2",
"strikethrough": false,
"backgroundColor": "transparent"
},
],
// >> better-comments
}

Pangu-Markdown

一般项目中都会有 Markdown 文件,这个插件可以规范 Markdown 格式。

1
2
3
{
"pangu.auto_format_on_save": 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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
{
// 启用后,差异编辑器将忽略前导空格或尾随空格中的更改。
"files.eol": "\n",
// << javascript
// JavaScript 格式化程序
"javascript.format.enable": true,
// 始终自动更新路径。
"javascript.updateImportsOnFileMove.enabled": "always",
"[javascript]": {
"editor.defaultFormatter": "vscode.typescript-language-features"
},
// >> javascript
// << editor
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
},
// 编辑器的分割字符处理,在下面去掉 - 就可以做到。class-name 双击全选
"editor.wordSeparators": "`~!@#$%^&*()=+[{]}\\|;:'\",.<>/?",
// 按 "Tab" 时插入空格。
"editor.insertSpaces": false,
// 一个制表符等于的空格数。
// "editor.tabSize": 4,
"editor.wordWrap": "on",
"pangu.auto_format_on_save": true,
// << better-comments 自定义注释高亮颜色
"better-comments.tags": [
{
"tag": "!", // * 警告
"color": "#FF2D00",
"strikethrough": false,
"backgroundColor": "transparent"
},
{
"tag": "?", // * 疑问
"color": "#3498DB",
"strikethrough": false,
"backgroundColor": "transparent"
},
{
"tag": "//", // * 删除注释
"color": "#474747",
"strikethrough": true,
"backgroundColor": "transparent"
},
{
"tag": "todo", // TODO
"color": "#FF8C00",
"strikethrough": false,
"backgroundColor": "transparent"
},
{
"tag": "*", // * 完成标志
"color": "#98C379",
"strikethrough": false,
"backgroundColor": "transparent"
},
{
"tag": "info", // * 说明
"color": "#99FB37",
"strikethrough": false,
"backgroundColor": "transparent"
},
{
"tag": "<<", // * 范围开始
"color": "#F2D660",
"strikethrough": false,
"backgroundColor": "transparent"
},
{
"tag": ">>", // * 范围结束
"color": "#60D6F2",
"strikethrough": false,
"backgroundColor": "transparent"
},
],
// >> better-comments
// << koro 头部注释配置
"fileheader.customMade": {
"Description": "",
"author": "bubao",
"Date": "Do not edit",
"LastEditors": "bubao",
"LastEditTime": "Do not edit",
},

"fileheader.configObj": {
"language": {
"js": {
"head": "/**",
"middle": " * @",
"end": " */"
},
"vue": {
"head": "<!--",
"middle": " * @",
"end": " -->"
}
}
},
// >> koro 注释格式配置
}

这里,我把编辑器的制表符设置为 4,大家可以根据自己的喜好修改显示的长度。

汇总

这里,我把编辑器的制表符设置为 4,大家可以根据自己的喜好修改显示的长度。

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
{
"prettier.enable": false,
// << docthis
"docthis.includeAuthorTag": true, //出现@Author
"docthis.authorName": "bubao",
"docthis.dateTagFormat": "yyyy-mm-dd HH:mm:ss",
"docthis.includeDateTag": true,
"docthis.includeDescriptionTag": true, //出现@Description
// >> docthis
// << eslint
"eslint.enable": true,
"eslint.alwaysShowStatus": true,
// >> eslint
// 启用后,差异编辑器将忽略前导空格或尾随空格中的更改。
"files.eol": "\n",
// << javascript
// JavaScript 格式化程序
"javascript.format.enable": true,
// 始终自动更新路径。
"javascript.updateImportsOnFileMove.enabled": "always",
"[javascript]": {
"editor.defaultFormatter": "vscode.typescript-language-features"
},
// >> javascript
// << editor
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
},
// 编辑器的分割字符处理,在下面去掉 - 就可以做到。class-name 双击全选
"editor.wordSeparators": "`~!@#$%^&*()=+[{]}\\|;:'\",.<>/?",
// 按 "Tab" 时插入空格。
"editor.insertSpaces": false,
// 一个制表符等于的空格数。
// "editor.tabSize": 4,
"editor.wordWrap": "on",
"pangu.auto_format_on_save": true,
// << better-comments 自定义注释高亮颜色
"better-comments.tags": [
{
"tag": "!", // * 警告
"color": "#FF2D00",
"strikethrough": false,
"backgroundColor": "transparent"
},
{
"tag": "?", // * 疑问
"color": "#3498DB",
"strikethrough": false,
"backgroundColor": "transparent"
},
{
"tag": "//", // * 删除注释
"color": "#474747",
"strikethrough": true,
"backgroundColor": "transparent"
},
{
"tag": "todo", // TODO
"color": "#FF8C00",
"strikethrough": false,
"backgroundColor": "transparent"
},
{
"tag": "*", // * 完成标志
"color": "#98C379",
"strikethrough": false,
"backgroundColor": "transparent"
},
{
"tag": "info", // * 说明
"color": "#99FB37",
"strikethrough": false,
"backgroundColor": "transparent"
},
{
"tag": "<<", // * 范围开始
"color": "#F2D660",
"strikethrough": false,
"backgroundColor": "transparent"
},
{
"tag": ">>", // * 范围结束
"color": "#60D6F2",
"strikethrough": false,
"backgroundColor": "transparent"
},
],
// >> better-comments
// << koro 头部注释配置
"fileheader.customMade": {
"Description": "",
"author": "bubao",
"Date": "Do not edit",
"LastEditors": "bubao",
"LastEditTime": "Do not edit",
},

"fileheader.configObj": {
"language": {
"js": {
"head": "/**",
"middle": " * @",
"end": " */"
},
"vue": {
"head": "<!--",
"middle": " * @",
"end": " -->"
}
}
},
// >> koro 注释格式配置
}

项目配置

ESLint

ESLint 是一款语法检测工具。它可以根据人们规定的规则,提示用户代码是否符合规定的代码规则。

需要在项目里安装 eslint

1
yarn add eslint eslint-config-standard eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard --dev

编写.eslintrc

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
{
"root": true,
"env": {
// 一个环境定义了一组预定义的全局变量。
"es6": true, // 启用 es6 语法
"node": true // - Node.js 全局变量和 Node.js 作用域。
},
"extends": [
"standard",
"plugin:node/recommended"
],
"plugins": [
"standard",
"node"
],
"rules": {
"semi": [
"error",
"always"
],
"quotes": [
"error",
"double"
],
"comma-dangle": [
"error",
{
"arrays": "always",
"objects": "never",
"imports": "never",
"exports": "never",
"functions": "never"
}
],
"newline-per-chained-call": [
"error",
{
"ignoreChainWithDepth": 1
}
],
"array-bracket-spacing":["error", "never"],
"node/no-missing-import": "off",
"no-multiple-empty-lines": "error",
"no-var": "error",
"no-template-curly-in-string": "off",
"node/no-deprecated-api": "off",
"camelcase": "off",
"no-bitwise": "off",
"no-case-declarations": "off",
"no-new": "off",
"new-cap": "off",
"no-unmodified-loop-condition": "off",
"no-loop-func": "off",
"prefer-promise-reject-errors": "off",
"node/no-unsupported-features/es-syntax": "off",
"standard/no-callback-literal": "off",
"no-tabs": "off",
"indent": ["error", "tab",{ "SwitchCase": 1 }],
"space-before-function-paren": [
"error",
{
"anonymous": "never",
"named": "never",
"asyncArrow": "always"
}
],
"arrow-parens": [
"error",
"as-needed"
]
}
}

husky

husky 在 Git hooks 调用的时候,触发一些操作。我这里在 git hooks 上检查代码规范,并自动 fix。

安装

1
yarn add husky --dev

在 package 中添加

1
2
3
4
5
6
7
8
9
{
"husky": {
"hooks": {
"pre-commit": "eslint --fix .",
"pre-push": "eslint --fix .",
"commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
}
}
}

构建多人开发的 Nodejs 开发环境
https://bubao.github.io/posts/9541e6fe.html
作者
一念
发布于
2021年8月1日
许可协议