nextJs 的奇怪格式 (vscode)

Question

我使用 prettier 作为格式化程序。当我阅读一个简单的 JSX 函数时，它被写成

function HomePage() {
  return;
  <div>
    <h1>Hello Next.js</h1>
    <p> Welcome to the home page</p>
  </div>;
}

export default HomePage;

然而，当保存时，自动格式化程序将它变成

function HomePage() {
    return; <
    div >
        <
        h1 > Hello Next.js < /h1> <
        p > Welcome to the home page < /p> <
        /div>;
}

export default HomePage;

我已经关闭了 prettier 并关闭了我的大部分其他扩展，但这并没有改变，我相信它是 vscode 以某种方式固有的。有人有解决办法吗？

Answer 1

点击右下角JavaScript，搜索JavaScript React，回车（根据React改语言美化）

点击JavaScript:

键入 React，然后按回车键。

再次保存文件应该会正确地自动格式化它。

您可以对所有 React (Next.JS) 文件执行此操作，或者只需在 NextJS 应用程序的根目录中，打开 settings.json (Ctrl+Shift+P →“打开工作区设置（JSON）”）并包括以下内容：

"files.associations": {
  "*.js": "javascriptreact"
}

nextJs 的奇怪格式 (vscode)

Weird Formatting for nextJs (vscode)

javascript

format

visual-studio-code

next.js