No way to specify JSX pragma in config

Tell us about your environment

• ESLint Version: 4.9.0

What parser (default, Babel-ESLint, etc.) are you using?

default

Please show your full configuration:

Configuration

{
  "env": {
    "browser": true,
    "commonjs": true,
    "es6": true,
    "node": true,
    "jest": true
  },
  "extends": "airbnb-base",
  "plugins": ["import"],
  "settings": {
    "import/resolver": "webpack"
  },
  "parserOptions": {
    "ecmaVersion": 6,
    "ecmaFeatures": {
      "jsx": true,
      "experimentalObjectRestSpread": true
    },
    "sourceType": "module"
  },
  "rules": {
    "jsx-quotes": [
      "error",
      "prefer-double"
    ],
    "arrow-parens": [
      "error",
      "as-needed"
    ],
    "prefer-arrow-callback": [
      "error",
      {
        "allowNamedFunctions": false,
        "allowUnboundThis": false
      }
    ],
    "no-const-assign": "warn",
    "no-this-before-super": "warn",
    "no-undef": "warn",
    "no-unreachable": "warn",
    "no-unused-vars": "warn",
    "no-multiple-empty-lines": [
      "error",
      {
        "max": 2,
        "maxBOF": 1
      }
    ],
    "constructor-super": "warn",
    "semi": [
      "error",
      "never"
    ],
    "quotes": [
      "error",
      "single"
    ],
    "valid-typeof": "warn",
    "comma-dangle": [
      "error",
      {
        "arrays": "always-multiline",
        "objects": "always-multiline",
        "imports": "always-multiline",
        "exports": "always-multiline",
        "functions": "ignore"
      }
    ]
  }
}

What did you do? Please include the actual source code causing the issue, as well as the command that you used to run ESLint.

import * as duckweed from 'duckweed'

const view = ({ model }) => ((_ = model.services.i18n.gettext) => (
  <div>
    {_('Hello world!')}
  </div>
))()

What did you expect to happen?

There would be a way for me to tell what JSX pragma ESLint should use (duckweed.html as configured in Babel).

What actually happened? Please include the actual, raw output from ESLint.

There was no (documented) way to specify the pragma, so dukweed gets flagged as unused.

[eslint] 'duckweed' is defined but never used. (no-unused-vars)

Further explanation

While it’s true that React was the first using JSX, it’s not specific to React. In both TypeScript and Babel, it is possible to specify a custom pragma for JSX. There are a number of libraries out there (not just React) that take advantage of this for custom JSX implementations, and even without a library, one can always create custom functions to handle JSX (which is what I do in another project). Furthermore, this pragma is not necessarily specified in the code, as it can be specified in the compiler’s configuration (both Babel and TS, for instance).

Considering the above, and considering that ESLint provides support for JSX checking before transpiling, I think it would not be unreasonable to expect JSX pragma config to be available and/or documented.

EDIT: I’m not claiming that this is a widely popular feature, and I fully understand if this is viewed as just another wart that ESLint contributors may end up having to maintain for no good reason. 😃

[foxbunny]

Well, yes, of course I could do that. Point is, JSX is really meaningless without a factory function, so support of JSX is only partial if you cannot specify the function that should be used. Since ESLint provides support for JSX in some form, it would be more complete to include the pragma configuration.

[not-an-aardvark]

Generally, people use this babel plugin for JSX when using React, which converts <div /> into React.createComponent('div', null), and converts <Component /> into React.createComponent(Component, null). So it is true that the transpiler is interpreting the JSX, but the transpiler is still applying library-specific semantics to do the interpretation.