用更漂亮的格式设置Vue模板文字

Question

我的vue文件没有* .vue结尾，看起来像普通的Javascript，我想知道如何用更漂亮的格式格式化模板文字？我也没有构建步骤。

据我所知，我可以在文本前加上HTML或GraphQL作为前缀，这样更漂亮就知道该怎么做，但是我找不到Vue的任何解决方案

...
template: /* HTML */ `<div>...</div>`
...

，但是它并没有考虑诸如{{和}}之类的模板细节

示例：

export default {
  name: 'SomeName',
  props: [],
  template: `
    <div class="c-order__step">
      <div class="c-order__step-title">
        {{t('order_form_tab_trade_in_title')}}
      </div>
      <span class="c-order__step-description">
        {{t('order_form_tab_trade_in_description')}}
      </span>
    </div>
  `,
  data() {
    return {};
  },
  methods: {},
};