Question

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

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进行自动保存后，它的工作很奇怪。
您能推荐解决方案吗？

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解决了这个问题

Answer 1

将此行添加到您的.editorconfig

 `jsxBracketSameLine: true`

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

如果您没有.editorconfig，请打开VSCode的settings.json集

 prettier.jsxBracketSameLine: true

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

Answer 2

通过VS Code使用更漂亮的完美方式

安装Prettier和ESLint VS代码扩展

安装以下Visual Studio代码扩展：

ESLint
漂亮

创建具有以下内容的.eslintrc文件：

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

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

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

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

保存文件时，您很可能希望应用“更漂亮”的格式。这样做，将以下内容添加到您的Visual Studio代码工作区设置：

"editor.formatOnSave": true

防止实施更漂亮的违规行为（可选）

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

注意：您的Git存储库必须已经初始化，否则，赫斯基不会安装预提交钩子。

安装软件包：

yarn add --dev pretty-quick husky

然后将沙哑部分添加到package.json文件中：

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

你很好！

Reactjs中的自动美化打破了界限

2 个答案: