找出 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 没有变灰或突出显示未使用导入的新行，如下图所示：

是否有一种简单的方法让我了解此 React Native 项目中未使用的导入，方法是将这些导入变灰或通过运行命令行中的一些 npm 命令？

谢谢！

Answer 1

VSCode 内置 setting 用于显示未使用的导入或变量，您可以 enable/disable 在设置部分。

您可以在以下位置找到设置部分：

开启 Windows/Linux - 文件 > 首选项 > 设置

在 macOS 上 - 代码 > 首选项 > 设置

检查 Text Editor 部分中的 Show Unused 用户设置。

Answer 2

我会推荐使用 eslint。

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

它将标记未使用的导入

找出 React Native 项目中未使用的导入

Find out unused imports on a React Native project

npm

react-native

visual-studio-code

vscode-settings

expo