程序员工具使用Web前端开发

webstorm功能、操作技巧及快捷键索引

2016-12-24  本文已影响1295人  爱鸽子的玉米君

前端狗一枚,最近刚上手webstorm 用上就觉得好用了。
文章内容转载于http://www.html5jscss.com/ide-webstrom.html
自己用markdown语法编辑并优化排版,希望方便大家查阅。
好了不多说,有心看到的朋友就点个喜欢就好了。欢迎勘误。感恩。

webstorm 特色功能

好处:省去了Ctrl + S之后,在结合Firefox的vim,基本不动鼠标就可以看到结果页面了。
坏处:没有以前的 * 标识,万一键盘误操作也会被立即存储。

菜单栏 VCS->Local History -> Show History(快捷键:Alt + ~ -> 7)

hawtim tips: Ctrl + ~ 能够弹出切换弹窗,能够实现:

  • 编辑器风格(theme)快速切换,
  • 代码配色(code style)快速切换,
  • 窗口模式(view)快速切换,
  • 不同IDE下的快捷键(keymap)切换,
  • 编辑器整体(editor theme)配色快速切换

好处:只要 webstorm 不关闭,你的文件随时可以返回到之前的操作(这也是为啥在 webstorm 里Ctrl + Y 是删除一行的原因了)。
坏处:webstorm 关闭重启后这些历史记录就没有了;还有一个坏处就是由此带来的内存消耗也必然比较大。**

好处:相当于本地 svn。
坏处:内存消耗也必然比较大。


webstorm安装后的一些设置技巧:













hawtim tips:关于使用 webstorm 的双向解决方案可以查看 https://segmentfault.com/a/1190000003709651


webstorm使用心得


git使用

webstorm中只集成了git的常用操作,并不能完全替代命令行工具。
在界面的右下角可以查看处于哪个git分支。也可以在上面点击切换或者新建分支。
查看当前代码与版本库代码的差异:右击代码界面任意区域,选择git -> compare with然后选择要比较的版本库。


