Nodejs+Typescript+Eslint+Prettier+Husky项目构建-Toy模板网

这篇具有很好参考价值的文章主要介绍了Nodejs+Typescript+Eslint+Prettier+Husky项目构建。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

仓库地址

准备工作

确保已经安装了git以及Node.js和npm，通过git -v、node -v和npm -v检查是否安装。

初始化项目

# 进入你的目录
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安装和配置

# 安装 ESLint
npm install --save-dev eslint

# 初始化 ESLint 配置
npx eslint --init

根据情况选择配置：

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安装和配置

首先，安装 Prettier，在项目目录中，运行

npm install --save-dev prettier

创建一个 .prettierrc 文件来配置 Prettier。你可以在这个文件中设置你的格式化选项，例如：

{
	"semi": true,
	"singleQuote": true,
	"tabWidth": 4
}

在Eslint中使用Prettier插件

安装 eslint-plugin-prettier 和 eslint-config-prettier

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

编辑.eslintrc.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安装和配置

# 安装 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 的文件，内容如下：

module.exports = {extends: ['@commitlint/config-conventional']};

提交前检查代码风格和提交格式：

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需添加设置

{
    ...
    "baseUrl": "./",  
    "paths": {
      "@/*": ["src/*"]
    }, 
    ...
}

执行npm install tsconfig-paths

修改package.json

将scripts修改为

"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文章来源地址https://www.toymoban.com/news/detail-676471.html

{
    "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"
        }
    ]
}