Visual Studio中为JS/TS变量加花括号的快捷键及批量修改导入的方法

在Javascript/Typescript开发场景中，常需要把大量默认导入改为非默认导入，也就是将：

import UserComponent from './someFile'

修改为：

import {UserComponent} from './someFile'

针对你问的两个问题，具体操作如下：

一、快速为变量添加花括号的方法 #

单个修改（快捷键） #

选中目标变量名（比如UserComponent），按下Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（Mac）打开命令面板，输入Wrap with Braces并执行，就能快速给选中内容套上花括号。

批量修改（更高效） #

如果要处理多个文件或大量导入语句，用正则查找替换更高效：

1. 按下Ctrl+H（Windows/Linux）或Cmd+H（Mac）打开替换面板
2. 勾选「使用正则表达式」选项（面板上的.*图标）
3. 查找框输入：import (\w+) from
4. 替换框输入：import {$1} from
5. 点击「全部替换」即可批量完成修改

二、输入左花括号时自动补全右花括号的设置 #

VS默认情况下输入{就会自动补全对应的}，如果没生效，按以下步骤开启：

1. 按下Ctrl+,（Windows/Linux）或Cmd+,（Mac）打开设置面板
2. 搜索Editor: Auto Closing Brackets
3. 将选项设置为always或languageDefined

如果需要手动补全已输入的左花括号，按下Tab键即可自动补全右花括号（前提是光标在左花括号后面）。

内容的提问来源于stack exchange，提问作者Touchstone