Reactjs 中的 auto prettier 打破了界限

Question

这是没有自动保存prettier的原始代码。

const Register = () => (
    <div className="container-fluid">
      <nav className="row bg-white border-bottom">
        <div className="col text-secondary logotype">
          logo
        </div>
        <div className="col-6 text-secondary text-center menu">
          register
        </div>
        <div className="col text-right clock">
        </div>
      </nav>
   </div>

在 vscode 中使用 prettier 自动保存后，效果很奇怪。
您能推荐解决方案吗？

const Register = () => ( <
  div className = "container-fluid" >
  <
  nav className = "row bg-white border-bottom" >
  <
  div className = "col text-secondary logotype" >
  logo <
  /div> <
  div className = "col-6 text-secondary text-center menu" >
  register <
  /div> <
  div className = "col text-right clock" >
  <
  /div> <
  /nav> <

I solved this problem by eliminating Buefy

Answer 1

将此行添加到您的 .editorconfig

 `jsxBracketSameLine: true`

有关此 PrettierConfig for jsxBracket

的更多信息和示例

如果你没有.editorconfig然后打开VSCode的settings.json集

 prettier.jsxBracketSameLine: true

有关 jsxBracket

更漂亮 VSCode settings 的更多信息

Answer 2

在 VS Code 中使用 Prettier 的完美方式

安装 Prettier 和 ESLint VS 代码扩展

安装以下 Visual Studio 代码扩展：

ESLint
更漂亮

创建包含以下内容的 .eslintrc 文件：

{
  "extends": "react-app",
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}

如果您对默认的 Prettier 配置不满意，那么您可以使用自己的选项创建一个 .prettierrc 文件，例如：

{
  "singleQuote": true,
  "trailingComma": "es5"
}

保存时应用更漂亮的格式（可选）

您很可能希望在保存文件时应用 Prettier 格式。为此，请将以下内容添加到您的 Visual Studio 代码工作区设置中：

"editor.formatOnSave": true

防止更漂亮的违规行为发生（可选）

为了防止未格式化的代码被提交到 Git，您可以添加一个预提交挂钩。有几种方法可以做到这一点，我将展示使用非常快速和 husky 设置（选项 2）的步骤。我已经选择了这个选项，因为它非常快速地尊重 .prettierrc 文件。

注意：您的 Git 存储库必须已经初始化，否则预提交挂钩将不会被 husky 安装。

安装软件包：

yarn add --dev pretty-quick husky

然后将 husky 部分添加到您的 package.json 文件中：

"husky": {
    "hooks": {
      "pre-commit": "pretty-quick --staged"
    }
 }

一切顺利！

Reactjs 中的 auto prettier 打破了界限

The auto prettier in Reactjs breaks the line

reactjs

prettier