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

news/2024/7/5 3:35:06

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://lihuaxi.xjx100.cn/news/1475335.html

相关文章

SpringCloud学习笔记(四)_ZooKeeper注册中心

基于Spring Cloud实现服务的发布与调用。而在18年7月份,Eureka2.0宣布停更了,将不再进行开发,所以对于公司技术选型来说,可能会换用其他方案做注册中心。本章学习便是使用ZooKeeper作为注册中心。 本章使用的zookeeper版本是 3.6…

STM32 进不了main 函数

1. 我用的是STM32L151C8T6 的芯片,在github 上找了个别人的例程,拿来当模板改,由于他用的是HSE 外部晶振,我用的是内部晶振HSI,所以需要改系统时钟,改完后debug, 一直进不了main 函数&#xff0…

Diffusion Models for Time Series Applications: A Survey

Diffusion Models for Time Series Applications: A Survey (Paper reading) Lequan Lin, The University of Sydney Business School, arXiv2023,Cited:5, Code, Paper 1. 引言 扩散模型是一类基于深度学习的生成模型,在前沿的机器学习研究中变得越来越突出。在…

Nebula基础的查询操作介绍

Nebula基础的查询操作介绍 这里只是对Nebula基础查询进行介绍,其目的是为了让未接触过Nebula的同学最短时间了解其语句。更详细更准确的内可以查看官方文档。 docs.nebula-graph 关于查询这里并没有使用官方例子数据,而是自己实际尝试了文档中的语句。 …

CTFshow 限时活动 红包挑战9 详细题解

CTFshow红包挑战9 题目源码开源了。源码如下&#xff1a; common.php <?phpclass user{public $id;public $username;private $password;public function __toString(){return $this->username;}}class cookie_helper{private $secret "*************"; /…

html5提供的FileReader是一种异步文件读取文件中的数据

前言&#xff1a;FileReader是一种异步文件读取机制&#xff0c;结合input:file可以很方便的读取本地文件。 input:file 在介绍FileReader之前&#xff0c;先简单介绍input的file类型。 <input type"file" id"file"> input的file类型会渲染为一个按…

C++ 网络编程项目fastDFS分布式文件系统(六)--qt(client)+login

目录 1. 登录和注册协议 1.1 注册协议 1.2 登录协议 2. 单例模式 1. 登录和注册协议 1.1 注册协议 # URL http://192.168.1.100:80/reg # post数据格式 { userName:xxxx, nickName:xxx, firstPwd:xxx, phone:xxx, email:xxx } 2. 服务器端 - Nginx 服务器端的配置。 loc…

【开发】tips:视频汇聚/视频云存储/视频监控管理平台EasyCVR如何提升网络稳定

安防视频监控/视频集中存储/云存储/磁盘阵列EasyCVR平台可拓展性强、视频能力灵活、部署轻快&#xff0c;可支持的主流标准协议有国标GB28181、RTSP/Onvif、RTMP等&#xff0c;以及支持厂家私有协议与SDK接入&#xff0c;包括海康Ehome、海大宇等设备的SDK等。平台既具备传统安…