WebStorm 实用小技巧

快捷键

查找类

  • command + shift + f // 全局搜索
  • double shift // search everywhere
  • command + G // 查找下一个
  • command + shift + G // 查找上一个
  • command + F12 // File Structure popup

功能类

  • command + shift + v // 从剪切板里选择黏贴
  • command + delete // 删除当前行
  • command + d // 复制行
  • command + shift + up/down // 上下移动当前行代码
  • command + alt + t // 增加环绕标签(if..else, try..catch, for, etc.)
  • command + y // 小浮窗显示变量声明时的行
  • control + j // 获取变量相关信息(类型、注释等,注释是拿上一行的注释)
  • f2, shift + f2 // 切换到上\下一个突出错误的位置
  • command + [ ] // 光标现在的位置和之前的位置切换
  • command + shift + delete // 导航到上一个编辑位置的位置
  • command + b // 跳转到变量声明处
  • command + up // 跳转到导航栏
  • command + shift + [ ] // 文件选项卡快速切换
  • command + shift + c // 复制文件的路径
  • command + shift + u // 大小写转换, 切换大小写
  • command + f8 // 添加断点
  • alt + shift + g // 多行编辑。 用鼠标框选需要编辑的代码, 然后按alt+shift+g就会跑到各行的末尾
  • command + ←, command + → 光标跳转到首尾
  • alt + ← → 隔单词跳转
  • command + alt + v // Put a result of the selected expression into a variable

导包

  • option + shift + enter // Add all unambiguous imports

一些设置相关

Auto Import

Settings -> Editor -> General -> Auto Import 下的 Unambiguous imports on the fly 很有必要开(特别是搭配 GitHub Copilot 的时候), 更详细的说明

Do not import exactly from:

比如使用 antd 时,import statement 总是会提示 antd/lib/* 或者 antd/es/* 干扰选择,这时候设置 Settings->Editor->Code Style->Typescript 里面的 Imports tab 中的该设置为:

rxjs/Rx node_modules/** **/node_modules/** @angular/material @angular/material/typings/** antd/**/* @ant-design/pro-form/**/*

就可以避免干扰项出现。

JSX 属性按照属性类型来,避免字符串出现大括号

Choosing Based on type: as Add for JSX attributes value in Settings | Editor | Code Style | HTML, Other 建议设置为 Braces, Based on type 就一个字不实用。

Markdown 文件单行太长

单行太长影响阅读,使用 double shift 搜索 soft-wrap, 快速设置。