用于 JSX 的 ESlint + Prettier

Question

我对正确配置 prettier 以实现 jsx 标签的正常样式感到沮丧。
我想要这个：

const template = (
  <div>
    <h1> Hello world!</h1> 
    <p> This is some info</p>
  </div>
);

我得到了这个：

const template = (
  <div>
    <h1> Hello world! </h1> <p> This is some info </p>{' '}
  </div>
);

我的 .eslintrc 是：

{
    "parser": "babel-eslint",
    "extends": [
        "airbnb",
        "prettier",
        "prettier/react"
    ],
    "env": {
        "browser": true
    },
    "plugins": [
        "react",
        "jsx-a11y",
        "import",
        "prettier"
    ],
    "rules": {
        "no-console": "off",
        "linebreak-style": "off",
        "react/jsx-filename-extension": [
            1,
            {
                "extensions": [".js", ".jsx"]
            }
        ],
        "react/react-in-jsx-scope": 0,
        "prettier/prettier": [
            "error",
            {
                "trailingComma": "es5",
                "singleQuote": true,
                "printWidth": 120
            }
        ]
    }
}

我一直在搜索这个问题，但我不知道该怎么做。
如果有人有好的 .eslintrc 文件，请 post 它。

Answer 1

我找不到你的配置有什么问题。有几个选项，但我真的不知道你的设置。

我觉得你的IDE里面可能有Prettier的配置。因此，例如，如果您使用 VSCode 并安装了 Prettier 扩展，您可以覆盖其中的一些设置。

第二，我认为 {' '} 是因为您的示例中有尾随 space。我真的没办法检查或复制。我建议安装一个删除尾随 spaces 的插件。我对 VSCode.

使用尾随空格

您可以检查的最后一件事是安装 eslint-config-react-app 并执行如下操作：

"eslintConfig": {
    "extends": "react-app"
},

我的根节点当然来自我的 package.json，对于您的 . eslintrc 应该不同，但 extending 应该相同。

这些只是我能想到的一些事情，希望它们能帮到你，希望你能解决你的 linting，这些问题也让我很烦恼！

Answer 2

我遇到了同样的问题，通过删除 Beatify 扩展解决了。

用于 JSX 的 ESlint + Prettier

ESlint + Prettier for JSX

jsx

reactjs

eslint

prettier