文档章节

WebStorm常用功能的使用技巧分享

葡萄城技术团队
 葡萄城技术团队
发布于 2016/11/29 15:14
字数 881
阅读 875
收藏 58

WebStorm 是 JetBrain 公司开发的一款 JavaScript IDE,使用非常方便,可以使编写代码过程更加流畅。

本文在这里分享一些常用功能的使用技巧,希望能帮助大家更好的使用这款强大的 JavaScript 开发工具。

代码编辑

  • 代码跳转: Ctrl + 左键 或者 Ctrl + B,可以跳转到函数或者变量的声明位置
  • 调用位置: Alt + F7,查找调用者
  • 自动补全: 最好是修改一下响应时间,Settings->Editors->General->Code Completing: Autopopup in 0.
  • 打开文件: Ctrl + Shift + N
  • 打开类: Ctrl + N
  • 打开函数: Ctrl + F12
  • “超级”打开: 双击 shift,可以 search anywhere.
  • 复制整行: Ctrl + D
  • 删除整行: Ctrl + Y
  • 折叠当前块: Ctrl + “-”,折叠当前块以及子块: Ctrl + Alt + “-”,折叠全部块: Ctrl + Shift + “-”
  • 展开, 把折叠的快捷键换成”+”
  • 选择: Ctrl + W,会从小到大逐渐扩大。比如按一次,选中word,按两次,选择表达式, 三次, 整个函数

重构

  • 改名: Shift + F6,修改函数名,变量名,文件名,同时修改所有引用的位置.
  • 移动文件: F6, 并修改文件的引用位置, 包括 html 和 js文件
  • 抽取函数: Ctrl + Alt + M,整块代码抽取成函数
  • 抽取变量: Ctrl + Alt + V,当前选中抽取为变量
  • 移动整块代码: Ctrl + Shift + ↑↓
  • 包裹: Ctrl + Alt + T,外层包裹,比如 if、try catch等

Run & Debug

可以直接 Run & Debug NodeJS 脚本,也可以执行服务端脚本

NPM

View -> Tool Windows -> npm,可以打开 npm 快捷窗口

这里可以直接右键 update

可以双击执行 npm 命令

自动测试

可以在 IDE 中启动测试框架,比如 karma.

可以自动监控代码变化,自动运行测试脚本.

版本控制

本地代码控制

VCS -> Local history 可以列出本次 WebStorm 启动以后,所有的代码修改。

可以集成主流的版本控制工具, 如 git、mercurial、subversio 等

通过两个按钮, 即可完成 pull、update、merge、commit、push 的完整流程, 非常方便

通过 branch 管理工具,可以方便的切换 branch 工作,同时可以 create、close、merge 操作

Task

可以与主流的 Task 平台集成,可以自动拉取 Task,自动创建提交记录.

 

快捷键

通过 Ctrl + Shift + A,可以快速的通过关键字检索到相应的功能设置和快捷键。

这里是快捷键文档

 

格式化代码

快捷键: Ctrl + Shift + L

可以设置为 commit 前自动格式化

静态检查

可以集成主流静态检查工具

这里以 ESLint 为例

在 IDE 中可以启动对单个文件,或者整个工程的静态检查

新技术支持

支持最新技术,如 TypeScript CoffeeScript 最新版、 Angular2、ES6 ES7等,集成 Gulp、Grunt 等工具。

虚拟机参数

如果工程较大,强烈建议使用 64 位 jre,并修改虚拟机内存参数,根据本机物理内存尽量设置大。

 

本文只分享了一些个人常用的基本操作,更多 WebStorm 功能的使用技巧,期待能和大家一起探索。

学习 WebStorm 的使用技巧,可以帮助我们更好的开发前端项目。同时,在开发过程中,还可以借助一些开发工具,如Wijmo,这是一款大而全面的前端 HTML5 / JavaScript UI控件集,能为企业应用提供更加灵活的操作体验,现已全面支持Angular 2。

© 著作权归作者所有

共有 人打赏支持
葡萄城技术团队

葡萄城技术团队

粉丝 370
博文 519
码字总数 752973
作品 17
西安
高级程序员
私信 提问
加载中

评论(2)

苏甘霖
别的不多说,就问一个,NPM加多了包之后,node_modules目录里面文件太多,经常卡死,怎么解决?
设置目录exclued并没有什么卵用!!!
苦逼的前端
苦逼的前端
收藏了,我也在使用这个
安装和配置—Webstorm入门指南

WebStrom档案 用途:功能强大的前端专用IDE,拥有即时编辑(chrome)、自动完成、debugger、Zen Coding、HTML5 支持、JSLint、Less支持、CoffeeScript支持、Node.JS、单元测试、集成git和svn...

李长春
2012/11/08
0
2
WebStorm 9正式发布——优越而简单

WebStorm 9带了更多引人注目的新特性。包括支持目前最热门、最强大的开发框架及应用库。并在WebStorm 9集成新的工具和改进性能。这次WebStorm 9正式发布,集合之前测试版的信息,整体给开发者...

kouxunli1
2014/10/31
0
0
WebStorm 9 支持 Meteor

WebStorm 9 EAP 相关特性: WebStorm EAP is open! Live Edit updates in WebStorm 9 – What’s new? Tracing, debugging and profiling Node.js with spy-js JavaScript Postfix Completi......

oschina
2014/09/10
5.4K
7
WebStorm 2017.1 EAP 发布,JavaScript IDE

WebStorm 2017.1 EAP 发布了。WebStorm 是 JetBrains 推出的一款商业的 JavaScript 开发工具。 自从一个月前发布 WebStorm 2016.3 以来,WebStorm 主要专注于修补程序,但也设法在 WebStorm...

达尔文
2016/12/22
9.4K
10
前端开发利器 WebStorm 发布 2017.3.3 正式版本

WebStorm 2017.3.3 (173.4301.22) 已正式发布,与往常一样,可以使用 Toolbox App 安装此更新。如果使用的是 WebStorm 2017.3.1,2017.3.2 或 2017.3.3 EAP,将很快在 IDE 中看到更新通知。如...

局长
01/17
2.2K
10

没有更多内容

加载失败,请刷新页面

加载更多

js和OC交互

0.html+js 0.1html 代码 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #colordv{ width: 100px;......

walking_yxf
15分钟前
2
0
点播转码相关常见问题及排查方式

概述: 点播转码目前涉及用户上传自动触发转码、通过SubmitTranscodeJobs接口触发转码等方式,会出现用户转码失败的情况,这当中有用户源片的问题、也有用户设置转码参数的原因以及相关资源性...

阿里云官方博客
17分钟前
2
0
工作笔记

Oracle锁表 查找被锁的表 select l.session_id,o.owner,o.object_namefrom v$locked_object l,dba_objects owhere l.object_id=o.object_id; 查找引发锁表的会话 select s.username,s.si......

呼呼南风
19分钟前
2
0
并发工具优于wati、notify(69)

现在几乎没有理由在使用wait 和 notify,使用高级工具代替 java.util.concurrent 包并发工具分三类: Executor 框架 并发集合(concurrent Collection) 同步器(synchronizer) 并发集合 对...

Java搬砖工程师
26分钟前
2
0
AutoCAD_系统变量

https://baike.sogou.com/v53561514.htm?fromTitle=cad%E5%8F%98%E9%87%8F lunits 设置线性单位。1 科学 2 小数 3 工程 4 建筑 5 分数 6 windesk...

一个小妞
33分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部