Node 后端项目起手式（一）：基础配置与代码审查
在创建 Node 项目时，需要配置很多基础设置和包依赖。如果每次都需要从头开始，效率会非常低。我们配置一个通用的环境，这样会在之后的工作中变得更有效率。如同下棋时弈手起手落子，久经考验且之后变化多端。
TypeScript VS JavaScript
关于 TypeScript 和 JavaScript 的选择，网络上的讨论很多。笔者比较倾向于 TypeScript ，比起使用 TypeScript 带来的问题，使用它的好处是显而易见的：更好的协作、更高的代码质量、更轻松的维护工作。因此在这个起手式项目中，我们采用 TypeScript 。
创建项目
建立初始仓库
创建一个新文件夹，并初始化 Git ：
1
2
3
4
mkdir node-backend-example
cd node-backend-example
git init .
npm init
按步骤输入信息，package.json内容如下：
1
2
3
4
5
6
7
8
9
{
"name": "backend-example",
"version": "0.0.1",
"description": "Node Backend Example",
"main": "index.js",
"scripts": {},
"author": "mediumcn",
"license": "MIT"
}
提交修改：
1
2
git add package.json
git commit -m 'chore: init package.json'
添加 .gitignore
这里使用gi进行配置，更多操作参考 gitignore.io2
1
2
export function gi() { curl -sLw "\n" https://www.gitignore.io/api/\$@ ;}
gi node,linux,macos,windows,visualstudiocode > .gitignore
提交修改：
1
2
git add .gitignore
git commit -m 'chore: use gi create .gitignore'
添加代码检查: ESLint
1
2
yarn add -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin
vim .eslintrc.js
.eslintrc.js内容如下，更多配置请参考ESLint Configuring3
1
2
3
4
5
6
7
8
module.exports = {
parser: '@typescript-eslint/parser', // 此处为解析器，我们使用typescript
plugins: ['@typescript-eslint'],
extends: ['plugin:@typescript-eslint/recommended', 'standard'], // 启用的规则
env: { // 此处为运行环境的全局变量
node: true
}
}
提交修改：
1
2
git add .eslintrc.js package.json yarn.lock
git commit -m 'chore: add eslint'
是否将yarn.lock提交到版本控制系统的解释请参考此文章4。
添加代码格式化: Prettier
1
2
3
yarn add -D typescript
yarn add -D prettier eslint-config-prettier eslint-plugin-prettier
vim .prettierrc.js
.prettierrc.js内容如下：
1
2
3
4
5
6
7
8
9
10
11
module.exports = {
printWidth: 80,
endOfline: 'auto',
semi: false,
singleQuote: true,
trailingComma: 'all',
bracketSpacing: false,
arrowParens: 'avoid',
tabWidth: 2,
useTabs: false,
}
修改.eslintrc.js:
1
2
3
4
5
module.exports = {
...
extends: ['prettier/@typescript-eslint', 'plugin:prettier/recommended'],
...
}
提交修改：
1
2
git add .prettierrc.js .eslintrc.js package.json yarn.lock
git commit -m 'chore: add prettier'
添加 commit 检查：commitlint
1
2
yarn add -D @commitlint/{cli,config-conventional}
echo "module.exports = {extends: ['@commitlint/config-conventional']};" > commitlint.config.js
提交修改：
1
2
git add commitlint.config.js yarn.lock package.json
git commit -m 'chore: add commitlint'
添加husky:
1
yarn add -D husky
在package.json中添加以下字段：
1
2
3
4
5
"husky": {
"hooks": {
"commit-msg": "commitlint -e $HUSKY_GIT_PARAMS"
}
}
提交修改：
1
2
git add package.json yarn.lock
git commit -m 'chore: add husky hook'
自动格式化：lint-staged
1
yarn add -D lint-staged
在package.json中添加以下字段：
1
2
3
4
5
6
7
8
9
10
11
12
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.{ts,js,json,md}": [
"prettier --write",
"eslint --fix",
"git add"
]
}
提交修改：
1
2
git add package.json yarn.lock
git commit -m 'chore: add lint-staged'
参考