# webstormConfigTypescript 

**Repository Path**: SuperWindcloud/webstorm-config-typescript

## Basic Information

- **Project Name**: webstormConfigTypescript 
- **Description**: 众所周知 WebStorm没有好的Typescript开发配置插件, 编译需要依赖终端, 这里给出几种配置方式, 可以在Nodejs环境中将Typescript文件编译成ESM模块并及时运行 (
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2024-08-13
- **Last Updated**: 2024-08-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: webstorm, Typescript-config, TypeScript, config, configuration

## README


#### 介绍
众所周知  WebStorm没有好的Typescript开发配置插件, 编译需要依赖终端, 这里给出几种配置方式, 可以在Nodejs环境中将Typescript文件编译成ESM模块并及时运行 (


## 首先ts-node默认是只支持 编译成CJS 模块, 编译ESM会报错  

### *所以要编译Typescript 需要使用额外的开源库比如  tsx , swc-node* 

- **第一种使用swc-code** 
     - 命令行 : pnpm install  @swc-node 安装后  

      node  --import  @swc-node/register/esm-register   ./yourTSfile.ts  编译成ESM
       node  --import  @swc-node/register     ./yourTSfile.ts  编译成CJS
       


   -  IDE官方插件Nodejs 


   ![输入图片说明](image.png)
   ![输入图片说明](image.png) 








#  **使用tsx 方法** 

- 安装 tsx 也可以局部安装 去掉 -g 
 >  pnpm install -g  tsx  
   
- 终端命令行 
*tsx   ./yourTsFile.ts* ( 这里编译之后的模块CJS还是ESM 是根据tsconfig.json 的compilerOptions 的 module属性判断 )  

- 插件方式可使用 Nodejs插件配置tsx路径  ,tsx支持ESM和CJS混合编译 ,推荐使用tsx 

![输入图片说明](image.png)