1

我对更漂亮的正确配置以实现 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 文件，请发布它。

4

2 回答 2

1

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

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

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

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

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

我的根节点当然来自我的package.json，对你来说应该是不同的，. eslintrc但扩展应该是一样的。

这些只是我能想到的一些事情，希望它们对您有所帮助，并希望您的 linting 得到解决，这些问题也困扰着我很多！

于 2018-03-14T13:48:17.673 回答
0

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

于 2019-08-14T18:36:55.260 回答