构建多人开发的 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"
        }
    }
}
教程
#node.js
构建多人开发的 Nodejs 开发环境
https://bubao.github.io/posts/9541e6fe.html
作者
一念
发布于
2021年8月1日
许可协议