Reactjs 中的 auto prettier 打破了界限答案

【问题标题】：The auto prettier in Reactjs breaks the lineReactjs 中的 auto prettier 打破了界限
【发布时间】：2019-07-18 12:57:00
【问题描述】：

这是没有自动保存的原始代码更漂亮。

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> <

我通过消除 Buefy 解决了这个问题

【问题讨论】：

标签： reactjs prettier

【解决方案1】：

将此行添加到您的.editorconfig

 `jsxBracketSameLine: true`

更多关于 PrettierConfig jsxBracket 的信息和示例

如果你没有.editorconfig那么打开VSCode的settings.json设置

 prettier.jsxBracketSameLine: true

关于更漂亮的VSCode settings jsxBracket 的更多信息

【讨论】：

【解决方案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 Code 工作区设置中：

"editor.formatOnSave": true

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

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

注意：你的 Git 仓库必须已经初始化，否则 husky 不会安装 precommit 钩子。

安装软件包：

yarn add --dev pretty-quick husky

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

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

你可以走了！

【讨论】：