Preact `'h' is defined but never used. (no-unused-vars)`

[alex996]

This a follow up to #351. The issue was re-opened in May, but went stale and got auto-closed. I read the thread and didn't find any definitive solution, so I'd like to bring it up again.

I have a Preact project that defines an h pragma, as per the docs

"plugins": [
  ["@babel/transform-react-jsx", { "pragma":"h" }]
]

Unfortunately, this pragma raises no-unused-vars error, as in

import { h } from 'preact' // 👎 'h' is highlighted in the editor
const App = props => <div />

At the same time, React pragma in react is auto-magically ignored, which is correct

import React from 'react' // 👍 doesn't raise 'no-unused-vars`
const App = props => <div />

The only known workaround in Preact is to include /* eslint-disable no-unused-vars */ at the top of each component file, which is redundant. I tried other options, including

• creating .eslintrc with "rules" key, but Standard ignores it by design
• "rules": {"no-unused-vars": [0, { "varsIgnorePattern": "^h$" }]} in package.json, no effect
• adding "globals": ["h"] - of course, no effect either
• "settings" key, suggested here, but it also seems to be ignored
• just about every trick suggested in #351, no luck 😞

Is there anything at that can be done about this? It not only affects preact, but other libs like deku or hyperapp. The way I see it, Standard could

• allow ignoring rules (which I think you have a firm stance against 😃)
• ignore h by default, just like React
• add a new setting (?)

Any thoughts? Thanks

---

What version of standard?
^12.0.1

What operating system, Node.js, and npm version?

• node -v: 11.2.0
• npm -v: 6.4.1

What did you expect to happen?
It should ignore the h pragma.

What actually happened?
It reports 'h' is defined but never used. (no-unused-vars)

[LinusU]

I think that there is a special comment that you can use to instruct eslint of the pragma you are using 🤔 something like: /* @jsx h */

[stevenzeck]

I'm receiving somewhat similar errors with probot work using standard and typescript-eslint-parser. I'll import classes, such as import { Application, Context } from 'probot' and then when I use them like the below, I get Application is defined but never used.

export = (app: Application) => {
// code here
}

[alex996]

@LinusU It doesn't seem to have any effect in standard@^12.0.1. Ex:

/* @jsx h */
import { h, render } from 'preact' // 'h' is defined but never used

Besides, it also requires to be added to every file. It's surely a bit more succinct than

import { h, render } from 'preact' // eslint-disable-line no-unused-vars

but still, annoying. Tbh, I'm sure most people can live with that, but couldn't we have a config option for this?

[LinusU]

@alex996 did you try having some JSX in the file as well? Otherwise, I think that it will, correctly, warn for no usage...

/* @jsx h */
import { h } from 'preact' // 'h' is defined but never used

module.exports = function test () {
  return <div>Test</div>
}

edit:

just tried it, doesn't work:

[alex996]

@LinusU Same, it doesn't work with JSX either.

/* @jsx h */
import { h, render } from 'preact' // 'h' is defined but never used
export const Component = props => <div />

[JerryGreen]

It definitely needs a setting for that. I think this should ideally be an environment config's part, like this:

"env": ["browser", "jest", "preact"]

But these environments are part of eslint, not standard. And, unfortunately, looks like it's not possible to add custom environments yet (I haven't found such a documentation, also - look this and that)

[doubleswirve]

@LinusU, @alex996 I had luck with the @jsx comment by using two * at the beginning of the comment, e.g.,

/** @jsx h */
import { h, render } from 'preact'

I think you were using /* @jsx h */. Hope that helps! :)

[LinusU]

Ahhhhhh, that's it 🤦‍♂️ 😄

@doubleswirve good find 👍

[alex996]

Nice, the only downside is you have to copy-paste this to every component file. Instead, I ended up using eslint where I simply extend standard and plugin:react/recommended. You get a minimal config that works perfect with both Standard and React. On top of that, it takes no effort to integrate with prettier and get auto-formatting for free. I'm going to use this setup from now on.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

[kilgarenone]

I add this to my eslintrc to fix it:

"settings": {
    "react": {
      "pragma": "h"
    }
}