CODEWITHSUNDEEP
react-nativenpmexpovisual-studio-code
davidesp
davidesp

Reputation: 3962

Find out unused imports on a React Native project

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:

enter image description here

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!

Upvotes: 4

Views: 5195

Answers (2)

Defrian
Defrian

Reputation: 660

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

enter image description here

Upvotes: 5

Rocky
Rocky

Reputation: 3235

VSCode has build in setting for show unused import or variables, you can enable/disable in setting section.

You can find setting section in:

On Windows/Linux - File > Preferences > Settings

On macOS - Code > Preferences > Settings

Check on Show Unused user setting in Text Editor section. enter image description here

Upvotes: 0

Related Questions