webstorm如何配置typescript自动转换你必须知道~

·  阅读 3119

1、首先安装node环境,npm(此处简写,请自行查找如何安装node环境)

进入cmd,输入node -v,npm -v查看是否看装成功


2、安装typescript tslint

npm install typescript -g//-g 表示全局安装,安装路径均可

npm install tslink -g


3、打开webstorm创建一个项目,然后创建一个ts.json


创建好的tsconfig.json(当然你可以修改名字)打开之后是这样的,最好放到项目的根目录下(当然位置任意,不过你得记得,下边有用到)

4、打开webstorm -> file -> settings -> Tools -> file wathers点击右侧的+号,创建一个watchers


下边是打开之后的一些配置项,name:TypeScript,其他的如下图,重点关注红框之内的内容

Program:这个是你的node的安装目录下的\tsc.cmd

注:

     1、如果这个文件没有,在nodejs文件下创建也可以,

     2、如果不知道node安装在那个路径下,windows可以打开黑窗口输入where node

Arguments:--sourcemap --target "ES5"

Output paths to refresh:$FileNameWithoutExtension$.js:$FileNameWithoutExtension$.js.map

Working directory:$FileDir$

5、然后打开webstorm -> file -> settings ->Language & Frameworks -> TypeScript -> TSlint

按下图配置


保存即可

6、到此,配置的地方已经全部结束,接下来我们创建一个ts文件试以下



ok,完美~


分类:
阅读
标签:
收藏成功!
已添加到「」, 点击更改