Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[no-unused-vars] does not count JSX as usage #111

Closed
borovik96 opened this issue Jan 21, 2019 · 11 comments

Comments

@borovik96
Copy link

commented Jan 21, 2019

Repro

{
  "extends": ["plugin:@typescript-eslint/recommended"],
  "plugins": ["@typescript-eslint/eslint-plugin"],
  "rules": {
    "react/jsx-filename-extension": [1, {
      "extensions": [".ts", ".tsx", ".js", ".jsx"]
    }],
  },
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 2018,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
}
import React from 'react'; // 'React' is defined but never used. [@typescript-eslint/no-unused-vars]
import Document from 'next/document';
import {
  ServerStyleSheet
} from 'styled-components';

export default class MyDocument extends Document {
  public static async getInitialProps(ctx): DefaultDocumentIProps {
    const sheet = new ServerStyleSheet();

    const originalRenderPage = ctx.renderPage;
    ctx.renderPage = () => originalRenderPage({
      enhanceApp: App => props => sheet.collectStyles(<App {...props} />) // 'App' is defined but never used. [@typescript-eslint/no-unused-vars]
    });

    const initialProps = await Document.getInitialProps(ctx);
    return {
      ...initialProps,
      styles: [...initialProps.styles, ...sheet.getStyleElement()]
    };
  }
}

Expected Result
Rule not trigger if a variable used as jsx
Actual Result
Rule trigger if a variable used as jsx
Additional Info

Versions

package version
@typescript-eslint/eslint-plugin 1.0.0
@typescript-eslint/parser 1.0.0
TypeScript ^3.2.4
ESLint ^5.12.1
node v10.11.0
npm 6.4.1
@j-f1

This comment has been minimized.

Copy link
Member

commented Jan 21, 2019

We’ve been asking people to use the react/jsx-uses-vars rule, but I’m wondering if we should include this as a default behavior (cc @typescript-eslint/core-team)

@borovik96 borovik96 changed the title [no-unused-vars] do not count JSX as usage [no-unused-vars] do not counts JSX as usage Jan 21, 2019

@borovik96 borovik96 changed the title [no-unused-vars] do not counts JSX as usage [no-unused-vars] does not count JSX as usage Jan 21, 2019

@JamesHenry

This comment has been minimized.

Copy link
Member

commented Jan 21, 2019

No, I don't think we would want to build in special consideration for react. This is the reason why ESLint changed its behaviour towards it: https://eslint.org/blog/2015/03/eslint-0.17.0-released#changes-to-jsxreact-handling

We can definitely provide documentation around this, though!

@borovik96

This comment has been minimized.

Copy link
Author

commented Jan 22, 2019

I added "plugin:react/recommended" to extedns array and it works now. I can add this info to doc for [no-unused-vars] rule

@bradzacher bradzacher added bug wontfix and removed triage labels Jan 22, 2019

@bradzacher

This comment has been minimized.

Copy link
Member

commented Jan 22, 2019

Because we lost the context in the migration, issue on previous repo:
bradzacher/eslint-plugin-typescript#283

I'll close this issue as the bug itself is working as intended.
Feel free to open a PR to add to the docs if you want!

@Jessidhia

This comment has been minimized.

Copy link
Contributor

commented Jan 31, 2019

It seems that this rule is now being asserted even with react/jsx-uses-vars enabled. I wrote the enable as an explicit enable comment for this screenshot to make sure it is not accidentally missing:

image

@bradzacher

This comment has been minimized.

Copy link
Member

commented Jan 31, 2019

@Jessidhia - this specific issue is about no-unused-vars not recognising usage of import React, or JSX component usage (const X = ....; <X />).

Please open a separate issue for the bug you have found, as it is instead about variable usage in JSX attributes (which I believe should be covered by our plugin?)

@TidyIQ

This comment has been minimized.

Copy link

commented May 1, 2019

So I just installed this and I'm not sure how to use it properly. Exactly what should I add to my config to stop this from happening in my React app?

@bradzacher

This comment has been minimized.

Copy link
Member

commented May 1, 2019

As mentioned in the first reply to the issue.

Use the react/jsx-uses-vars rule.

There is documentation there for setting up the plugin.

@TidyIQ

This comment has been minimized.

Copy link

commented May 1, 2019

It doesn't mention anything about the config file on that page. Do I need to install a separate plugin?

@bradzacher

This comment has been minimized.

Copy link
Member

commented May 1, 2019

Hop into the root of that repo and there should be more information about the linked plugin...

You need to install eslint-plugin-react

@alexanderby

This comment has been minimized.

Copy link

commented Jul 10, 2019

For those who uses JSX without React, here is a solution:

  1. Install eslint-plugin-local package.
  2. Create .eslintplugin.js file in project root.
  3. Declare some custom rules (based on eslint-plugin-react):
module.exports.rules = {
    'jsx-uses-my-pragma': {
        create(context) {
            const pragma = 'my';
            const usePragma = () => context.markVariableAsUsed(pragma);
            return {
                JSXOpeningElement: usePragma,
                JSXOpeningFragment: usePragma,
            };
        },
    },
    'jsx-uses-vars': {
        create(context) {
            return {
                JSXOpeningElement(node) {
                    if (node.name.name) {
                        const variable = node.name.name;
                        context.markVariableAsUsed(variable);
                    }
                },
            };
        },
    },
};
  1. Add declared rules to ESLint config:
module.exports = {
    parser: '@typescript-eslint/parser',
    plugins: ['@typescript-eslint', 'local'],
    extends: ['plugin:@typescript-eslint/recommended'],
    rules: {
        // ...
    },
    overrides: [
        {
            files: ['**/*.tsx'],
            rules: {
                'local/jsx-uses-my-pragma': 'error',
                'local/jsx-uses-vars': 'error',
            },
        },
    ],
};
  1. Run eslint, no more no-unused-vars!
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
7 participants
You can’t perform that action at this time.