webstrom 自动编辑 typescript

1.安装

npm install -g typescript
测试安装是否成功： tsc -v

2.创建测试ts文件，在webstrom中打开

image.png

3.创建tsconfig.json文件

{
  "compilerOptions": {
    "module": "commonjs",
    "noImplicitAny": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "sourceMap": true
  },
  "files": [
    "core.ts",
    "sys.ts",
    "types.ts",
    "scanner.ts",
    "parser.ts",
    "utilities.ts",
    "binder.ts",
    "checker.ts",
    "emitter.ts",
    "program.ts",
    "commandLineParser.ts",
    "tsc.ts",
    "diagnosticInformationMap.generated.ts"
  ]
}

这里的配置是在官网上copy的

4. 设置webstrom配置 :

在webstrom编辑器中,打开 File > Settings > Tools > File Watchers，
添加typescript监听 ，如果没有typescript，可以点击右侧的“+”号新增

image.png

image.png

具体配置项：

Name:Typescript
File type : Typescript
Scope: All Places
Program:C:\Users\{用户}\AppData\Roaming\tsc.cmd
Arguments:--sourcemap --target "ES5"
Output paths to refresh:$FileNameWithoutExtension$.js:$FileNameWithoutExtension$.js.map

然后在 Settings > Languages & Frameworks > Typescript

image.png

勾选配置就可以啦
返回界面，编辑测试ts文件，可以看到会自动生成编译后的js文件

image.png

image.png