Skip to content

jareguo/web-storm-tips

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

69 Commits
 
 
 
 

Repository files navigation

WebStorm 常用技巧笔记

(Edit This Page)

通用技巧

  • 几乎在所有面板包括弹出窗口里,都能直接键入名字进行快速跳转。例如
    • 在查找结果中增量查找
    • 在 Outline 窗口中快速跳转
    • 在 Project、Recent File 中快速跳转

常用快捷键(Mac):

导航:

  • 打开文件Shift + ⌘ + O (被我改成了和 Chrome 相同的 ⌘ + O)
    • 文件名前面或后面加上/可打开目录
  • 打开符号:Alt + ⌘ + O
  • 搜索任意:双击 Shift
  • 跳转到声明:⌘ + Alt + B
  • 跳转到实现:⌘ + B
  • 搜索所有引用:我定义的是 Shift + F12
  • 弹出文件结构列表(Outline):⌘ + F12
  • 弹出最近关闭的文件列表(Recent File):⌘ + E
    • 之后直接键入文件名可快速跳转到最近关闭的文件,找不到的话按回车则在项目中查找。
  • 跳转到下一查找结果:Alt + ⌘ + Down
  • 弹出外部资源菜单:(在 Tab 标签上) ⌘ + Click
  • 添加书签:F3,浏览书签:⌘ + F3
  • 跳转到代码块开头:Alt + ⌘ + [
  • 在左右(花)括号之间跳转:Ctrl + M

视图:

  • 跳转回编辑面板: Esc
  • 切换下一个代码标签:Ctrl + TabShift + ⌘ + ]
  • 切换上一个代码标签:Shift + ⌘ + [
  • 最大化/还原编辑面板:双击标签栏
  • 显示所有视图边栏:显示双击并按住
  • 关闭当前显示查找结果标签页:Ctrl + Shift + F4

编辑:

  • 插入代码片段(Code Snippet):⌘ + J
  • 重构:Ctrl + T
  • 重命名(变量等):Shift + F6
  • 重构预览时,从搜索结果中排除:Delete
  • 格式化代码:Alt + ⌘ + L
  • 缩进对齐:Ctrl + Alt + I
  • 弹出 Intention Actions: Alt + Enter
  • 同时选中下一个相同代码块:Ctrl + G
  • 同时选中所有相同代码块:Ctrl + ⌘ + G
  • 一些 Unix 终端快捷键:Ctrl + A/E/K
  • 单纯粘贴(不自动缩进也不格式化代码):Shift + Alt + ⌘ + V
  • 行注释:⌘ + /
  • 块注释:Alt + ⌘ + /

行操作:

  • 复制(选中)行:⌘ + D
  • 上移(选中)行Shift + Alt + Up
  • 上移(选中)语句:Shift + ⌘ + Up
  • 在上面插入新行:Alt + ⌘ + Enter
  • 在下面插入新行: Shift + Enter
  • 删除行:⌘ + Delete

显示:

  • 显示方法参数说明:⌘ + P
  • 显示光标处的代码文档:F1
  • 快速查看定义:Alt + Space
  • 高亮当前文件中所有选中字段:Shift + ⌘ + F7 (然后⌘ + G跳转下一个)
  • 扩大选中的代码块:Alt + Up(可以用来选词,按越多次选中的代码块范围越大)
  • 折叠/展开代码块:⌘ + -/=
  • 光标向上/向下移动同时滚动视图(Move Up):我定义的是 Shift + ⌘ + I/K

其它:

  • 激活搜索框 "Match Case": Alt + C
  • 激活搜索框 "Words": Alt + R
  • 重复最近的搜索:焦点在输入框时按 Down
  • 新建草稿文件: ⌘ + Shift + N

调整 Layout 以突出编码区域,更适合宽屏:

  • [Preferences] Appearance & Behavior > Appearance:勾选 Widescreen ... layout
  • [Menu] View: 把 Toolbar, Tool Buttons, Status Bar, Navigation bar 全关掉

允许解析 module 等 node 全局变量:

  • [Preferences] Languages & Frameworks > JavaScript > Libraries: 勾选 Node.js Globals

隐藏代码折叠的箭头:

  • [Preferences] Editor > Code Folding: 取消 Show code folding outline

从项目中排除第三方文件,优化代码搜索结果:

  • [Preferences] Project > Directories: 选中不需要的文件夹,点上面的 Excluded,例如这样设置:
    image
    也可以在 [Project] 面板上的文件夹点击右键,选择 Mark Directory As > Excluded

不在 [Project] 显示已排除的第三方文件:

  • [Project] 点击 "Scope按钮",选择 Project Files
    image

按文件类型排序:

  • [Project] 点击齿轮下拉菜单,选中 Sort by Type 和 Folders Always on Top image

在 [Project] 中定位到当前编辑的脚本:

  • 点击图中的小图标
    image

去掉 spell checking:

  • [Preference] Editor > Inspections: 把 spelling 项的复选去掉

设置缩进和代码格式化操作:

  • [Preference] Editor > General > Smart Keys: 按需设置

屏蔽对象定义时最后多写一个逗号引起的报错:

  • [Preference] Editor > Inspections > JavaScript > General: 取消 Last comma in object literal

减少 jshint 报错

  • 在项目的 .idea/jsLinters/ 目录下添加 jshint.xml

Postfix Completion

  • [Preferences] Editor > General > Postfix Completion:启用你喜欢的选项

开启 ES6 支持

  • [Preferences] Languages & Frameworks > JavaScript:选择 ECMAScript 6
    (需要重启 WebStorm 才能生效)

自动识别当前文件的缩进类型

  • [Preferences] Editor > Code Style:选择 Detect and use existing file indents for editing

滚动条快速滚动到选中位置

  • 系统设置中选中该项
    image

WebStrom 作为 diff 工具

Command: /Applications/WebStorm.app/Contents/MacOS/webstorm diff
Arguments: $(cd $(dirname "$LOCAL") && pwd)/$(basename "$LOCAL") $(cd $(dirname "$REMOTE") && pwd)/$(basename "$REMOTE")

WebStrom 作为 merge 工具

Command: /Applications/WebStorm.app/Contents/MacOS/webstorm merge
Arguments: $(cd $(dirname "$LOCAL") && pwd)/$(basename "$LOCAL") $(cd $(dirname "$REMOTE") && pwd)/$(basename "$REMOTE") $(cd $(dirname "$BASE") && pwd)/$(basename "$BASE") $(cd $(dirname "$MERGED") && pwd)/$(basename "$MERGED")

Releases

No releases published

Packages

No packages published