Find out unused imports on a React Native project

Question

I imported the following React Native project into VS Code.

https://github.com/callstack/react-native-paper/tree/master/example

Then, on the following file, on line 15:

https://github.com/callstack/react-native-paper/blob/master/example/src/CardExample.js#L15

I added (just experimenting), the line:

import { StatusBar, I18nManager, AsyncStorage } from 'react-native';

as you can see on the code below:

/* @flow */

import * as React from 'react';
import { Alert, ScrollView, StyleSheet } from 'react-native';
import {
    Title,
    Caption,
    Paragraph,
    Card,
    Button,
    withTheme,
    type Theme,
} from 'react-native-paper';

import { StatusBar, I18nManager, AsyncStorage } from 'react-native';

type Props = {
    theme: Theme,
};

class CardExample extends React.Component<Props> {
    static title = 'Card';

    render() {
        const {
            theme: {
                colors: { background },
            },
        } = this.props;
        return (
            <ScrollView
                style={[styles.container, { backgroundColor: background }]}
                contentContainerStyle={styles.content}
            >
                <Card style={styles.card}>
                    <Card.Cover source={require('../assets/wrecked-ship.jpg')} />
                    <Card.Content>
                        <Title>Abandoned Ship</Title>
                        <Paragraph>
                            The Abandoned Ship is a wrecked ship located on Route 108 in
              Hoenn, originally being a ship named the S.S. Cactus. The second
              part of the ship can only be accessed by using Dive and contains
              the Scanner.
            </Paragraph>
                    </Card.Content>
                </Card>
            </ScrollView>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    content: {
        padding: 4,
    },
    card: {
        margin: 4,
    },
});

export default withTheme(CardExample);

My problem is that VS Code is not graying or highlighting out that new line with unused imports as you can see on the following image:

Is there an easy way for me to know about unused imports on this React Native project by either graying out these imports or by running some npm command on the command line?

Thanks!

Answer 1

I would recommend using eslint.

For install instruction see: https://medium.com/@deadcoder0904/eslint-setup-in-react-native-using-vscode-c3122a1da9c7

It will mark unused imports