Node 后端项目起手式（一）：基础配置与代码审查

在创建 Node 项目时，需要配置很多基础设置和包依赖。如果每次都需要从头开始，效率会非常低。我们配置一个通用的环境，这样会在之后的工作中变得更有效率。如同下棋时弈手起手落子，久经考验且之后变化多端。

TypeScript VS JavaScript

关于 TypeScript 和 JavaScript 的选择，网络上的讨论很多。笔者比较倾向于 TypeScript ，比起使用 TypeScript 带来的问题，使用它的好处是显而易见的：更好的协作、更高的代码质量、更轻松的维护工作。因此在这个起手式项目中，我们采用 TypeScript 。

创建项目

建立初始仓库

创建一个新文件夹，并初始化 Git ：

mkdir node-backend-example
cd node-backend-example
git init .
npm init

按步骤输入信息，package.json内容如下：

{
  "name": "backend-example",
  "version": "0.0.1",
  "description": "Node Backend Example",
  "main": "index.js",
  "scripts": {},
  "author": "mediumcn",
  "license": "MIT"
}

关于 License 的选择，可以参考这篇文章^license。

提交修改：

git add package.json
git commit -m 'chore: init package.json'

添加 .gitignore

这里使用gi进行配置，更多操作参考 gitignore.io[^gitingnore]

export function gi() { curl -sLw "\n" https://www.gitignore.io/api/\$@ ;}
gi node,linux,macos,windows,visualstudiocode > .gitignore

提交修改：

git add .gitignore
git commit -m 'chore: use gi create .gitignore'

添加代码检查: ESLint

yarn add -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin
vim .eslintrc.js

.eslintrc.js内容如下，更多配置请参考ESLint Configuring[^eslint]

module.exports = {
  parser: '@typescript-eslint/parser', // 此处为解析器，我们使用typescript
  plugins: ['@typescript-eslint'],
  extends: ['plugin:@typescript-eslint/recommended', 'standard'], // 启用的规则
  env: { // 此处为运行环境的全局变量
    node: true 
  }
}

提交修改：

git add .eslintrc.js package.json yarn.lock
git commit -m 'chore: add eslint'

是否将yarn.lock提交到版本控制系统的解释请参考此文章[^yarn-lock]。

添加代码格式化: Prettier

yarn add -D typescript
yarn add -D prettier eslint-config-prettier eslint-plugin-prettier
vim .prettierrc.js

.prettierrc.js内容如下：

module.exports = {
  printWidth: 80,
  endOfline: 'auto',
  semi: false,
  singleQuote: true,
  trailingComma: 'all',
  bracketSpacing: false,
  arrowParens: 'avoid',
  tabWidth: 2,
  useTabs: false,
}

修改.eslintrc.js:

module.exports = {
  ...
  extends: ['prettier/@typescript-eslint', 'plugin:prettier/recommended'],
  ...
}

提交修改：

git add  .prettierrc.js .eslintrc.js  package.json yarn.lock
git commit -m 'chore: add prettier'

添加 commit 检查：commitlint

yarn add -D @commitlint/{cli,config-conventional}
echo "module.exports = {extends: ['@commitlint/config-conventional']};" > commitlint.config.js

提交修改：

git add commitlint.config.js yarn.lock package.json
git commit -m 'chore: add commitlint'

添加husky:

yarn add -D husky

在package.json中添加以下字段：

"husky": {
  "hooks": {
    "commit-msg": "commitlint -e $HUSKY_GIT_PARAMS"
  }
}

提交修改：

git add package.json yarn.lock
git commit -m 'chore: add husky hook'

自动格式化：lint-staged

yarn add -D lint-staged

在package.json中添加以下字段：

"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
},
"lint-staged": {
  "*.{ts,js,json,md}": [
    "prettier --write",
    "eslint --fix",
    "git add"
  ]
}

提交修改：

git add package.json yarn.lock
git commit -m 'chore: add lint-staged'

参考

[^gitingnore]: gitingnore 创建工具
[^eslint]: eslint 配置文档
[^yarn-lock]: yarn.lock 说明

本文首发于 mediumcn