如何在 Eslint 中配置样式化的 jsx

问题描述

我正在以这种方式设置环境以处理使用“样式化 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
          }
        }

解决方法

看看这个：

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

如果您使用 eslint-plugin-import，css 导入将生成错误，因为它是“魔术”导入（未在 package.json 中列出）。为了避免这些，只需将以下行添加到您的 eslint 配置中：

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

这应该会消除所有错误 - 但不会突出显示。