如何配置JetBrains IDE让HTML元素自动补全后光标置于元素内部

JetBrains系IDE HTML标签补全光标位置配置教程 #

以下配置逻辑适用于WebStorm、PyCharm、IDEA等全系列JetBrains IDE：

实现补全后光标落在标签内部（同一行） #

• 打开IDE设置面板：Windows/Linux按Ctrl + Alt + S，Mac按Cmd + ,
• 依次进入路径：编辑器 > Emmet > HTML
• 取消勾选「将光标放在结束标签之后」选项
• 保存设置即可，此时按下Ctrl + Shift + Enter补全标签后，效果为：

  <div class="row">█</div>
  

实现补全后自动换行缩进（光标落中间新行） #

在上述配置的基础上额外调整以下设置即可：

• 仍在编辑器 > Emmet > HTML设置页，勾选「对空标签应用格式化」
• 依次进入路径：编辑器 > 代码风格 > HTML > 其他
• 在「自动插入换行符」区域，将「在空标签内」选项设置为「始终」
• 保存设置后补全标签，自动生成排版结构，效果为：

  <div class="row">
  █
  </div>
  

异常排查 #

如果配置后不生效，可进入设置 > 键盘映射，搜索「完成当前语句」，确认该动作的快捷键绑定为Ctrl + Shift + Enter即可。

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