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

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

  • 准备工作
  • 初始化项目
  • Eslint安装和配置
  • Prettier安装和配置
  • 在Eslint中使用Prettier插件
  • Husky安装和配置
  • 修改tsconfig.json
    • 启用`@`表示src目录
  • 修改package.json
  • 设置vscode调试

仓库地址

准备工作

确保已经安装了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'

修改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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/57314.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

docker高级(redis集群三主三从)

1. 新建6个docker容器redis实例 docker run -d --name redis-node-1 --net host --privilegedtrue -v /redis/share/redis-node-1:/data redis:6.0.8 --cluster-enabled yes --appendonly yes --port 6381docker run -d --name redis-node-2 --net host --privilegedtrue -v /…

在 Windows 下使用 conda 的一些注意点

之前一直使用 MacOS 或者 Ubuntu 作为开发环境&#xff0c;最近因为某些特殊原因需要转为使用 Window 作为开发环境。遇到的第一个问题就是不同开发工具的多环境管理。本文是关于 Windows 下使用 conda 的一些记录&#xff0c;关于如何在 Linux 做多环境管理&#xff0c;可以参…

Linux驱动开发:技术、实践与Linux的历史

一、引言 Linux&#xff0c;这个开源的操作系统&#xff0c;已经在全球范围内赢得了开发者和企业的广泛支持。它的强大之处在于其内核以及无数的驱动程序&#xff0c;这些驱动程序使得各种硬件设备可以在Linux操作系统上运行。本篇文章将深入探讨Linux驱动开发&#xff0c;包括…

JVM 访问对象的两种方式

Java 程序会通过栈上的 reference 数据来操作堆上的具体对象。由于 reference 类型在《Java 虚拟机规范》里面只规定了它是一个指向对象的引用&#xff0c;并没有定义这个引用应该通过什么方式去定位、访问到堆中对象的具体位置&#xff0c;所以对象访问方式也是由虚拟机实现而…

酒店资产如何管理提升资产利用效率

酒店资产管理系统是一种专门为酒店行业设计的管理软件&#xff0c;可以帮助酒店实现资产的全生命周期管理。一个好的酒店资产管理系统应该具备以下功能&#xff1a;  资产登记&#xff1a;可以对酒店的各种资产进行登记&#xff0c;包括房间、家具、设备等&#xff0c;记录资…

EasyExcel+POI制作带有有效性校验及下拉联动的Excel模板

文章目录 1.背景2.实现功能的Excel特性2.1.特性介绍2.2.下拉框联动2.3.单元格自动匹配Id2.4.错误提示 3.代码实现3.1.基础流程代码3.2.名称管理器配置3.3.有效性配置3.4.函数填充3.5.其他补充 4.总结 1.背景 最近在做一个CRM系统的人员销售目标导入的相关需求&#xff0c;需要…

初试Eureka注册中心

Eureka是spring cloud中的一个负责服务注册与发现的组件。遵循着CAP理论中的A(可用性)P(分区容错性)。一个Eureka中分为eureka server和eureka client。其中eureka server是作为服务的注册与发现中心。 搭建eureka服务 引入eureka依赖 引入SpringCloud为eureka提供的starter依…

Day48|leetcode 198.打家劫舍、213.打家劫舍II、打家劫舍|||

leetcode 198.打家劫舍 题目链接&#xff1a;198. 打家劫舍 - 力扣&#xff08;LeetCode&#xff09; 视频链接&#xff1a;动态规划&#xff0c;偷不偷这个房间呢&#xff1f;| LeetCode&#xff1a;198.打家劫舍_哔哩哔哩_bilibili 题目概述 你是一个专业的小偷&#xff0c;…

最小化安装移动云大云操作系统--BCLinux-for-Euler-22.10-everything-x86_64-230316版

CentOS 结束技术支持&#xff0c;转为RHEL的前置stream版本后&#xff0c;国内开源Linux服务器OS生态转向了开源龙蜥和开源欧拉两大开源社区&#xff0c;对应衍生出了一系列商用Linux服务器系统。BCLinux-for-Euler-22.10是中国移动基于开源欧拉操作系统22.03社区版本深度定制的…

