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

news/2025/1/17 21:46:22/

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

  • 准备工作
  • 初始化项目
  • Eslint安装和配置
  • Prettier安装和配置
  • 在Eslint中使用Prettier插件
  • Husky安装和配置
  • 修改package.json

准备工作

确保已经安装了git以及Node.js和npm,通过git -vnode -vnpm -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安装和配置

  1. 首先,安装 Prettier,在项目目录中,运行
npm install --save-dev prettier
  1. 创建一个 .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"},

http://www.ppmy.cn/news/1055948.html

相关文章

Flask狼书笔记 | 03_模板

文章目录 3 模板3.1 模板基本使用3.2 模板结构组织3.3 模板进阶 3 模板 模板(template):包含固定内容和动态部分的可重用文件。Jinja2模板引擎可用于任何纯文本文件。 3.1 模板基本使用 HTML实体:https://dev.w3.org/html5/htm…

FATE框架中pipline基础教程

目录 1. 用pipline上传数据2. 用 Pipeline 进行 Hetero SecureBoost 的训练和预测3. 用 Pipeline 构建神经网络模型3.1 Homo-NN Quick Start: A Binary Classification Task3.2 Hetero-NN Quick Start: A Binary Classification Task 4. 自定义数据集示例:实现一个简…

基于STM32+华为云设计的智慧农业灌溉系统【华为云IOT】

一、设计需求 基于STM32+华为云设计的智慧农业灌溉系统【华为云IOT】 【1】 项目背景 在生活智能化要求下,作为人类所从事的最持久的行业,也是人类社会文明基础的农业,并没有死气沉沉的,相反发展得如火如荼,智慧农业已经智能化时代的重要组成部分。智能农业充分利用了现代…

Android相机-HAL子系统

引言 应用框架要通过拍照预览摄像获得照片或者视频,就需要向相机子系统发出请求, 一个请求对应一组结果 一次可发起多个请求,并且提交请求是非阻塞的,始终按照接收的顺序以队列的形式先进先出地进行顺序处理 一个请求包含了拍摄和拍照配置的所有信息&…

AB测试可以用来测什么?不能测什么?

AB测试可以测什么: AB测试是常用的因果推断方法,可以用来检验新功能发版是否有效、策略上线是否有效。 有两个大方向的应用场景,一是产品迭代,二是策略优化。其中策略包括运营策略、算法策略等。 具体例子: 应用场景…

C++入门---vector常用函数介绍及使用

vector的介绍 vector是表示可变大小数组的序列容器。就像数组一样,vector也采用的连续存储空间来存储元素。也就是意味着可以采用下标对vector的元素进行访问,和数组一样高效。但是又不像数组,它的大小是可以动态改变的,而且它的大…

3211064 - 错误消息 AA634 出现在 T-cd AW01N 或 T-cd AFAR 中

症状 通过 T-cd AW01N 打开资产或在 T-cd AFAR 中重新计算资产值时,出现以下错误消息: AA634 在范围 01 中普通折旧的更正大于累计折旧 环境 SAP R/3SAP R/3 EnterpriseSAP ERP SAP ERP 中心组件SAP ERP 的 SAP 增强包SAP ERP(SAP HANA 版…

如何保证缓存和 MySQL 的双写一致 ?

1. 如何保证缓存和 MySQL 的双写一致 ? 什么叫做如何保证缓存和 MySQL 双写一致,这个问题就是指当应用程序执行写(增删改)操作时,如何保证 Redis 和 MySQL 的数据一致性。 当用户发送请求时,程序的执行流程…