如何在Eslint中配置样式化jsx

Question

我以这种方式设置了一个环境来处理一个使用“styled jsx”的ReactJs/Next.js项目，但是eslint不能修复代码中间的css缺陷。

如何才能最好地配置eslint来处理我正在处理的项目？

 {
          "parser": "@babel/eslint-parser",
          "extends": [
            "airbnb",
            "plugin:react/recommended"
          ],
          "env": {
            "es6": true,
            "browser": true,
            "node": true,
            "jest": true
          },
          "settings": {
            "import/core-modules": ["styled-jsx", "styled-jsx/css"],
          },
          "plugins": [
            "react",
            "react-hooks"
          ],
          "parserOptions": {
            "sourceType": "module",
            "allowImportExportEverywhere": true
          },
          "rules": {
             // ..rules
          }
        }

Answer 1

看看这个：

https://github.com/vercel/styled-jsx#eslint

如果你正在使用eslint-plugin-import，css导入将会产生错误，因为它是一个“神奇”的导入(没有在package.json中列出)。要避免这些，只需将以下行添加到eslint配置中：

"settings": {"import/core-modules": ["styled-jsx/css"] }

这应该会删除所有的错误--但你不会得到突出显示。