Nodejs+Typescript+Eslint+Prettier+Husky项目构建
- 准备工作
- 初始化项目
- Eslint安装和配置
- Prettier安装和配置
- 在Eslint中使用Prettier插件
- Husky安装和配置
- 修改package.json
准备工作
确保已经安装了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'
修改package.json
将scripts修改为
"scripts": {
"build": "tsc",
"start": "node dist/index.js",
"dev": "ts-node src/index.ts",
"debug": "node --inspect-brk dist/index.js",
"lint": "eslint ./src/** --ext .ts --fix",
"format": "prettier --write ./src/**",
"prepare": "husky install"
},