Webstorm 是一个强大的前端开发 ide,大多数人使用 webstorm 的主要原因应该是它 NB 的智能提示功能。强大的智能提示只是它的一个功能特性,它还具有许多有用的特性,比如版本控制、本地历史、即时模板等。这里我列一下对我来说非常有用的功能。
Version Control - 版本控制
webstorm 集成了多种版本控制工具,基本的功能都可以使用,只是快捷键是个蛋疼的事情。
使用:如果项目已经有了版本控制相关的文件夹,比如 .git。在 project 或者 编辑器右键可以看到对应的菜单。如果有这些文件夹,但是没有出现版本控制的相关功能,可以到 Preferences 那里设置。 Preferences > Version Control。
Version Control
Local History - 本地历史
本地历史我觉得是非常有用的功能,他可以查看本地的修改历史,随时可以恢复某个时间的修改。用其他的版本控制工具只能比较提交的修改。
使用: 右键即可看到 local history 菜单, 选择某个版本,点击revert恢复
local history
Live Templates - 即时模板
live template 跟 Sublime text 的 snippet 类似,提供代码模板的功能,通过模板快速编写一些固定样式的代码。
使用:
- Webstorm > Preferences > Live Templates 打开设置。
- 点击右侧的添加按钮,添加一个 live template.
- 编写代码模板,abbreviation: 触发关键字,description: 智能提示框会出现的描述。点击输入框下面的Define可以选择触发这个模板的文件类型。右边是一些配置选项。
- 在编辑器中输入触发关键字,按 Tab 键可以看到生成的模板,继续按 Tab 可以修改模板的变量。
live template
coffeescript
webstorm 支持coffeescript的即时编译、代码提示、代码跳转,代码调试等功能。
使用:
- 安装 nodejs 和 coffeescript
- Preferences > File Watchers 添加coffeescript的watcher。
其实安装了coffeescript的话,webstorm 会有提示问你要不要添加watcher的,点击 add watcher 会自动启用的。出来 coffeescript, webstorm 还支持很多种 watcher,比如 less 、sass、stylus 等。
Node.js 支持
webstorm 支持 Node.js 调试。具体设置看:使用 webstom 调试 node js 程序
目录设置 - Directories
项目目录一般会有一些我们开发过程中不需要的文件夹,这些目录有时候特别碍眼,查找的时候也查找他目录下的文件。设置 Directories 可以将这种目录排除掉,而且在 Project 那里会看不到这个目录。
使用:选择一个文件夹,右键, Mark Directory As > Exclude, 可以在 Preferences > Directories 那里设置,那里还可以将之前排除掉的文件夹恢复。
多光标
用 sublime text 的时候,我非常喜欢这个功能,但是在 webstorm 8 之前,webstorm 是不支持的。现在 webstorm 8 支持了这个功能,而且比 sublime text 还要强大,让我非常欣慰。
使用:
- option + click 在点击处生成光标, esc 取消
- control + g 如果之前没有选择内容,则在相同的单词处生成光标,如果之前选择了内容,则在相同内容处生成光标,操作一次匹配一次。
multi cursor
代码格式化 - format code
很多时候,我们在网上找到的代码的格式比较乱,或者不符合我们项目的规范。webstorm 提供了代码格式化的功能,可以格式化一个文件,也可以格式化选择的内容。格式化的标准是按照 Preferences > Code Style 那里设置的代码格式。Code Style 可以设置全局默认的格式,也可以针对当前项目设置格式。
使用:
- 快捷键: option + commad + l
- 菜单:Code > Reformat Code
deployment 部署项目
webstorm 内置ftp支持,可以使用ftp将要部署的代码上传到服务器。
使用:
- 配置ftp,Tools > Deployment > Configuration. 右上角可以添加一个ftp服务器。Mappings 可以将本地目录和服务器目录相关联,deployment 时候直接将本地目录上传到对应的服务器路径。
- 配置好后,可以在编辑器中右键调出 deployment 菜单(只有 mappings 设置的本地路径下的文件才有这个菜单),这样可以上传单个文件,如果想上传某个目录的话,可以在 Project 那里选择一个文件夹,右键即可出现 deployment 菜单。
- 如果想看一下服务器的文件,可以使用 browse remote host. Tools > Deployment > Browse Remote Host