Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Provide an eslint plugin `eslint-plugin-preact`

See original GitHub issue

Hey. I’m currently building a documentation site in pure preact for a library of mine. For the lib I already used eslint and now I want to extend the already existing eslint config with one that fits into preact but couldn’t get any react configuration to work properly.

The issue with my current setup is that all the react eslint plugins/configs requires stuf like className which I don’t want to use because it has a reason why I’m using preact (more web focused).

//src/docs/components/consent2/index.js
    5:19  error  Unable to resolve path to module './style'               import/no-unresolved
   10:5   error  Unknown property 'class' found, use 'className' instead  react/no-unknown-property
//src/docs/components/head/index.js
  36:13  error  Unknown property 'http-equiv' found, use 'httpEquiv' instead  react/no-unknown-property

In my opinion it totally makes sense to provide an eslint plugin to enforce users to use the right syntax. React does it with the create-react-app as well.

Additionally, users could be forced to use jsx-a11y to write better accessible websites.

This is how both of my eslint configs look ATM:

./.eslintrc.json:

{
  "parser": "babel-eslint",
  "plugins": [
    "import"
  ],
  "extends": [
    "eslint:recommended",
    "plugin:import/errors",
    "plugin:import/warnings",
    "plugin:prettier/recommended"
  ],
  "env": {
    "node": true,
    "es6": true,
    "browser": true
  },
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module"
  },
  "rules": {
    "import/order": [
      "error",
      {
        "groups": [
          [
            "builtin",
            "external",
            "internal"
          ]
        ]
      }
    ]
  }
}

./src/docs/.eslintrc.json:

{
  "extends": [
    "../../.eslintrc.json",
    "plugin:react/recommended",
    "plugin:jsx-a11y/recommended"
  ],
  "settings": {
    "react": {
      "createClass": "createElement",
      "pragma": "h"
    }
  },
  "rules": {
    "react/prop-types": "off"
  }
}

I expect something like this – no parser to add or settings to set, just OOTB support for the correct syntax:

{
  "extends": [
    "eslint:recommended",
    "plugin:preact/recommended",
    "plugin:jsx-a11y/recommended",
    "plugin:prettier/recommended"
  ]
}