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

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。

 

相关阅读:

开放才能进步!Angular和Wijmo一起走过的日子

Angular vs React 最全面深入对比

Wijmo已率先支持Angular4 & TypeScript 2.2

 

时间: 2024-10-29 11:59:28

WebStorm 常用功能的使用技巧分享的相关文章

六个常用的Excel小技巧分享

  六个常用的Excel小技巧分享          1.自动标出不及格分数 假定需用红色字体显示60以下分数,蓝色字体显示60以上分数. Ctrl+1,设置单元格格式→自定义,类型输入框中输入: [蓝色][>=60];[红色][<60] 2.快速输入产品编号 如某类产品型号为"ABC-1245",产品型号均有固定前缀"ABC-",大量录入时,可设置单元格免去固定前缀输入. 按Ctrl+1,设置单元格格式→自定义,类型输入框中输入: "ABC-

javascript常用功能汇总_javascript技巧

1.javascript的数组API: //定义数组 var pageIds = new Array(); pageIds.push('A'); 数组长度 pageIds.length; //shift:删除原数组第一项,并返回删除元素的值:如果数组为空则返回undefined var a = [1,2,3,4,5]; var b = a.shift(); //a:[2,3,4,5] b:1 //unshift:将参数添加到原数组开头,并返回数组的长度 var a = [1,2,3,4,5];

photoshop常用抠图工具使用经验技巧分享

给各位photoshop软件的使用者们来详细的解析分享一下常用抠图工具使用的经验技巧. 分享一览: 1魔棒 适用于图像和背景色色差明显,背景色单一,图像边界清晰.   选择魔棒工具,属性栏容差值20-30的范围(看效果可以尝试输入得到最佳效果为准)后面连续选项要勾选上   在背景点一下(单击鼠标左键)出现选区也就是蚂蚁线,这时候背景已经被选择上了然后按快捷键Ctrl+shift+i键,反选一下得到了选区是把熊本熊选中的,这时候图片就已经抠出来了,可以换背景也可以拖到别的图片上. 2.色彩范围 适

javascript 常用功能总结_javascript技巧

1.路径符号的含义 src="/js/jquery.js"."../"这个斜杠是绝对路径的意思,表示的是网站根目录. 其他的如"./ " . "../" . "jquery.js" . "js/jquery.js"等等表示的都是相对当前网页的路径,是相对路径. 2.获取网站的根目录 复制代码 代码如下: function GetRootPath() { var strFullPath =

phpExcel中文帮助手册之常用功能指南_php技巧

PHPExcel基本操作: 定义EXCEL实体 即定义一个PHPEXCEL对象,并设置EXCEL对象内显示内容 // Excel开始 // 准备EXCEL的包括文件 // Error reporting error_reporting(0); // PHPExcel require_once dirname(__FILE__) . 'PHPExcel.php'; // 生成新的excel对象 $objPHPExcel = new PHPExcel(); // 设置excel文档的属性 $objP

分享Android开发自学笔记之AndroidStudio常用功能_Android

相关下载: Android Studio v1.3 官方最新版(apk应用开发工具) http://www.jb51.net/softs/83206.html Android Studio 官方最新版下载地址(支持国内下载)http://www.jb51.net/softjc/83204.html 一.界面区介绍 1.项目组织结构区,用于浏览项目文件,默认Project以Android组织方式展示. 2.设计区,默认在打开布局文件时为设计模式,可直接拖动控件到界面上实现所见即所得,下方的Desi

Illustrator实用性很强常用设计小技巧分享

给各位Illustrator软件的使用者们来详细的解析分享一下实用性很强常用设计小技巧. 技巧分享:                   好了,以上的信息就是小编给各位Illustrator的这一款软件的使用者们带来的详细的实用性很强常用设计小技巧解析分享的全部内容了,各位看到这里的使用者们,小编相信你们喜爱你在是非常的清楚了吧,希望小编上面的教程能给大家带去有用的帮助.

Illustrator实用性很强常用小技巧分享

给各位Illustrator软件的使用者们来详细的分享一下实用性很强的常用小技巧. 技巧分享:                   好了, 以上的信息就是小编给各位Illustrator的这一款软件的使用者们带来的详细的实用性很强的常用小技巧分享的全部内容了,各位看到这里的使用者们,小编相信各位现在是那是非常的清楚了吧,希望小编上面的技巧能够给各位带去有用的帮助.

Android调用平台功能具体技巧分享

Android操作系统那个可以通过调用手机平台来实现一些特定的功能,诸如网页的显示,邮件的发送等等.那么今天就为大家总结了几个Android调用平台功能的应用技巧,帮助大家增加编程经验. Android调用平台功能之显示网页 Uri uri = Uri.parse("http://google.com");    Intent it = new Intent(Intent.ACTION_VIEW, uri);    startActivity(it);    Uri uri = Uri