要在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
进行自动重新运行。