要在WebStorm中自动运行一个TypeScript的Hello World代码,可以按照以下步骤进行设置:
1. 创建Hello World代码
首先,创建一个TypeScript文件并编写Hello World代码:
- 在项目根目录的 
src文件夹中创建一个名为index.ts的文件(如果src文件夹不存在,请先创建它)。 - 在 
index.ts文件中编写以下代码:console.log('Hello, World!');
 
2. 安装和配置 ts-node
ts-node 可以直接运行TypeScript代码,而无需先手动编译为JavaScript。
- 在项目根目录下运行以下命令来安装 
ts-node和typescript:npm install ts-node typescript
 
3. 创建一个npm脚本
为了方便自动运行,可以在 package.json 文件中添加一个脚本来运行 index.ts 文件。
- 打开或创建 
package.json文件。 - 添加以下脚本到 
scripts部分:{"scripts": {"start": "ts-node src/index.ts"}}
 
4. 配置WebStorm中的运行/调试配置
为了在WebStorm中自动运行这个脚本,可以配置一个运行/调试配置:
- 打开 
Run>Edit Configurations...。 - 点击左上角的 
+按钮,选择npm。 - 在 
Name字段中输入一个名称,例如Run Hello World。 - 在 
Package字段中选择你的package.json文件。 - 在 
Command字段中输入start(这是我们在package.json中定义的脚本名称)。 - 点击 
OK保存配置。
 
5. 自动运行脚本
现在可以通过以下方式自动运行你的TypeScript代码:
运行脚本
- 在WebStorm中点击右上角的运行/调试配置下拉菜单,选择 
Run Hello World。 - 点击绿色的运行按钮(带有三角形的按钮)来运行脚本。
 
设置自动运行(可选)
虽然WebStorm没有内置的自动运行功能,但你可以使用 nodemon 这样的工具来监听文件变化并自动重新运行脚本。
- 安装 
nodemon:npm install --save-dev nodemon
 - 在 
package.json中添加一个新的脚本来使用nodemon运行ts-node:{"scripts": {"start": "ts-node src/index.ts","dev": "nodemon --exec ts-node src/index.ts"}}
 在运行/调试配置中,按照上面的步骤创建一个新的
npm配置,命名为Dev Hello World,并在Command字段中输入dev。选择
Dev Hello World配置并点击运行按钮。现在,当你修改src/index.ts文件时,nodemon会自动重新运行你的代码。
通过以上步骤,你已经成功配置了WebStorm在每次启动时自动运行你的TypeScript Hello World代码,并且可以选择使用 nodemon 进行自动重新运行。
