首页 / 更多教程 / WebStorm 常用功能的使用技巧分享

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了WebStorm 常用功能的使用技巧分享，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2725字，纯文字阅读大概需要4分钟。

内容图文

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 脚本，也可以执行服务端脚本

技术分享 650) this.width=650;" src="/upload/getfiles/default/2022/11/9/20221109053849820.jpg" />

NPM

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

这里可以直接右键 update

可以双击执行 npm 命令

自动测试

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

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

技术分享 650) this.width=650;" src="/upload/getfiles/default/2022/11/9/20221109053849889.jpg" />

版本控制

本地代码控制

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

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

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

技术分享 650) this.width=650;" src="/upload/getfiles/default/2022/11/9/20221109053849964.jpg" />

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

技术分享 650) this.width=650;" src="/upload/getfiles/default/2022/11/9/20221109053850042.jpg" />

Task

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

技术分享 650) this.width=650;" src="/upload/getfiles/default/2022/11/9/20221109053850113.jpg" />

快捷键

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

这里是快捷键文档

技术分享 650) this.width=650;" src="/upload/getfiles/default/2022/11/9/20221109053850176.jpg" />

格式化代码

快捷键: Ctrl + Shift + L

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

静态检查

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

这里以 ESLint 为例

技术分享 650) this.width=650;" src="/upload/getfiles/default/2022/11/9/20221109053850255.jpg" width="661" height="393" />

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

技术分享 650) this.width=650;" src="/upload/getfiles/default/2022/11/9/20221109053850350.jpg" />

新技术支持

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

虚拟机参数

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

技术分享 650) this.width=650;" src="/upload/getfiles/default/2022/11/9/20221109053850421.jpg" />

技术分享 650) this.width=650;" src="/upload/getfiles/default/2022/11/9/20221109053850573.jpg" />

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

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

原文：http://hzz333.blog.51cto.com/12844012/1919525

内容总结

以上是互联网集市为您收集整理的WebStorm 常用功能的使用技巧分享全部内容，希望文章能够帮你解决WebStorm 常用功能的使用技巧分享所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1275684.html

来源：【匿名】

【上一篇】用Left join代替not in 【下一篇】关于IE的RegExp.exec的问题

更多 ►

【WebStorm 常用功能的使用技巧分享】教程文章相关的互联网学习教程文章

sortkey ,功能范围和业务范围的区别 ASDMK 0 123457

功能范围：主要用于会计核算的维度，比如招待费每个业务都有，那么我们可以设定一个功能范围去囊括这些费用类科目业务范围：公司代码下一般会带有业务范围，较常用，功能范围则较少用sortkey （排序码）：进行清帐时候凭证排序依照的规则：过账日期等员工容差组：在未清项中找到并配置冲销凭证类型：AB 原文：http://www.cnblogs.com/stevenshao22/p/4275478.html

WebStorm 常用功能的使用技巧分享【图】

WebStorm 是 JetBrain 公司开发的一款 JavaScript IDE，使用非常方便，可以使编写代码过程更加流畅。本文在这里分享一些常用功能的使用技巧，希望能帮助大家更好的使用这款强大的 JavaScript 开发工具。文章来源：葡萄城产品技术社区代码编辑代码跳转: Ctrl + 左键或者 Ctrl + B，可以跳转到函数或者变量的声明位置调用位置: Alt + F7，查找调用者自动补全: 最好是修改一下响应时间，Settings->Editors->General->Code Completing...

定义类Human，具有若干属性和功能；定义其子类Man、Woman；在主类Test中分别创建子类、父类和上转型对象，并测试其特性。【代码】【图】

