首页 文章

适用于JSX的ESlint Prettier

提问于
浏览 次
0

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

reactjs jsx eslint prettier

1 回答

  • 1

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

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

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

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

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

    我的rootnode当然来自我的 package.json ，对于你的 . eslintrc 应该是不同的，但extending应该是相同的 .

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

    回复于

相关问题