webstorm有那些好用的特性

Webstorm 是一个强大的前端开发 ide,大多数人使用 webstorm 的主要原因应该是它 NB 的智能提示功能。强大的智能提示只是它的一个功能特性,它还具有许多有用的特性,比如版本控制、本地历史、即时模板等。这里我列一下对我来说非常有用的功能。

Version Control - 版本控制

webstorm 集成了多种版本控制工具,基本的功能都可以使用,只是快捷键是个蛋疼的事情。
使用:如果项目已经有了版本控制相关的文件夹,比如 .git。在 project 或者 编辑器右键可以看到对应的菜单。如果有这些文件夹,但是没有出现版本控制的相关功能,可以到 Preferences 那里设置。 Preferences > Version Control。
Version ControlVersion Control

Local History - 本地历史

本地历史我觉得是非常有用的功能,他可以查看本地的修改历史,随时可以恢复某个时间的修改。用其他的版本控制工具只能比较提交的修改。
使用: 右键即可看到 local history 菜单, 选择某个版本,点击revert恢复
local historylocal history

Live Templates - 即时模板

live template 跟 Sublime text 的 snippet 类似,提供代码模板的功能,通过模板快速编写一些固定样式的代码。
使用:

  1. Webstorm > Preferences > Live Templates 打开设置。
  2. 点击右侧的添加按钮,添加一个 live template.
  3. 编写代码模板,abbreviation: 触发关键字,description: 智能提示框会出现的描述。点击输入框下面的Define可以选择触发这个模板的文件类型。右边是一些配置选项。
  4. 在编辑器中输入触发关键字,按 Tab 键可以看到生成的模板,继续按 Tab 可以修改模板的变量。
    live templatelive template

coffeescript

webstorm 支持coffeescript的即时编译、代码提示、代码跳转,代码调试等功能。
使用:

  1. 安装 nodejs 和 coffeescript
  2. 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 还要强大,让我非常欣慰。
使用:

  1. option + click 在点击处生成光标, esc 取消
  2. control + g 如果之前没有选择内容,则在相同的单词处生成光标,如果之前选择了内容,则在相同内容处生成光标,操作一次匹配一次。
    multi cursormulti cursor

代码格式化 - format code

很多时候,我们在网上找到的代码的格式比较乱,或者不符合我们项目的规范。webstorm 提供了代码格式化的功能,可以格式化一个文件,也可以格式化选择的内容。格式化的标准是按照 Preferences > Code Style 那里设置的代码格式。Code Style 可以设置全局默认的格式,也可以针对当前项目设置格式。
使用:

  1. 快捷键: option + commad + l
  2. 菜单:Code > Reformat Code

deployment 部署项目

webstorm 内置ftp支持,可以使用ftp将要部署的代码上传到服务器。
使用:

  1. 配置ftp,Tools > Deployment > Configuration. 右上角可以添加一个ftp服务器。Mappings 可以将本地目录和服务器目录相关联,deployment 时候直接将本地目录上传到对应的服务器路径。
  2. 配置好后,可以在编辑器中右键调出 deployment 菜单(只有 mappings 设置的本地路径下的文件才有这个菜单),这样可以上传单个文件,如果想上传某个目录的话,可以在 Project 那里选择一个文件夹,右键即可出现 deployment 菜单。
  3. 如果想看一下服务器的文件,可以使用 browse remote host. Tools > Deployment > Browse Remote Host
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值