jsx-eslint / eslint-plugin-react

React-specific linting rules for ESLint
MIT License
8.93k stars 2.77k forks source link

False positive no-unused-vars with import used on typescript interfaces #2623

Closed soullivaneuh closed 4 years ago

soullivaneuh commented 4 years ago

With the following react-native typescript code block:

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { StackNavigationProp } from '@react-navigation/stack';

interface Props {
  name: string,
  navigation: StackNavigationProp<any, 'SignUp'>,
}

I have the following false positive error:

/code/fixtures/App.tsx
   3:10  error  'StackNavigationProp' is defined but never used  no-unused-vars

I setup the config for react using the overrides section (I have a global and generic configuration, not only for react):

overrides: [
  {
    files: ['*.jsx', '*.tsx'],
    extends: [
      'plugin:react/recommended',
    ],
    parser: '@typescript-eslint/parser',
  },
],

But the bug happens also with a global configuration.

It looks like the plugin is not working with import used on interfaces.

Note that you may see the full configuration on this Pretty project MR: https://gitlab.com/nexylan/pretty/-/merge_requests/71

ljharb commented 4 years ago

Now that import type exists, why not use that?

Either way, no-unused-vars is an eslint core rule, and not part of this plugin.

soullivaneuh commented 4 years ago

@ljharb

Now that import type exists, why not use that?

Not sure what do you mean by that. May you provide an example?

Either way, no-unused-vars is an eslint core rule, and not part of this plugin.

Well, is was thinking it's related to react specific usage like this rule: https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-uses-vars.md

Maybe I'm wrong?

Thanks.

soullivaneuh commented 4 years ago

This is weird, I tested my config against a main.ts file (so not managed by the plugin):

import { Bar } from 'bar';

interface Thing {
  foo: Bar;
}

And I don't have this king of error.

soullivaneuh commented 4 years ago

Ok you was right, this was a typescript plugin issue, adding this rule solve the problem:

  '@typescript-eslint/no-unused-vars': ['error', {
    args: 'none',
  }],

Thanks for your help. But I'm curious about our first suggestion for import type. May you add some details?

ljharb commented 4 years ago

Yes, TS 3.8 has import type for importing types, which means you can reserve import only for value-space imports. It's much clearer and should have been the only way to import types since TS's inception, but at least now they've fixed their mistake.