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

时间:2019-01-27 02:39:47

标签: react-native npm visual-studio-code expo vscode-settings

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

enter image description here

我是否可以通过使这些导入变灰或通过在命令行上运行某些React Native命令的方式来方便地了解此npm项目上未使用的导入?

谢谢!

2 个答案:

答案 0 :(得分:3)

我建议使用eslint。

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

它将标记未使用的进口

enter image description here

答案 1 :(得分:0)

VSCode内置于setting中,用于显示未使用的导入或变量,您可以在设置部分启用/禁用。

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

在Windows / Linux上-文件>首选项>设置

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

Show Unused部分中检查Text Editor用户设置。 enter image description here