webstorm如何配置typescript自動轉換你必須知道~

一、首先安裝node環境,npm(此處簡寫,請自行查找如何安裝node環境)node

進入cmd,輸入node -v,npm -v查看是否看裝成功web


二、安裝typescript tslinttypescript

npm install typescript -g//-g 表示全局安裝,安裝路徑都可npm

npm install tslink -gjson


三、打開webstorm建立一個項目,而後建立一個ts.jsonwindows


建立好的tsconfig.json(固然你能夠修更名字)打開以後是這樣的,最好放到項目的根目錄下(固然位置任意,不過你得記得,下邊有用到)webstorm

四、打開webstorm -> file -> settings -> Tools -> file wathers點擊右側的+號,建立一個watchersorm


下邊是打開以後的一些配置項,name:TypeScript,其餘的以下圖,重點關注紅框以內的內容cdn

Program:這個是你的node的安裝目錄下的\tsc.cmdblog

注:

     一、若是這個文件沒有,在nodejs文件下建立也能夠,

     二、若是不知道node安裝在那個路徑下,windows能夠打開黑窗口輸入where node

Arguments:--sourcemap --target "ES5"

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

Working directory:$FileDir$

五、而後打開webstorm -> file -> settings ->Language & Frameworks -> TypeScript -> TSlint

按下圖配置


保存便可

六、到此,配置的地方已經所有結束,接下來咱們建立一個ts文件試如下

ok,完美~
相關文章
相關標籤/搜索