Webstrom 常用操作记录

WebStorm 编译 es6 与 scss 的教程：

http://blog.jetbrains.com/webstorm/2015/05/ecmascript-6-in-webstorm-transpiling/
https://www.jetbrains.com/webstorm/help/transpiling-sass-less-and-scss-to-css.html

*****************************************  File Watcher  ***********************************************************

File Watcher 只在文件改变的时候触发，但也可以用这种方式手动触发：

1. 选中你要执行 File Watcher 的文件/文件夹（一般是项目根目录）
2. 选择 Help | Find Action
3. 在搜索框中输入 run file w，此时出来的第一个选项就是 Run File Watcher
4. 点击它，WebStorm 就会对你选中的文件/文件夹执行这些 watchers

你也可以给这个动作分配一个自定义的快捷键，见这里。

新建 Watcher 的时候，WebStrom 的默认设置就已经能运行了，但还是推荐将 Show Console 设为 Never，否则每次编辑文件到一半就会弹出一个语法错误的消息。

WebStorm 默认的 Scss File Watcher 配置需要改进一下：

• 默认的配置不会将生成的 source map 与对应的 .scss 文件归为一组，需要在 Output paths to refresh 选项后面加上一段 :$FileNameWithoutExtension$.css.map，变成 $FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map
• Windows 用户使用的时候，若文件里包含中文则会遇到 Invalid GBK character "xE8" on line 1 的错误，解决方法是在每个文件第一行加上 @charset "utf-8";
• 去掉Track only root files的勾，否则编辑以下划线开头的.scss文件时，引用了这个文件的那些文件不会被重新编译。