相关疑难解决方法(0)

从今天起，安装了 Prettier Extension 的 VSCode 以一种非常奇怪的方式格式化了我的 HTML。例如：

<button
  class="btn btn-secondary mr-2"
  (click)="updateEditState(EditState.preview)"
  *ngIf="!(preview | async)"
>
  <ng-container i18n="AppPreviewEditButton|Enables the Preview mode of the page@@AppPreviewButton"
    >Preview</ng-container
  >
</button>
<button class="btn btn-secondary mr-2" (click)="updateEditState(EditState.edit)" *ngIf="!(edit | async)">
  <ng-container i18n="AppPreviewEditButton|Enables the Edit mode of the page@@AppEditButton"
    >Edit</ng-container
  >
</button>

注意>新行。有没有其他人经历过同样的事情并有解决方案？

当我使用 prettier 格式化 HTML 文件时，它看起来像这样：

<nav>
  <ul>
    <li><a href="#" title="Home">Home</a></li>
    <li><a href="#" title="About">About</a></li>
    <li><a href="#" title="Sign Up">Sign Up</a></li>
    <li><a href="#" title="Contact">Contact</a></li>
    <li><a href="#" title="Careers">Careers</a></li>
  </ul>
</nav>

但是当我将相同的标签放入 JSX 文件中时，它会像这样重新格式化：

import React from "react";

const Demo = () => {
  return (
    <nav>
      <ul>
        <li>
          <a title="Home">Home</a>
        </li>
        <li>
          <a title="About">About</a>
        </li>
        <li>
          <a title="Sign Up">Sign Up</a>
        </li>
        <li>
          <a title="Contact">Contact</a>
        </li>
        <li>
          <a title="Careers">Careers</a>
        </li>
      </ul>
    </nav>
  );
};

export default Demo;

我怎样才能阻止这种行为？即使价值很高，也会发生这种情况prettier.printWidth