# NodejsTemplateTS

**Repository Path**: sdpyly/nodejs-template-ts

## Basic Information

- **Project Name**: NodejsTemplateTS
- **Description**: Nodejs工程模版 基于TypeScript
- **Primary Language**: TypeScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-08-25
- **Last Updated**: 2023-10-31

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Nodejs工程模版 基于TypeScript

Nodejs+Typescript+Eslint+Prettier+Husky项目构建

[原文链接](https://blog.csdn.net/sdpyly/article/details/132453357)

# 准备工作

确保已经安装了git以及Node.js和npm，通过`git -v`、`node -v`和`npm -v`检查是否安装。
# 初始化项目
```sh
# 进入你的目录
cd your-directory

# 初始化 npm 项目
npm init -y

# 安装 TypeScript 和 ts-node
npm install --save-dev typescript ts-node

# 初始化 TypeScript 配置
npx tsc --init

# 创建 src 目录
mkdir src

# 创建你的 TypeScript 文件
touch src/index.ts
```
在新建的tsconfig.json中，修改target、module、和outDir，其中outDir设置为`./dist`，其他根据情况设置。
# Eslint安装和配置
```sh
# 安装 ESLint
npm install --save-dev eslint

# 初始化 ESLint 配置
npx eslint --init
```
根据情况选择配置：
```text
You can also run this command directly using 'npm init @eslint/config'.
Need to install the following packages:
  @eslint/create-config@0.4.6
Ok to proceed? (y) y
✔ How would you like to use ESLint? · style
✔ What type of modules does your project use? · commonjs
✔ Which framework does your project use? · none
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · node
✔ How would you like to define a style for your project? · guide
✔ Which style guide do you want to follow? · standard-with-typescript
✔ What format do you want your config file to be in? · JavaScript
Checking peerDependencies of eslint-config-standard-with-typescript@latest
The config that you've selected requires the following dependencies:

eslint-config-standard-with-typescript@latest @typescript-eslint/eslint-plugin@^6.1.0 eslint@^8.0.1 eslint-plugin-import@^2.25.2 eslint-plugin-n@^15.0.0 || ^16.0.0  eslint-plugin-promise@^6.0.0 typescript@*
✔ Would you like to install them now? · No / Yes
✔ Which package manager do you want to use? · npm
Installing eslint-config-standard-with-typescript@latest, @typescript-eslint/eslint-plugin@^6.1.0, eslint@^8.0.1, eslint-plugin-import@^2.25.2, eslint-plugin-n@^15.0.0 || ^16.0.0 , eslint-plugin-promise@^6.0.0, typescript@*

added 113 packages in 5s
```
# Prettier安装和配置
1. 首先，安装 Prettier，在项目目录中，运行 
 ```sh
npm install --save-dev prettier
```

2. 	创建一个 .prettierrc 文件来配置 Prettier。你可以在这个文件中设置你的格式化选项，例如：
```json
{
	"semi": true,
	"singleQuote": true,
	"tabWidth": 4
}
```
# 在Eslint中使用Prettier插件
安装 eslint-plugin-prettier 和 eslint-config-prettier

```sh 
npm install --save-dev eslint-plugin-prettier eslint-config-prettier
```

编辑.eslintrc.js文件
```js
module.exports = {
    "env": {
        "browser": true,
        "commonjs": true,
        "es2022": true
    },
    "extends": ["standard-with-typescript","prettier"],
    "plugins": ["prettier"],
    "overrides": [
        {
            "env": {
                "node": true
            },
            "files": [
                ".eslintrc.{js,cjs}"
            ],
            "parserOptions": {
                "sourceType": "script"
            }
        }
    ],
    "parserOptions": {
        "ecmaVersion": "latest",
        "project": "./tsconfig.json"
    },
    "rules": {
        "prettier/prettier": "error"
    }
}

```
# Husky安装和配置
```sh
# 安装 Husky和commitlint 
npm install --save-dev @commitlint/cli @commitlint/config-conventional husky

# 创建git仓库
git init

# 可修改分支名
git branch -m 旧名字 新名字

# 初始化 Husky
npx husky install
```
创建一个名为 commitlint.config.js 的文件，内容如下：
```js
module.exports = {extends: ['@commitlint/config-conventional']};
```

提交前检查代码风格和提交格式：
```sh
npx husky add .husky/pre-commit "npm run lint"
npx husky add .husky/commit-msg 'npx --no-install commitlint --edit $1'
```
# 修改tsconfig.json
可根据需要灵活配置

## 启用`@`表示src目录
tsconfig.json需添加设置
```json
{
    ...
    "baseUrl": "./",  
    "paths": {
      "@/*": ["src/*"]
    }, 
    ...
}
```
执行`npm install tsconfig-paths`

# 修改package.json
将scripts修改为
```json
"scripts": {
    "build": "tsc",
    "start": "node dist/index.js",
    "dev": "ts-node -r tsconfig-paths/register src/index.ts",
    "debug": "node --inspect-brk dist/index.js",
    "lint": "eslint ./src --ext .ts --fix",
    "format": "prettier --write ./src",
    "prepare": "husky install"
},
```

# 设置vscode调试
可参考以下的launch.json
```json
{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "program": "${workspaceFolder}/src/index.ts",
            "sourceMaps": true,
            "runtimeArgs": ["-r", "ts-node/register", "-r", "tsconfig-paths/register"],
            "outFiles": [
                "${workspaceFolder}/**/*.js"
            ],
            "console": "integratedTerminal"
        }
    ]
}
```