常用快捷键

    1. ctrl + shift + n: 打开工程中的文件,目的是打开当前工程下任意目录的文件。
    1. ctrl + j: 输出模板
    1. ctrl + b: 跳到变量申明处
    1. ctrl + alt + T: 围绕包裹代码(包括zencoding的Wrap with Abbreviation)
    1. ctrl + []: 匹配 {}[]
    1. ctrl + F12: 可以显示当前文件的结构
    1. ctrl + x: 剪切(删除)行,不选中,直接剪切整个行,如果选中部分内容则剪切选中的内容
    1. alt + left/right:标签切换
    1. ctrl + r: 替换
    1. ctrl + shift + up: 行移动
    1. shift + alt + up: 块移动(if(){},while(){}语句块的移动)
    1. ctrl + d: 行复制
    1. ctrl + shift + ]/[: 选中块代码
    1. ctrl + / : 单行注释
    1. ctrl + shift + / : 块注释
    1. ctrl + shift + i : 显示当前CSS选择器或者JS函数的详细信息
    1. ctrl + ‘-/+’: 可以折叠项目中的任何代码块,它不是选中折叠,而是自动识别折叠。
    1. ctrl + ‘.’: 折叠选中的代码的代码。
    1. shift + esc: 当前激活的任意小窗口最小化,也可以是alt+数字键,数字在小窗口有显示。
    1. alt + ‘7’: 显示当前的函数结构。
    1. 如果是 *.html 页面,则在文件名下的导航栏某DOM结构上右键,可以全选当前DOM结构。
    1. ctrl + shift + u:大小写转换

Webstorm+Chrome实时调试页面

  1. 安装Chrome插件:JetBrains IDE Support
  2. WebStorm -> File -> Settings,按下图操作:

  3. 设置WebStorm监听端口:在WebStorm安装目录(如 C:\Program Files (x86)\JetBrains\WebStorm 6.0.2\bin)下找到 WebStorm.exe.vmoptions,增加下面一行, 这里 53342, 你可以改成你想要的,但是网上好像有说端口大于多少会监听失败:
    -Drpc.port=53342

  4. Chrome 的扩展也修改成一样的端口配置,右击“JB”图标,选择“选项”:

    然后修改端口号,点击 Apply :

  5. 重启WebStorm, “JB”的插件按钮就会亮起来,点击debug图标后可以看到已经连接到JB:

    此时在Chrome中打开网页后,在WebStorm中修改网页可实时在Chrome中看到效果:(“JetBrain IDE Support正在调试此标签页”这个黄条不可关掉,关掉了就无法实时更新界面了)

![](http://johnnyimages.qiniudn.com/webstorm-debug.png)

LESS

以下提供三种方法,建议使用第二种方法[配置watcher]。

  1. 配置less

    See http://blog.sina.com.cn/s/blog_4ba2c6a201013z51.html

    我的设置:File -> Settings -> External Tools

    _Parameter: C:\Windows\System32\nodemodules\less\bin\lessc $FilePath$ ..\css\$FileNameWithoutExtension$.css

  2. 配置watcher

    See http://www.cnblogs.com/enix/archive/2013/06/07/3123899.html

    下载并安装nodejs http://nodejs.org/

    安装less:

    npm install less
    

    设置 WebStore File/Setting/fire watchers/ 添加 less

如果不需要调整输出目录的话,按缺省设置即可。WebStorm 会自动识别 lessc.cmd 所在的目录,不需要我们手工输入。

如:

    Program:C:\Program Files\nodejs\node.exe
    Parameters:"C:\Users\Victor\node_modules\less\bin\lessc" $FileName$ ..\css\$FileNameWithoutExtension$.css
    Working directory:$FileDir$
    Output paths:$FileNameWithoutExtension$.css
  1. 自动编译less文件:

    See http://5310331.blog.51cto.com/5300331/1181332

让 WebStorm 支持热部署 NodeJS

See 让WebStorm支持热部署NodeJS - IDE - Hylin’s Blog

我们知道nodejs原生是不支持热部署的,即每次js代码的修改都需要重启服务器。在开发中无疑浪费不少时间,好在nodejs有众多的组件可以实现热部署,比如forever,node-dev。我使用node-dev来集成到webstorm中,以实现在webstorm中修改代码,不用点击重新运行node服务器就可以访问到修改效果。

首先,使用npm安装node-dev,注意使用-g参数,让node-dev全局生效。

npm install -g node-dev

然后进入webstorm的run configurations进行配置

接着在node parameters中填入node-dev组件目录的位置,注意,需要加上双引号。

点击确定后,配置完成,此时启动node服务器,修改一下js代码,不用再点击重启按钮,访问浏览器即可看到修改效果了。

update:

最新发现,该方式会导致webstorm的断点调试功能失效,请慎用,找到解决办法再更新。

Browserify

相关安装

npm install -g browserify
npm install deamdify(可选)
npm install deglobalify(可选)

添加 File Watcher

在 WebStorm 中打开 File -> Settings,搜索 “File Watchers” ,然后添加一个自定义 watcher(如下图):

设置 File Watcher

通用设置:

  • Name browserify
  • Description browserify
  • Immediate file synchronization

    • 选中,可实时监测文件变化,一旦监测到文件变化,就会启动以下设置的 browserify 编译。
    • 不选中,当保存文件或者焦点不在 WebStorm 时,启动以下设置的 browserify 编译。
  • File type JavaScript files

    点击旁边的“…”,打开设置窗口:
    
    ![](http://johnnyimages.qiniudn.com/webstorm-browserify-file-type.png)
    
    ![](http://johnnyimages.qiniudn.com/webstorm-browserify-name.png)
    
    ![](http://johnnyimages.qiniudn.com/webstorm-browserify-scope.png)
    
    Pattern:file:js/jpos-lib/JPOS//*||file:js/hermes//*
    

直接使用 browserify 命令的设置:

  • Program C:\Users\你的用户名\AppData\Roaming\npm\browserify.cmd
  • Arguments browserify 命令,可根据实际需要填写。

    如:

    -t deamdify -t deglobalify main.js -o allbundle.js --standalone main --debug。
    

    注意:Arguments 中的输出文件(如 allbundle.js)不能生成在上面设置的 Scope 里,否则在文件修改的时候,输出文件(allbundle.js)会因为 browserify 的自动编译也被修改,于是触发了死循环,会无限生成下去。

  • Working directory 设置成 Arguments 中的入口文件(如 main.js)所在的路径。

    比如我的工程路径是这样的:

    我的 Working directory 设置成:$ProjectFileDir$\js\jpos-lib

  • 最终设置完成的 File Watcher

WebStorm 配置 Jade File Watcher

  • Program: $ProjectFileDir$\node_modules.bin\jade.cmd
  • Arguments: $FileName$ –pretty
  • Working directory: $FileDir$
  • Output path to refresh: $FileNameWithoutExtension$.html

FAQ

设置 WebStorm 不自动保存

默认 WebStorm 在修改代码时会自动实时保存,可能会导致机子很卡,可以设置不自动保存:

File -> setting -> General -> Synchronization 里面

放大代码

IDE Settings -> Editor -> Change font size(Zoom) with Command+Mouse Wheel

启动 WebStorm 若出现

请执行安装目录下(通常为“C:\Program Files (x86)\JetBrains\WebStorm 7.0.3\bin”)的“WebStorm.bat”。
参考网址:https://intellij-support.jetbrains.com/entries/23393413-The-JVM-could-not-be-started-The-main-method-may-have-thrown-an-exception

unresolved function or method require()

Go to Settings -> JavaScript -> Libraries -> Check “Node.js Globals”

See javascript - Need workaround to make WebStorm’s autocompletion capable to resolve third party module methods - Stack Overflow

How can I get WebStorm to recognize Jasmine methods?

  1. Open File > Settings…
  2. Select JavaScript > Libraries
  3. Click on Download…
  4. Swich to TypeScript community stubs
  5. Find karma-jasmine (originally under the name jasmine)
  6. Click on Download and Install

See How can I get WebStorm to recognize Jasmine methods? - Stack Overflow

Tutorial