WebStorm 实用小技巧
Published by powerfulyang on Mar 7, 2022
快捷键
查找类
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, 快速设置。