【微服务】06-安全问题

文章目录 1.反跨站请求伪造1.1 攻击过程1.2 攻击核心1.3 如何防御1.4 使用AntiforgeryToken机制来防御用到的类 2. 防开发重定向共计2.1 攻击过程2.2 攻击核心2.3 防范措施 3.防跨站脚本3.1 攻击过程3.2 防范措施 4.跨域请求4.1 同源与跨域4.2 CORS过程4.2 CORS是什么4.3 CORS请…

perl send HTTP Request

perl send HTTP Request 使用Perl进行发送HttP请求 use LWP::UserAgent; use HTTP::Request; use HTTP::Headers; use JSON::PP;my $test_url "htttp://127.0.0.1:8080/update/";sub sendHttp{my $user_agent LWP::UserAgent->new(timeout>60);my ($url, $…

<C++> SSE指令集

SSE指令集 include库 #include <mmintrin.h> //MMX #include <xmmintrin.h> //SSE(include mmintrin.h) #include <emmintrin.h> //SSE2(include xmmintrin.h) #include <pmmintrin.h> //SSE3(include emmintrin.h) #include <tmmintrin.h> /…

Android安卓增加应用读写权限

Android安卓增加读写权限 当在你的 Android 应用中需要访问设备上的敏感数据、执行危险操作或与设备资源交互时&#xff0c;你需要在应用清单文件中声明权限&#xff0c;以及在运行时请求并处理这些权限。以下是详细的说明&#xff1a; 1. 在清单文件中声明权限&#xff1a; …

Python 各种格式文件转换

Python 各种格式文件转换 txt文本文件csv文件xml文件html文件json文件yaml文件properties文件ini/cfg文件xml文件 一、CSV 写入csv文件 import csv villains [[Doctor, No],[Rosa, Klebb],[Mister, Big],[Auric, Goldfinger],[Ernst, Blofeld] ] with open(villains, wt) …

Zabbix 5.0 媒体介质 邮箱配置例子

QQ企业邮箱 参考&#xff1a;zabbix 腾讯企业邮箱配置图_harveymomo的博客-CSDN博客

Linux下的系统编程——vim/gcc编辑(二)

前言&#xff1a; 在Linux操作系统之中有很多使用的工具&#xff0c;我们可以用vim来进行程序的编写&#xff0c;然后用gcc来生成可执行文件&#xff0c;最终运行程序。下面就让我们一起了解一下vim和gcc吧 目录 一、vim编辑 1.vim的三种工作模式 2.基本操作之跳转字符 &a…

代理模式之静态代理

代理模式是一种常见的设计模式&#xff0c;它允许一个对象&#xff08;代理对象&#xff09;代表另一个对象&#xff08;真实对象&#xff09;进行操作。在软件开发中&#xff0c;代理模式被广泛应用于各种场景&#xff0c;例如网络请求的代理、权限控制的代理等。 静态代理是…

无法正常访问服务器

网络原因&#xff0c;本地网络&#xff1a;解决办法&#xff1a;检查本地网络是否正常&#xff0c;访问外网是否流畅。机房网络&#xff1a;通过路由追踪查看是否中间有 节点不通&#xff0c;确定是线路出现丢包。 远程连接&#xff0c;检查远程连接是否启用以及远程计算机上的…

无涯教程-机器学习 - 箱形图函数

Box和Whisker图(也简称为boxplots)是另一种有用的技术&#xff0c;可用于检查每个属性的分布情况。以下是此技术的特点- 它本质上是单变量的&#xff0c;总结了每个属性的分布。它为中间值(即中位数)画一条线。它将在25&#xff05;和75&#xff05;周围绘制一个框。它还会绘制…

UE4/5在蓝图细节面板中添加函数按钮(蓝图与c++的方法)

目录 在细节面板中添加按钮使用函数 蓝图的方法 事件 函数 效果 uec的方法 效果 在细节面板中添加按钮使用函数 很多时候&#xff0c;我们可以看到一些插件的actor类中&#xff0c;点击一下之后就可以实现如矩阵一样的效果。 实际上是因为其使用了函数来修改了蓝图中的数…