webstorm的快捷键说明:

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 + mouseover :codeBrief Info 简单信息
Ctrl + F1 : Show description of error or warning at caret 显示光标所在位置的错误信息或者警告信息
Alt + Insert:Generate code…(Getters, Setters, Constructors)新建一个文件或者生成代码,…构造函数,可以创建类里面任何字段的getter与setter方法
Ctrl + O:Override methods 重载方法
Ctrl + I:Implement methods 实现方法
Ctrl + Alt + T:Surround 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 + W: Select successively increasing code blocks 选择代码块,一般是增量选择
Ctrl + Shift + W :Decrease current selection to previous state 上个快捷键的回退,减量选择代码
Alt + Q: Context info 上下文信息
Alt + Enter: Show intention actions and quick-fixes 意图行动,快速见效
Ctrl + Alt + L:Reformat code 根据模板格式对代码格式化
Tab/ Shift + Tab: Indent/unindent selected lines 对所选行进行缩排处理/撤销缩排处理
Ctrl + X or Shift + Delete: Cut current line or selected block to clipboard 剪切当前行或所选代码块到剪切板
Ctrl + C or Ctrl + Insert: Copy current line or selected block to chipboard 拷贝当前行或者所选代码块到剪切板
Ctrl + V or Shift + Insert:Paste from clipboard 粘贴剪切板上的内容
Ctrl + Shift + V:Paste from recent buffers 粘贴缓冲器中最新的内容
Ctrl + D:Duplicate current line or selected block 复制当前行或者所选代码块
Ctrl + Y:Delete line at caret 删除光标所在位置行
Ctrl + Shift + J:Smart line join(HTML and JavaScript only)加入智能行 (HTML 和JavaScript)
Ctrl + Enter:Smart line split(HTML and JavaScript only)分离智能行 (HTML 和JavaScript)
Shift + Enter: Start new line 另起一行
Ctrl + Shift + U:Toggle case for word at caret or selected block 光标所在位置大小写转换
Ctrl + Shift + ]:/[Select till code block end/start 选择直到代码块结束/开始
Ctrl + Delete:Delete to word end 删除文字结束
Ctrl + Backspace:Delete to word start 删除文字开始
Ctrl + NumPad+/-:Expand/collapse code block 扩展/缩减代码块
Ctrl + Shift + NumPad+:Expand all 扩张所有
Ctrl + Shift + NumPad-:Collapse 缩减所有
Ctrl + F4:Close active editor tab 关闭活跃编辑标签

Ctrl + F: Find 当前文件内快速查找代码
Ctrl + Shift + F: Find in path 指定文件内寻找路径
F3: Find next 查找下一个
Shift + F3:Find previous 查找上一个
Ctrl + R: Replace 当前文件内代码替代
Ctrl + Shift + R: Replace in path 指定文件内代码批量替代

Alt + F7/Ctrl + F7: Find usages/Find usages in file 找到使用/在文件找到使用
Ctrl + Shift + F7: Highlight usages in file文件中精彩使用
Ctrl + Alt + F7: Show usages 显示使用

Alt + Shift + F10: Select configuration and run 选择构架,运行
Alt + Shift + F9: Select configuration and debug 选择构架,修补漏洞
Shift + F10: Run 运行
Shift + F9: Debug 修补漏洞
Ctrl + Shift + F10: Run context configuration from editor 从编辑运行内容构架
Ctrl + Shift + X: Run command line 运行命令行

F8: Step over 不进入函数
F7: Step into 单步执行
Shift + F7: Smart step into 智能单步执行
Shift + F8: Step out 跳出
Alt + F9: Run to cursor 运行到光标处
Alt+ F8: Evaluate expression 评估表达
F9: Resume program 重新开始程序
Ctrl + F8: Toggle breakpoint 切换断点
Ctrl + Shift + F8: View breakpoints 查看断点

Ctrl + N: Go to class跳转到指定类
Ctrl + Shift + N: Go to file 通过文件名快速查找工程内的文件
Ctrl + Alt + Shift + N: Go to symbol 通过一个字符查找函数位置
Alt + Right / left: Go to next/ previous editor tab 进入下一个/ 上一个编辑器选项卡
F12: Go back to previous tool window 进入上一个工具窗口
Esc: Go to editor(from tool window) 从工具窗口进入编辑器
Shift + Esc: Hide active or last active window 隐藏活动窗口
Ctrl + Shift + F4: Close active run/message/find/…tab 关闭活动….标签
Ctrl + G: Go to line 跳转到第几行
Ctrl + E: Recent files popup 弹出最近打开的文件
Ctrl + Alt + Left/Right: Navigate back/forward 导航前进/后退
Ctrl + Shift + Backspace: Navigate to last edit location 向最近编辑定位导航
Alt + F1: Select current file or symbol in any view 查找当前选中的代码或文件在其他界面模块的位置
Ctrl + B or Ctrl + Click: Go to declaration跳转到定义处
Ctrl + Alt + B: Go to implementation(s) 跳转方法实现处
Ctrl + Shift + B: Go to type declaration 跳转方法定义处
Ctrl + Shift + I: Open quick definition lookup 打开定义快速查找
Ctrl + U: Go to super-method/super-class 跳转方法/超阶级
Alt + Up/Down: Go to previous/next method 在方法间快速移动定位
Ctrl + ]/[: Move to code block end/start 跳转到编码块结束/开始
Ctrl + F12: File structure popup 文件结构弹出
Ctrl + H: Type hierarchy 类型层次
Ctrl + Alt + H: Call hierarchy 调用层次结构
F2/ Shift + F2: Next/previous highlighted error 跳转到后一个/前一个错误,高亮错误或警告快速定位,使用这个快捷键可以快捷在出错的语句之间进行跳转。
F4/Ctrl + Enter: Edit source/ View source 编辑源代码/查看源代码
Alt + Home: Show navigation bar 显示导航栏
F11: Toggle bookmark 切换标记
Ctrl + F11: Toggle bookmark with mnemonic 采用记忆切换标记
Ctrl + #[0-9]: Go to numbered bookmark 跳转到带编号的标记
Shift + F11: Show bookmark 显示标记

F5: Copy 拷贝
F6: Move 移动
Alt + Delete: Safe Delete 安全删除
Shift + F6: Rename 重新命名
Ctrl + Alt + N: Inline Variable 嵌入变量
Ctrl + Alt + M:Extract Method( Javascript only) 提取函数
Ctrl + Alt + V: Introduce Variable 引入变量
Ctrl + Alt + F: Introduce Field 引入域
Ctrl + Alt + C: Introduce Constant 引入常量

Alt + BackQuote( ): ‘VCS’quick popup 快速弹出 VCS
Ctrl + K: Commit project to VCS 提交项目至VCS
Ctrl + T: Update project from VCS 从VCS 更新项目
Alt + Shift + C: View recent changes 查看最新改变

Ctrl + Shift + A: Find action 查找并调用编辑器的功能
Alt + #[0-9]: Open corresponding tool window 快速切换打开界面模块
Ctrl + Alt + F11: Toggle full screen mode 切换全屏模式
Ctrl + Shift + F12: Toggle maximizing editor 切换最大化编辑器
Alt + Shift + F: Add to Favorites 将当前文件添至收藏夹
Alt + Shift + I: Inspect current file with current profile 使用当前属性检查当前文件
Ctrl + BackQuote( ): Quick switch current scheme 快速转换现有组合
Ctrl + Alt + S: Open setting dialog 打开设置对话框
Ctrl + Tab:Switch between tabs and tool window 标签和工具窗的转换(与windows快捷键冲突)

上一篇下一篇

猜你喜欢

热点阅读