webstorm快捷键说明
- 格式:pdf
- 大小:302.60 KB
- 文档页数:12
概述此文章用来记录jetbrain系列工具使用的小技巧。
如果没有特别说明的话,这些技巧在webstorm、phpstorm、idea中是通用且是跨平台的。
live edit功能与浏览器实现同步实现步骤live edit是一个免刷新的功能,能捕捉到页面的改动(css、html、js改动),然后浏览器自动刷新,这样提高了开发的效率。
很赞的一个功能,唯一不足的是,要安装JB插件到浏览器中,对于不能安装该插件的浏览器来说,该功能就鸡肋了。
1. 打开WebStore的设置对话框,找到live edit选项,选中Enable live editing。
2. 打开Chrome浏览器,进入Chrome网上商店,搜索JetBrains IDE Suport扩展程序。
点击“添加至Chrome“按钮,安装该扩展程序到Chrome。
这时候,Chrome浏览器工具栏上就会出现一个JB图标。
注(有时可能在网上商店里搜索不到,我这里提供了一个地址:https:///webstore/detail/jetbrainsidesupport/hmhgeddbohgjknpmjagkdomcpobmllji )3. 在WebStorm中新建一个html文件,然后在页面内单击鼠标右键,选择debug选项。
4. 这时,webStorm会启动默认浏览器,并且激活JB浏览器插件。
5. 返回到Webstorm编辑器,尝试修改页面中的内容,然后打开浏览器,看看页面是否自动刷新了没。
如果配置正确的话,一改动代码,浏览器会立刻刷新的,这简直就是重构开发的圣器呀。
webstorm内置服务器失效的问题默认情况下,我们可以直接运行本地的html页面,它内部会开启64432端口来运行我们的页面,这样我们不要配置烦杂的后台环境,也可以简单测试一些需要服务器配合的页面了。
启动服务的方式如下:如图我们可以有三种方式或者通过快捷键的方式来启动内置服务器了。
IntellijIdeaWebstormPhpstorm的⾼效快捷键1. shift + F6可以理解为F2的豪华重量版,不但可以重命名⽂件名,⽽且可以命名函数名,函数名可以搜索引⽤的⽂件,还可以重命名局部变量。
还可以重命名标签名。
在中有个类似的快捷键:ctrl+shift+d。
1. search in comments and strings会搜索注释或变量内容。
2. search for text occurrences这个没搞明⽩有什么意思,请其它⾼⼿指教。
具体看我的演⽰。
3. shift + F6:除了重构函数名,之外还可以重构div闭合标签等等。
见图3演⽰,其它的功能等你去挖掘。
替换局部变量:<!doctype html><html><head><meta charset="UTF-8"><title>s</title></head><body><span>豪情</span><script type="text/javascript" src="test-inc.js"></script></body></html>// 欢迎访问 function incfoo2222(){}// 欢迎访问 incfoo2222();var test = 'incfoo';2. 软回车(shift+enter, ctrl+shift+enter我改为ctrl+enter,使与sublime text保持⼀致),这个快捷键也⽀持:除了这个快捷键之外,还有⼀个软回车,是经常⽤到的。
就是不论光标在当前⾏的任何位置,都可以跳转到下⼀⾏。
设置:3. alt + 左右⽅向键,快速切换tab选项卡:如果你是⼀个前端,或者⾮前端,在多个⽂件中来回切换,这个快捷键能帮到你。
WebStorm使⽤⽂档--转载WebStorm 使⽤⽂档概述号称最好⽤的前端IDE,Win7 和 Mac 上各⽤了⼀段时间,感觉确实不错分享出来。
版本上从8⼀直⽤到10,在设置上9到10有⼀次⽐较⼤的调整,下⾯的设置从10的使⽤中记录整理⽽来。
WebStorm在下⾯简写为WS。
快捷键下⾯介绍的快捷键和上⾯⽪肤和快捷键风格的设置有关,如果你和我设置的不⼀样会有很⼤的不同。
第⼀批给出的快捷键是10个,以后每批不多于5个,因为⼀般⼈的短暂记忆量是3-7个,我记快捷键的⽅式是每天开始编码先看⼀眼快捷键,但是不多看3-5个⾜够了,⼀天的编码中尽量去⽤⼀般两到三天就不⽤刻意去想了基本可以达到肌⾁记忆的层度。
1 - 基本编辑窗⼝的常⽤操作撤销,Undo, Win:Ctrl + Z; Mac:Com + Z恢复,Redo, Win:Ctrl + Shift + Z; Mac:Com + Shift + Z查找,Find, Win:Ctrl + F; Mac:Com + F在某⼀⽂件夹下查找内容,Find in Path, Win:Ctrl + Shift + F; Mac:Ctrl + Shift + F替换,Replace, Win:Ctrl + R; Mac:Com + R,格式化代码,Reformat Code, Win:Ctrl + Alt + L, Mac: Alt + Com + L对当前光标所在⾏或者选中部分做操作向下复制⼀⾏或⼀个代码块,Duplicate Line or Block, Win:Ctrl + D; Mac: Com + D剪切,Cut, Win:Ctrl + X; Mac: Com + X删除,Delete Line, Win:Ctrl + Y; Mac: Com + Y,需要注意的是选中字符所在的⾏会被删掉上下移动⾏,Move Line Up/Down, Win:Alt + Shift + 上/下箭头;Mac:Alt + Shift + 上/下箭头上下移动代码块,Move Statement Up/Down, Ctrl + Shift + 上/下箭头,⼤括号内的,块状注释等都是代码块,遇到代码块也会⼀次跳到上⾯。
Jetbrains WebStorm基本操作WebStorm是一种由JetBrains开发的JavaScript集成开发环境(IDE),专为Web 开发人员提供丰富的功能和工具。
本文将介绍WebStorm的基本操作,包括项目创建、代码编辑、调试和版本控制等方面。
安装和启动首先,你需要从JetBrains官方网站下载WebStorm并完成安装。
安装完成后,可以通过启动器或者命令行来启动WebStorm。
项目创建和导入在WebStorm中创建或导入项目非常简单。
下面是一些创建和导入项目的步骤:1.打开WebStorm,点击“Create New Project”或者“Open”按钮。
2.如果要创建新项目,选择项目类型(如HTML、JavaScript、Node.js等),选择项目的目录并设置项目名称。
3.如果要导入现有项目,选择“Open”选项,然后选择项目的根目录。
4.点击“OK”按钮,WebStorm将创建或导入项目,并打开项目窗口。
代码编辑WebStorm提供了强大的代码编辑功能,可以帮助开发人员提高效率和准确性。
下面是一些常用的代码编辑功能和快捷键:•代码自动完成:WebStorm可以根据当前上下文提供代码自动完成功能,通过按下Tab键或者选择列表中的项来插入代码。
•代码导航:可以使用快捷键Ctrl/Cmd + 鼠标左键点击来跳转到代码的定义或者使用Ctrl/Cmd + 鼠标滚轮来缩放代码。
•代码重构:WebStorm提供了多种代码重构功能,如重命名变量、提取函数、查找和替换等。
•代码格式化:可以使用快捷键Ctrl/Cmd + Alt + L来格式化代码,使其符合统一的代码风格。
•代码模板:WebStorm提供了一些代码模板,可以通过输入缩写并按下Tab 键来插入代码模板。
调试WebStorm内置了强大的调试功能,可以帮助开发人员快速定位和解决代码中的问题。
下面是一些常用的调试功能和快捷键:•设置断点:在代码行号的左侧单击即可设置断点,当程序执行到断点时会暂停。
webstorm关闭方法参数WebStorm是一款广受欢迎的集成开发环境(IDE),专门用于开发Web应用程序。
在使用WebStorm时,有时我们需要关闭方法参数窗口。
本文将介绍如何在WebStorm中关闭方法参数,以及一些其他相关的技巧和注意事项。
关闭方法参数可以有效地提高代码编写的效率和舒适度。
在默认情况下,WebStorm会在您输入方法名称后显示方法参数窗口,以帮助您更好地了解方法的使用方式和参数要求。
但是,有时候这个窗口可能会挡住您的代码或干扰您的操作。
因此,关闭方法参数窗口可以让您更好地专注于代码编写。
要关闭方法参数窗口,您可以按下Esc键或点击窗口右上角的关闭按钮。
这样,方法参数窗口将会关闭,您可以继续编写代码。
如果您日后需要再次打开方法参数窗口,只需在需要输入方法参数的地方开始输入方法名称,窗口将会自动弹出。
除了关闭方法参数窗口,WebStorm还提供了许多其他有用的功能和技巧,让您的代码编写更加高效。
下面我们将介绍其中几个重要的功能。
首先是代码补全功能。
WebStorm可以根据您输入的代码自动提供补全建议,以减少您的输入工作量。
当您输入一个方法名称或变量名时,WebStorm会自动显示可能的选项供您选择。
您可以使用上下箭头键选择您想要的选项,然后按下Enter键进行补全。
其次是代码导航功能。
当您的代码文件非常庞大时,找到特定的代码块可能会变得困难。
WebStorm提供了一些快捷键和功能,帮助您快速定位和导航到特定的代码位置。
例如,您可以使用Ctrl键加鼠标左键点击一个方法或变量,WebStorm将会自动跳转到该方法或变量的定义位置。
WebStorm还提供了代码重构功能,帮助您对代码进行优化和改进。
例如,您可以使用重命名功能来快速重命名一个方法或变量,而不必手动修改每个使用该方法或变量的地方。
我们还需要注意一些代码编写的最佳实践和规范。
例如,应该遵循良好的命名规范,使用有意义的变量和方法名称。
WebStorm使⽤参考⼿册WebStorm 是 JetBrains 推出的⼀款商业的 JavaScript 开发⼯具任何⼀个编辑器都需要保存(ctrl + s),这是所有win平台上编辑类软件的特点,但是webstorm编辑⽂件右上⾓是没有那个熟悉的 * 的。
好处:省去了ctrl + s之后,在结合Firefox的vim,基本不动⿏标就可以看到结果页⾯了。
坏处:没有以前的 * 标识,万⼀键盘误操作也会被⽴即存储。
任何⼀个编辑器只要⽂件关闭了就没有历史记录了,但是webstorm有。
vcs->Local History -> Show History(快捷键:ALT+~ -〉7)好处:只要webstorm不关闭,你的⽂件随时可以返回到之前的操作(这也是为啥在 webstorm ⾥ctrl+y是删除⼀⾏的原因了)。
坏处:webstorm关闭重启后这些历史记录就没有了;还有⼀个坏处就是由此带来的内存消耗也必然⽐较⼤。
任何⼀个编辑器,除了服务器svn之外,没有本地版本,但是webstorm提供⼀个本地⽂件修改历史记录(快捷键:ALT+SHIFT+c,Mac中ALT+Option+c)。
也可以 Ctrl + E 弹出最近打开的⽂件。
好处:相当于本地svn。
坏处:内存消耗也必然⽐较⼤。
集成了zencoding,HTML5,ftp,即时编辑(chrome),⾃动完成,基于Mozilla的javascript调试器,JSLint、Less⽀持、CoffeeScript⽀持、Node.js、单元测试、集成Git和svn版本控制等特性。
在编写CSS中,会智能的提⽰各种⽂件以及图⽚的路径,就不⽤再去确认这个⽂件是否存在了。
其他的特性就介绍了,想了解更多可以去webstrom官⽹继续寻找。
看完了这么介绍以及那么多给⼒的特性,是不是有种冲动马上试⼀试这款传说中的前端神器啊?嗯。
⾸先在官⽅下载页下载webstrom后,点击安装,然后⼀直下⼀步,最后会出现需要注册码界⾯,因为webstrom是商业的IDE,⽽天朝的屌丝前端当然没那么钱去买那么昂贵的神器了,不⽤担⼼,我们可以⽤WebStorm的密钥来学习使⽤这款前端神器。
webstorm快捷键说明Editing编辑相关快捷键∙Ctrl + Space:Basic code completion (the name of any class, method or variable) 基本代码完成(任何类、函数或者变量名称),改为Alt+S∙Ctrl + Shift + Enter:Complete statement 补全当前语句∙Ctrl + P:Parameter info (within method call arguments) 参数信息包括方法调用参数∙Ctrl + mouse over codeBrief Info 简单信息∙Ctrl + F1Show description of error or warning at caret 显示光标所在位置的错误信息或者警告信息∙Alt + InsertGenerate code…(Getters, Setters, Constructors)新建一个文件或者生成代码,…构造函数,可以创建类里面任何字段的getter与setter方法∙Ctrl + OOverride methods 重载方法∙Ctrl + IImplement methods 实现方法∙Ctrl + Alt + TSurround with…(if, else, try, catch, for, etc)用* 来围绕选中的代码行,(* 包括if 、while 、try catch 等)∙Ctrl + /Comment/uncomment with line comment 行注释/取消行注释∙Ctrl + Shift + /Comment/uncomment with block comment 块注释/取消块注释∙Ctrl + WSelect successively increasing code blocks 选择代码块,一般是增量选择∙Ctrl + Shift + WDecrease current selection to previous state 上个快捷键的回退,减量选择代码∙Alt + QContext info 上下文信息∙Alt + EnterShow intention actions and quick-fixes 意图行动,快速见效∙Ctrl + Alt + LReformat code 根据模板格式对代码格式化∙Tab/ Shift + TabIndent/unindent selected lines 对所选行进行缩排处理/撤销缩排处理∙Ctrl + X or Shift + DeleteCut current line or selected block to clipboard 剪切当前行或所选代码块到剪切板∙Ctrl + C or Ctrl + InsertCopy current line or selected block to chipboard 拷贝当前行或者所选代码块到剪切板∙Ctrl + V or Shift + InsertPaste from clipboard 粘贴剪切板上的内容∙Ctrl + Shift + VPaste from recent buffers 粘贴缓冲器中最新的内容∙Ctrl + DDuplicate current line or selected block 复制当前行或者所选代码块∙Ctrl + YDelete line at caret 删除光标所在位置行∙Ctrl + Shift + JSmart line join(HTML and JavaScript only)加入智能行(HTML 和JavaScript)∙Ctrl + EnterSmart line split(HTML and JavaScript only)分离智能行(HTML 和JavaScript)∙Shift + EnterStart new line 另起一行∙Ctrl + Shift + UToggle case for word at caret or selected block 光标所在位置大小写转换∙Ctrl + Shift + ]/[Select till code block end/start 选择直到代码块结束/开始∙Ctrl + DeleteDelete to word end 删除文字结束∙Ctrl + BackspaceDelete to word start 删除文字开始∙Ctrl + NumPad+/-Expand/collapse code block 扩展/缩减代码块∙Ctrl + Shift+ NumPad+Expand all 扩张所有∙Ctrl + Shift+ NumPad-Collapse 缩减所有∙Ctrl + F4Close active editor tab 关闭活跃编辑标签Search/replace搜索/替代相关快捷键∙Ctrl + FFind 当前文件内快速查找代码∙Ctrl + Shift + FFind in path 指定文件内寻找路径∙F3Find next 查找下一个∙Shift + F3Find previous 查找上一个∙Ctrl + RReplace 当前文件内代码替代∙Ctrl + Shift + RReplace in path 指定文件内代码批量替代Usage Search搜索相关快捷键∙Alt + F7/Ctrl + F7Find usages/Find usages in file 找到使用/在文件找到使用∙Ctrl + Shift + F7Highlight usages in file文件中精彩使用∙Ctrl + Alt + F7Show usages 显示使用Running运行∙Alt + Shift + F10Select configuration and run 选择构架,运行∙Alt + Shift + F9Select configuration and debug 选择构架,修补漏洞∙Shift + F10Run 运行∙Shift + F9Debug 修补漏洞∙Ctrl + Shift + F10Run context configuration from editor 从编辑运行内容构架∙Ctrl + Shift + XRun command line 运行命令行Debugging Debugging相关快捷键∙F8Step over 不进入函数∙F7Step into 单步执行∙Shift + F7Smart step into 智能单步执行∙Shift + F8Step out 跳出∙Alt + F9Run to cursor 运行到光标处∙Alt+ F8Evaluate expression 评估表达∙F9Resume program 重新开始程序∙Ctrl + F8Toggle breakpoint 切换断点∙Ctrl + Shift + F8View breakpoints 查看断点Navigation 定位相关快捷键∙Ctrl + NGo to class跳转到指定类∙Ctrl + Shift + NGo to file 通过文件名快速查找工程内的文件∙Ctrl + Alt +Shift + NGo to symbol 通过一个字符查找函数位置∙Alt + Right/ leftGo to next/ previous editor tab 进入下一个/ 上一个编辑器选项∙F12Go back to previous tool window 进入上一个工具窗口∙EscGo to editor(from tool window)从工具窗口进入编辑器∙Shift + EscHide active or last active window 隐藏活动窗口∙Ctrl + Shift + F4Close active run/message/find/…tab 关闭活动….标签∙Ctrl + GGo to line 跳转到第几行∙Ctrl + ERecent files popup 弹出最近打开的文件∙Ctrl + Alt + Left/RightNavigate back/forward 导航前进/后退∙Ctrl + Shift + BackspaceNavigate to last edit location 向最近编辑定位导航∙Alt + F1Select current file or symbol in any view 查找当前选中的代码或文件在其他界面模块的位置∙Ctrl + B or Ctrl + ClickGo to declaration跳转到定义处∙Ctrl + Alt + BGo to implementation(s) 跳转方法实现处∙Ctrl + Shift + BGo to type declaration 跳转方法定义处∙Ctrl + Shift + IOpen quick definition lookup 打开定义快速查找∙Ctrl + UGo to super-method/super-class 跳转方法/超阶级∙Alt + Up/DownGo to previous/next method 在方法间快速移动定位∙Ctrl + ]/[Move to code block end/start 跳转到编码块结束/开始∙Ctrl + F12File structure popup 文件结构弹出∙Ctrl + HType hierarchy 类型层次∙Ctrl + Alt + HCall hierarchy 调用层次结构∙F2/ Shift + F2Next/previous highlighted error 跳转到后一个/前一个错误,高亮错误或警告快速定位,使用这个快捷键可以快捷在出错的语句之间进行跳转。
∙F4/Ctrl + EnterEdit source/ View source 编辑源代码/查看源代码∙Alt + HomeShow navigation bar 显示导航栏∙F11Toggle bookmark 切换标记∙Ctrl + F11Toggle bookmark with mnemonic 采用记忆切换标记∙Ctrl + #[0-9]Go to numbered bookmark 跳转到带编号的标记∙Shift + F11Show bookmark 显示标记Refactoring 重构相关快捷键∙F5Copy 拷贝∙F6Move 移动∙Alt + DeleteSafe Delete 安全删除∙Shift + F6Rename 重新命名∙Ctrl + Alt + NInline Variable 嵌入变量∙Ctrl + Alt + MExtract Method( Javascript only) 提取函数∙Ctrl + Alt + VIntroduce Variable 引入变量∙Ctrl + Alt + FIntroduce Field 引入域∙Ctrl + Alt + CIntroduce Constant 引入常量VCS/Local History 版本控制系统/ 本地历史相关快捷键∙Alt + BackQuote( )‘VCS’quick popup 快速弹出VCS∙Ctrl + KCommit project to VCS 提交项目至VCSUpdate project from VCS 从VCS 更新项目∙Alt + Shift + CView recent changes 查看最新改变General 常用的相关快捷键∙Ctrl + Shift +AFind action 查找并调用编辑器的功能∙Alt + #[0-9]Open corresponding tool window 快速切换打开界面模块∙Ctrl + Alt + F11Toggle full screen mode 切换全屏模式∙Ctrl + Shift + F12Toggle maximizing editor 切换最大化编辑器∙Alt + Shift + FAdd to Favorites 将当前文件添至收藏夹∙Alt + Shift + IInspect current file with current profile 使用当前属性检查当前文件∙Ctrl + BackQuote( )Quick switch current scheme 快速转换现有组合∙Ctrl + Alt + SOpen setting dialog 打开设置对话框Switch between tabs and tool window 标签和工具窗的转换(与windows快捷键冲突)。