【问题标题】: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 代码扩展:

      1. ESLint

      2. 更漂亮

      创建一个包含以下内容的 .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"
          }
       }
      

      你可以走了!

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2023-01-20
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多