我如何使用 intellij 在 javascript 中更漂亮的模板文字

Question

我在 javaScript 中使用模板文字

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

是否可以像 intellij 中的 jsx 一樣自動縮進或更漂亮？

當我按下 [ ctrl + alt + l ] 時什么都不改變

我想自動制作這種格式

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

是否可以？

Answer 1

如果您使用的是 Visual Studio Code，則可以使用此擴展： https ://marketplace.visualstudio.com/items?itemName=Tobermory.es6-string-html

（我確信其他 IDE 有等效的擴展）

Answer 2

如果您使用 Prettier，您應該使用模板文字標簽將其標記為 HTML，否則它不知道該字符串包含 HTML。

Prettier 稱之為嵌入式語言，你可以在下面看到這也啟用了各種語法高亮。

這一行：

let innerHTML = html`
  <div><span> This is a very long line that should be wrapped 123456789 123456789 123456789 </span></div>
`;

被包裹為

let innerHTML = html`
  <div>
    <span>
      This is a very long line that should be wrapped 123456789 123456789
      123456789
    </span>
  </div>
`;

您可以從code-tag獲取此html函數和其他函數：

npm install code-tag

import { html } from 'code-tag';

html`<div>this is page "${document.title}"`

Answer 3

您只需在模板字符串前添加一條注釋，Prettier 就會將其提取出來：

function vanillaComponent() {
  return /* HTML */ `
    <div>
      <h1>Hello</h1>
    </div>
  `
}

目前評論必須大寫，否則不起作用。 使用 VSCode 測試。

Answer 4

您可以使用標記模板；

const innerHtml = html`
    <img src=${Icon} id="content-logo" />
   `;

如果您遇到這種錯誤： ReferenceError: html is not defined 。 可以自己定義html function；

const html = (strings, ...values) =>
  String.raw({ raw: strings }, ...values);

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#raw_strings