---
title: WebStorm 实用小技巧
author: powerfulyang
date: 2022-03-07
posterId: 46063
tags: 
    - 快捷键
    - 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 + ← → 隔单词跳转

### 导包

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

## 一些设置相关

### Auto Import

**Settings -> Editor -> General -> Auto Import** 下的 Unambiguous imports on the fly 很有必要开(特别是搭配 GitHub Copilot 的时候), [更详细的说明](https://blog.jetbrains.com/webstorm/2020/07/configuring-the-style-of-imports-in-javascript-and-typescript/)

### 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**

WebStorm 实用小技巧

---
title: WebStorm 实用小技巧
author: powerfulyang
date: 2022-03-07
posterId: 46063
tags: 
    - 快捷键
    - 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 + ← → 隔单词跳转

### 导包

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

## 一些设置相关

### Auto Import

**Settings -> Editor -> General -> Auto Import** 下的 Unambiguous imports on the fly 很有必要开(特别是搭配 GitHub Copilot 的时候), [更详细的说明](https://blog.jetbrains.com/webstorm/2020/07/configuring-the-style-of-imports-in-javascript-and-typescript/)

### 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 就一个字不实用。

WebStorm 实用小技巧 @ Thu, Feb 9, 2023 3:07 PM			WebStorm 实用小技巧 @ Mon, Feb 20, 2023 4:10 PM
		Expand 64 lines ...
65			65
66		`### JSX 属性按照属性类型来，避免字符串出现大括号`	66		`### JSX 属性按照属性类型来，避免字符串出现大括号`
67			67
68	-	`Choosing Based on type: as Add for JSX attributes value in Settings \| Editor \| Code Style \| HTML, Other`	68	+	`~~Choosing Based on type: as Add for JSX attributes value in Settings \| Editor \| Code Style \| HTML, Other~~ 建议设置为 Braces, Based on type 就一个字不实用。`