Узнайте неиспользованный импорт в проекте React Native

Question

Я импортировал следующий React Native проект в VS Code.

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

Затем в следующем файле в строке 15:

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

Я добавил (просто экспериментируя) строку:

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

, как вы можете видеть из кода ниже:

/* @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);

Моя проблема, что VS Code не выделяет или выделяет эту новую строку с неиспользованным импортом, как вы можете видеть на следующем изображении:

IsЕсть ли для меня простой способ узнать о неиспользованных импортах в этом React Native проекте, либо отключив этот импорт, либо введя команду npm в командной строке?

Спасибо!

Answer 1

Я бы порекомендовал использовать eslint.

Инструкции по установке см .: https://medium.com/@deadcoder0904/eslint-setup-in-react-native-using-vscode-c3122a1da9c7

Будет отмечен неиспользованный импорт

Answer 2

VSCode имеет встроенную настройку для отображения неиспользованного импорта или переменных, вы можете включить / отключить в разделе настроек.

Вы можете найти раздел настроек в:

Вкл.Windows / Linux - Файл> Настройки> Настройки

В macOS - Код> Настройки> Настройки

Проверьте Show Unused пользовательские настройки в разделе Text Editor.