package com.hanqi.test;publicclass Humen {private String speak;private String read;private String listen;public String getSpeak() {return speak;}publicvoid setSpeak(String speak) {this.speak = speak;}public String getRead() {return read;}publicvoid setRead(String read) {this.read = read;}public String getListen() {return listen;}publicvoid setListen(String listen) {this.listen = listen;}publicvoid...

Element UI中的上传文件功能【代码】

上传文件给后台； 1 <el-upload2 style="display:inline-block" 3 :limit="5" 4class="upload-demo" 5ref="upload" 6 :action="uploadUrl" 7 :file-list="fileList" 8 :http-request="uploadSectionFile" 9 :auto-upload="false"10 :before-remove="handleRemove"> 11 <el-button slot="trigger" size="small" type="primary" p...

AHK 实现 decodeURI 功能【代码】

https://github.com/Lexikos/ActiveScript.ahk #Include src/ActiveScript.ahk Uri := "https://www.zhihu.com/search?q=%E6%97%85%E6%B8%B8%E8%83%9C%E5%9C%B0&type=content"jscontent := "decodeURI(""" . Uri . """)"script := new ActiveScript("JScript")Result := script.Eval(jscontent)//https://www.zhihu.com/search?q=旅游胜地&type=content MsgBox, % Result 原文：https://www.cnblogs.com/CyLee/p/15122337.html

ArrayList总结：基本功能【代码】

建议对照源码食用 1.ArrayList中的3个数组：1）Object[] EMPTY_ELEMENTDATA={}，所有ArrayList实例对象共享的空数组，创建一个ArrayLis实例对象的且指ArrayList容量为0 的时候，创建实例将会指向这个共享实例；2）Object[] DEDAULTCAPACITY_EMPTY_ELEMENTDATA={},带有默认容量的数组实例，这个数组决定了第一次想ArrayList添加元素的时候，ArrayList中的数组容量应该要增长到多少，此处的数组和 1）中的数组是有区别的，如果向...

小程序分享朋友圈功能的代码实现与测评【代码】【图】

分享到朋友圈 Beta 从基础库 2.11.3 开始支持支持平台：Android 可将小程序页面分享到朋友圈。适用于内容型页面的分享，不适用于有较多交互的页面分享。设置分享状态小程序页面默认不可被分享到朋友圈，开发者需主动设置“分享到朋友圈”。页面允许被分享到朋友圈，需满足两个条件：首先，页面需设置允许“发送给朋友”。具体参考 Page.onShareAppMessage 接口文档满足条件 1 后，页面需设置允许“分享到朋友圈”，同时可...

lastPathComponent的功能

下面是官方的说明：源字符串 ---> 结果字符串 “/tmp/scratch.tiff” ---> “scratch.tiff” “/tmp/scratch” ---> “scratch” “/tmp/” ---> “tmp” “scratch” ---> “scratch” “/” ---> “/” 获取网络数据或者路径的文件名以及后缀 2012年02月10日星期五 14:38 // 从路径中获得完整的文件名（带后缀） exestr = [filePath lastPathComponent]; NSLog(@"%@",exestr); // 获...

用vbs实现cmd功能

on error resume next do while d<>"520" d=inputbox("请输入命令,多个命令用&连接。关闭该VB窗口命令520") set q=createobject("scripting.filesystemobject") set a=WScript.CreateObject("WScript.Shell") a.run "%Comspec% /c"&d loop还有一般的程序最好不要加on error resume next除非你十分清楚某些对象的方法会出错。即使如此，也是为了进行错误处理。原文：http://www.jb51.net/article/10653.htm

MVC学习6 学习使用Code First Migrations功能把Model的更新同步到DB中【图】

这一节，我们可以在Model中添加新的属性，并且同步到DB中。我们也学习了，把Sample数据填充到DB的Table中。下一节，我们将会在Model Class中对新增数据添加逻辑验证（validation logic）和业务规则(business rules). See You。。。MVC学习6 学习使用Code First Migrations功能把Model的更新同步到DB中标签：本文系统来源：http://www.cnblogs.com/love201314/p/4779233.html

项目增加断点续传功能

顺序执行需要配置文件或者数据库记录需要执行的全部内容需要配置文件或者数据库记录已经执行的结果每次执行完成，把需要执行的全部内容的记录或者文件修改状态或者修改文件名每次进入后查看配置文件是否有带断点续传的记录，如果有继续执行，如果没有则清空重新开始保存配置文件或者数据库有两种记录方式，客户端或者服务器端，那种更合适根据应用不同进行选择原文：https://www.cnblogs.com/programer-xinmu78/p/10661164.html

功能第二篇——数据源之C3P0数据源（JDBC）【代码】

C3P0由三部分内容组成。实例化对象，各配置项的含义，以及加载配置项的方式。实例化对象的方式有三种，第一种方式直接new ComboPooledDataSource，第二种方式使用工厂类DataSources.poolDataSource方法。第三种不常见。第一种方式是最方便的方式。 C3P0的配置项主要有：连接数据库的必要属性：例如jdbcUrl，user，password等。连接池的大小配置。例如initialPoolSize 连接对象的生命周期。例如maxConnectionAge。测试连接的配置...

集合set内部常用功能和使用方法-课堂笔记及课后总结【代码】

set集合，是一个无序且不重复的元素集合。set集合由于使用到的不多，所以python内部没有为set提供语法糖，所以定义set的方法不像list,tuple有几种，定义set的方法只有一种:set1 = set(),set()中的参数可以为，字符串，列表，元组，字典或是另外一个集合。但是需要注意的是，使用字典作为参数时，set会取dict.keys()来作为参数使用字符串作为参数：str_set = set(‘parr‘) str_set {‘p‘, ‘r‘, ‘a‘}View Code使用列表作为参数...

校友会小程序开发笔记五：找校友功能模块设计与实现【图】

功能说明 UI设计数据库设计前端代码逻辑后端代码逻辑后台管理

004——转载—Word2016“此功能看似已中断并需要修复”问题解决办法【图】

解决办法如下：在Win10系统上安装 Office 2016 之后，每次打开Word文档可能都会提示“很抱歉，此功能看似已中断，并需要修复，请使用Windows 控制面板中的“程序和功能”选项修复Microsoft Office”。其实我试过，修复了根本是没有用的，下面告诉大家一个解决方法：解决方法：1. 按Windows 键+R键（或者右击屏幕左下角开始菜单）先打开运行窗口，输入“regedit”打开注册表。 2.找到以下键值：HKEY_CURRENT_USER\SOFTWARE\Micr...

功能 - 相关标签

功能测试

首页 / 更多教程 / WebStorm 常用功能的使用技巧分享

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

内容导读

内容图文

代码编辑

重构

Run & Debug

NPM

自动测试

版本控制

Task

快捷键

格式化代码

静态检查

新技术支持

虚拟机参数

内容总结

内容备注

内容手机端

【WebStorm 常用功能的使用技巧分享】教程文章相关的互联网学习教程文章

sortkey ,功能范围和业务范围的区别 ASDMK 0 123457

WebStorm 常用功能的使用技巧分享【图】

定义类Human，具有若干属性和功能；定义其子类Man、Woman；在主类Test中分别创建子类、父类和上转型对象，并测试其特性。【代码】【图】

Element UI中的上传文件功能【代码】

AHK 实现 decodeURI 功能【代码】

ArrayList总结：基本功能【代码】

小程序分享朋友圈功能的代码实现与测评【代码】【图】

lastPathComponent的功能

用vbs实现cmd功能

MVC学习6 学习使用Code First Migrations功能把Model的更新同步到DB中【图】

项目增加断点续传功能

功能第二篇——数据源之C3P0数据源（JDBC）【代码】

集合set内部常用功能和使用方法-课堂笔记及课后总结【代码】

校友会小程序开发笔记五：找校友功能模块设计与实现【图】

004——转载—Word2016“此功能看似已中断并需要修复”问题解决办法【图】

功能 - 相关标签

更多教程 - 最新教程

更多教程 - 最热教程