PhpStorm中Vue项目如何自动生成带空格的单/双大括号并定位光标

一、单大括号（import/export、对象字面量）自动补全空格 #

不用手动反复按空格，直接让IDE在补全时就生成带中间空格的格式：

1. 打开设置（快捷键Ctrl+Alt+S），找到Editor > Code Style > JavaScript（用TypeScript就选对应选项）
2. 切换到Spaces标签页，在「Within」分类下：
   • 勾选Braces of import/export statements：import/export的大括号内自动添加空格
   • 勾选Braces of object literals：对象字面量的大括号内自动添加空格
3. 应用设置后，输入import {，IDE会直接补全为{ }，光标自动定位在两个空格中间，无需额外操作。

二、Vue双大括号（插值表达式）自动补全空格 #

两种方案任选：

方案1：通过代码风格设置自动生效 #

1. 打开设置，找到Editor > Code Style > Vue，切换到HTML标签页
2. 在「Mustache interpolation」区域，勾选Add spaces around mustache content
3. 确认设置后，输入{{，IDE会自动补全为{{ }}，光标直接落在中间空格处。

方案2：自定义Live Template（更灵活） #

1. 打开设置Editor > Live Templates，右上角点「+」→ 选择「Template Group」，新建一个专属组（比如Vue Custom）
2. 在这个组内再点「+」→ 选择「Live Template」：
   • 缩写填{{（不要加空格，避免触发异常）
   • 模板文本填{{ $END$ }}
   • 点击「Define」，勾选Vue.js: HTML作为触发上下文
   • 可选：勾选Reformat according to style保证格式统一
3. 应用设置后，输入{{按Tab键，就会生成{{ 光标 }}的格式。

补充：如果坚持用空格触发单大括号格式 #

如果一定要按空格才生成中间空格，可以用宏录制实现：

1. 打开Edit > Macros > Start Macro Recording
2. 手动执行操作：输入{ → 按两次空格 → 按左箭头一次（将光标移到两个空格中间）
3. 停止录制，给宏命名（比如BracesWithSpaces）
4. 打开Settings > Keymap，搜索这个宏，绑定到空格键（注意：可能和默认空格功能冲突，建议只在JavaScript/Vue文件上下文绑定）

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