文档章节

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

葡萄城技术团队
 葡萄城技术团队
发布于 2016/11/29 15:14
字数 881
阅读 851
收藏 57
点赞 2
评论 2

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。

© 著作权归作者所有

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

葡萄城技术团队

粉丝 320
博文 494
码字总数 706491
作品 13
西安
高级程序员
加载中

评论(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】前端工具开发利器webstrom专篇...更新中

【亲身实测】 WebStorm混搭svn WebStorm混搭nodeJS 以less和uglify-js为例 如何用npm在root中下载模块 【网络转帖】 webstorm简单介绍 官网地址:http://www.jetbrains.com/webstorm/feature...

呢喃的猫咪
2013/06/15
0
3
配置webstorm开发微信小程序

微信开发者工具虽然能编辑代码,可以实时预览,如果只用于临时调试代码是足够的,要是作为小程序的开发工具就很显得很弱鸡了,尤其是与功能强悍的webstorm对比,小程序自带的编辑器简直就是玩...

章鱼喵_
07/12
0
0
使用WebStorm进行javascript调试

曾经的选择是使用火狐浏览器的Firebug插件,具体的用法到时候在细说,这篇文章登场的是开发静态网页及javascript的利器--webstorm. 一.相关软件安装和配置   安装WebStorm   WebStorm官网...

java~nick
2017/07/15
0
0
WebStorm8.0.3 Live Edit与Google浏览器实时无刷新自动加载页面

在WebStorm8中是自带Live Edit功能的,只是默认没有开启; 1、Ctrl + Alt + S --> Live Edit --> 勾选 Enable live editing,如下图: 2、接下来就是要在Google浏览器中安装 JetBrains IDE ...

渊翼
2014/06/18
0
2
WebStorm 9“神器”变“霸器”

WebStorm 9测试版新增:Live Edit增强、JS后缀模板、Gulp集成、Node.js的spy-js和改善Editorconfig等。 早在半年前,JetBrains就发布了WebStorm 9的发展路线,经过半年的不断努力与更替。Web...

kouxunli1
2014/10/21
0
1
三个创建WebStorm项目的方法

WebStorm项目代表一个完整的解决方案和定义项目范围设置。而重点则是代码完成、代码重构、代码风格等。 因此在建立项目时,WebStorm可以通过三个方面来完成:下载远程项目、复制控制存储库项...

kouxunli1
2014/01/10
0
0
JavaScript语言基础-环境搭建

我们要想编写和运行JavaScript脚本,则需要:JavaScript编辑工具和JavaScript运行测试环境。下面我们分别介绍一下。 JavaScript编辑工具 JavaScript编辑工具最简单的可以使用一些文本编辑工具...

智捷课堂
2015/03/12
0
0
Web神器WebStorm 8.0测试版发放(慧都独家)

WebStorm 8.0测试版的发放,标志着WebStorm规划构建的发展成熟。 此次WebStorm 8.0测试版的主要变化是支持高级的AngularJS和集成Spy-js JavaScript跟踪工具。继续朝着成为最聪明的JavaScrip...

kouxunli1
2014/01/16
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Android 复制和粘贴功能

做了一回搬运工,原文地址:https://blog.csdn.net/kennethyo/article/details/76602765 Android 复制和粘贴功能,需要调用系统服务ClipboardManager来实现。 ClipboardManager mClipboardM...

她叫我小渝
27分钟前
0
0
拦截SQLSERVER的SSL加密通道替换传输过程中的用户名密码实现运维审计(一)

工作准备 •一台SQLSERVER 2005/SQLSERVER 2008服务 •SQLSERVER jdbc驱动程序 •Java开发环境eclipse + jdk1.8 •java反编译工具JD-Core 反编译JDBC分析SQLSERVER客户端与服务器通信原理 SQ...

紅顏為君笑
44分钟前
4
0
jQuery零基础入门——(六)修改DOM结构

《jQuery零基础入门》系列博文是在廖雪峰老师的博文基础上,可能补充了个人的理解和日常遇到的点,用我的理解表述出来,主干出处来自廖雪峰老师的技术分享。 在《零基础入门JavaScript》的时...

JandenMa
今天
0
0
linux mint 1.9 qq 安装

转: https://www.jianshu.com/p/cdc3d03c144d 1. 下载 qq 轻聊版,可在百度搜索后下载 QQ7.9Light.exe 2. 去wine的官网(https://wiki.winehq.org/Ubuntu) 安装 wine . 提醒网页可以切换成中...

Canaan_
今天
0
0
PHP后台运行命令并管理运行程序

php后台运行命令并管理后台运行程序 class ProcessModel{ private $pid; private $command; private $resultToFile = ''; public function __construct($cl=false){......

colin_86
今天
1
0
数据结构与算法4

在此程序中,HighArray类中的find()方法用数据项的值作为参数传递,它的返回值决定是否找到此数据项。 insert()方法向数组下一个空位置放置一个新的数据项。一个名为nElems的字段跟踪记录着...

沉迷于编程的小菜菜
今天
1
1
fiddler安装和基本使用以及代理设置

项目需求 由于开发过程中客户端和服务器数据交互非常频繁,有时候服务端需要知道客户端调用接口传了哪些参数过来,这个时候就需要一个工具可以监听这些接口请求参数,已经接口的响应的数据,这种...

银装素裹
今天
0
0
Python分析《我不是药神》豆瓣评论

读取 Mongo 中的短评数据,进行中文分词 对分词结果取 Top50 生成词云 生成词云效果 看来网上关于 我不是药神 vs 达拉斯 的争论很热啊。关于词频统计就这些,代码中也会完成一些其它的分析任...

猫咪编程
今天
0
0
虚拟机怎么安装vmware tools

https://blog.csdn.net/tjcwt2011/article/details/72638977

AndyZhouX
昨天
1
0
There is no session with id[xxx]

参考网页 https://blog.csdn.net/caimengyuan/article/details/52526765 报错 2018-07-19 23:04:35,330 [http-nio-1008-exec-8] DEBUG [org.apache.shiro.web.servlet.SimpleCookie] - Found......

karma123
昨天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部