首页 > 解决方案 > 找出 React Native 项目中未使用的导入

问题描述

我将以下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变灰或突出显示未使用导入的新行,如下图所示:

在此处输入图像描述

React Native是否有一种简单的方法可以让我通过灰显这些导入或npm在命令行上运行某些命令来了解该项目中未使用的导入?

谢谢!

标签: react-nativenpmvisual-studio-codeexpovscode-settings

解决方案


我建议使用 eslint。

有关安装说明,请参阅:https ://medium.com/@deadcoder0904/eslint-setup-in-react-native-using-vscode-c3122a1da9c7

它将标记未使用的导入

在此处输入图像描述


推荐阅读