JSX的ESlint + Prettier

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 . eslintrc但擴展應該相同。

這些只是我能想到的幾件事，希望它們能為您提供幫助，並希望您的棉絨得到解決，這些問題也讓我很煩惱！

Answer 2

我遇到了同樣的問題，可以通過刪除Beatify擴展名來解決。