如何在IntelliJ中自动格式化JavaScript的template literal模板字符串

这个需求可以实现，按以下任意一种方式配置即可生效：

1. 临时单次注入（适合偶尔使用的场景） #

• 把光标移动到模板字符串包裹的HTML内容内部
• 按下Alt + Enter调出快速操作菜单，选择Inject language or reference
• 在弹出的选项列表中选中HTML，此时再按下Ctrl + Alt + L格式化快捷键，即可对模板内的HTML内容自动排版缩进

2. 注释标记注入（无需修改IDE配置，代码可在团队内共享规则） #

• 直接在模板字符串的反引号前添加/* HTML */注释标记，示例代码如下：

let innerHTML = /* HTML */`<div><span>like this</span></div>`;

• 标记后IDE会自动识别该字符串内容为HTML代码，按下格式化快捷键即可自动按HTML规则排版

3. 全局自动识别（适合大量使用该写法的项目，无需每次手动标记） #

• 打开IDE设置：Windows/Linux系统走File > Settings路径，macOS系统走IntelliJ IDEA > Settings路径
• 依次进入Editor > Language Injections设置页
• 点击页面右上角的+按钮，选择JavaScript String Literal选项
• 在弹出的配置窗口中，Language项选择HTML，Places patterns项添加匹配规则：+ jsStringLiteral().whereText(startsWith("<")).build()
• 保存配置后，所有内容以<开头的JS模板字符串都会自动被识别为HTML，按下格式化快捷键即可自动排版

注意事项 #

• 如果格式化后的缩进、换行规则不符合预期，可以到Settings > Editor > Code Style > HTML路径下调整HTML代码的格式化规则，模板内的HTML内容会严格遵循该配置排版
• 2020.1之前的旧版本IDE对该功能的支持有缺陷，遇到异常可以升级IDE版本后再尝试

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