Javascript IntelliJ不'；不允许使用Vue.js组件模板换行

我在Vue.js中使用IntelliJ IDEA，在定义组件模板时遇到了一个小问题。简单地说，IntelliJ不会让它们超过一行而不尝试连接

范例

Vue.component('app-button', {
    template: '<div class="button-container"><div class="button-outer"><div class="button-inner"></div></div></div>'
});

Vue.component（'app-button'{
模板：“”
});

当我尝试将其隔开，使每行上都有一个HTML标记时

Vue.component('app-button', {
    template: '<div class="button-container">' +
    '<div class="button-outer">' +
    '<div class="button-inner">' +
    '</div>' +
    '</div>' +
    '</div>'
});

Vue.component（'app-button'{
模板：“”+
'' +
'' +
'' +
'' +
''
});

这使得至少可以说很难定义模板。有没有办法让IntelliJ更好地使用这些字符串？如果没有，我可以在单独的文件或其他文件中定义它们吗？

使用ES6模板（），如下所示：

Vue.component('app-button', {
    template: `<div class="button-container"><div class="button-outer"><div class="button-inner"></div></div></div>`
});

Vue.component（'app-button'{
模板：``
});

这绝对是正确的JavaScript语法。我建议更模块化，创建外部文件。我没有意识到我需要使用反勾号，我以为这些只是撇号！它在IntelliJ中的工作原理与预期一样，带有回标记，我的HTML现在更易于阅读。非常感谢。