要在WebStorm中自动运行一个TypeScript的Hello World代码,可以按照以下步骤进行设置:

1. 创建Hello World代码

首先,创建一个TypeScript文件并编写Hello World代码:

  1. 在项目根目录的 src 文件夹中创建一个名为 index.ts 的文件(如果 src 文件夹不存在,请先创建它)。
  2. index.ts 文件中编写以下代码:
    1. console.log('Hello, World!');

2. 安装和配置 ts-node

ts-node 可以直接运行TypeScript代码,而无需先手动编译为JavaScript。

  1. 在项目根目录下运行以下命令来安装 ts-nodetypescript
    1. npm install ts-node typescript

3. 创建一个npm脚本

为了方便自动运行,可以在 package.json 文件中添加一个脚本来运行 index.ts 文件。

  1. 打开或创建 package.json 文件。
  2. 添加以下脚本到 scripts 部分:
    1. {
    2. "scripts": {
    3. "start": "ts-node src/index.ts"
    4. }
    5. }

4. 配置WebStorm中的运行/调试配置

为了在WebStorm中自动运行这个脚本,可以配置一个运行/调试配置:

  1. 打开 Run > Edit Configurations...
  2. 点击左上角的 + 按钮,选择 npm
  3. Name 字段中输入一个名称,例如 Run Hello World
  4. Package 字段中选择你的 package.json 文件。
  5. Command 字段中输入 start(这是我们在 package.json 中定义的脚本名称)。
  6. 点击 OK 保存配置。 setting

5. 自动运行脚本

现在可以通过以下方式自动运行你的TypeScript代码:

运行脚本

  1. 在WebStorm中点击右上角的运行/调试配置下拉菜单,选择 Run Hello World
  2. 点击绿色的运行按钮(带有三角形的按钮)来运行脚本。

设置自动运行(可选)

虽然WebStorm没有内置的自动运行功能,但你可以使用 nodemon 这样的工具来监听文件变化并自动重新运行脚本。

  1. 安装 nodemon
    1. npm install --save-dev nodemon
  2. package.json 中添加一个新的脚本来使用 nodemon 运行 ts-node
    1. {
    2. "scripts": {
    3. "start": "ts-node src/index.ts",
    4. "dev": "nodemon --exec ts-node src/index.ts"
    5. }
    6. }
  3. 在运行/调试配置中,按照上面的步骤创建一个新的 npm 配置,命名为 Dev Hello World,并在 Command 字段中输入 dev

  4. 选择 Dev Hello World 配置并点击运行按钮。现在,当你修改 src/index.ts 文件时,nodemon 会自动重新运行你的代码。

通过以上步骤,你已经成功配置了WebStorm在每次启动时自动运行你的TypeScript Hello World代码,并且可以选择使用 nodemon 进行自动重新运行。