webstorm配置scss、typescript等自动编译方式

项目中使用了scss、typescript时，需要配置其实时编译成原生js、css文件，才能在浏览器中实现查看效果，进行调试，那么使用webstorm如何配置呢
1.首先要全局安装对应的工具

npm i typescript -g
npm i node-sass -g

2. 依次打开 setting > tools > file Watchers，界面大致如下图：
   

3. 打开之后选择要编译的文件类型，如scss
   
   注意，配置typescript时可能找不到typescript，此时可以先择最顶上的custom选项，即进行自定义

4. 选择之后，会弹出一个窗口：
   
   在这个窗口里有两项需要调整，我已经用红框标出来了

5. Program中配置编译程序地址
   这里推荐使用cnpm全局安装，能够直接看到安装位置，如下图，我的安装位置如下。使用npm安装可以百度下npm全局包的默认下载路径
   
   6 Arguments中配置编译选项，粘贴我配置的scss与typescript,
   其中scss使用默认配置，typescipt配置了编译为es6及模块引用方式

scss

$FileName$ $FileNameWithoutExtension$.css

typescript

--target "ES6" --moduleResolution "Node" $FileName$ $FileNameWithoutExtension$.css