Question

我对为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文件，请发布。

Answer 1

我发现您的配置没有任何问题。有几个选项，但我真的不知道你的设置。

我认为你的IDE中可能有Prettier的配置。因此，例如，如果您使用VSCode并安装了Prettier扩展程序，则可以覆盖其中一些设置。

第二件事是我认为{''}是因为你的例子中有一个尾随空格。我真的无法检查或复制。我建议安装一个删除尾随空格的插件。我使用尾随空格作为VSCode。

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

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

我的rootnode当然来自我的package.json，您的. eslintrc应该有所不同，但extending应该是相同的。

这些只是我能想到的一些事情，希望他们有所帮助，希望你能解决问题，这些问题也让我烦恼不已！

Answer 2

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

适用于JSX的ESlint + Prettier

2 个答案: