reactjs - 如何在 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"] }

这应该消除任何错误 - 但你不会得到突出显示。