Preact: Provide an eslint plugin `eslint-plugin-preact`

Created on 6 Feb 2020 · 5Comments · Source: preactjs/preact

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

Source

muuvmuuv

Most helpful comment

Hi all - I went ahead and build an ESLint config (didn't need to be a plugin) that should provide a good set of defaluts:

https://github.com/preactjs/eslint-config-preact

developit on 27 Feb 2020

🎉6

All 5 comments

That's super awesome! Something like that is indeed missing :+1: Would you mind contributing such a config?

marvinhagemeister on 6 Feb 2020

When I get some time next week I'll have a look but I have to take over a project of someone too so Idk.

Questions I have and tasks:

how to create an eslint plugin?
what is the best way to combine m. plugins in eslint (JS/JSON/YAML)?
what options/settings should we provide? (or we do it like prettier → minimal settings)
which rules should take place for preact? (maybe copy all from react and edit them in first place)
- write class instead of className
- use native event bindings onClick → onclick
- use native meta key names httpEquiv → http-equiv
enable a11y by default? (I think this would be good + with a more strict option like plugin:jsx-a11y/all)
add editorconfig/pretter plugin directly? (to help newbies write more readable code, maybe just a section in the README)
how to write eslint auto fixable rules (huge time saver)
write tests ^^
include the config in the starters (with --eslint option?)
typescript? (Idk if TS is even possible with preact but would be killin')
maintenance! Someone should periodically test/check or update the config