how to configure styled jsx in Eslint

Question

I'm setting up an environment this way to work with a ReactJs/Next.js project that uses 'styled jsx', but eslint can't fix the css flaws in the middle of the code.

How can I best configure eslint to work with the project I'm working on?

 {
          "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
          }
        }

score 0 · Answer 1 · answered Jul 19 '21 at 20:50

Check this out:

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

If you're using eslint-plugin-import, the css import will generate errors, being that it's a "magic" import (not listed in package.json). To avoid these, simply add the following line to your eslint configuration:

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

This should remove any errors - but you won't get highlighting.

how to configure styled jsx in Eslint

1 Answers1