VS CodeのスニペットでReactのコンポーネント雛形を作る

3965 ワード
reactnative React VSCode React テキストリンク

コンポーネントの雛形をVS Codeのスニペットに登録しておくと捗ります♪

スニペットの設定手順

  1. VS Codeの Code > Preferences > User Snippets

  2. tsxファイルのスニペットを作る場合typescriptreactと入力
    VS Codeではスニペットをファイル種別ごとにjsonファイルで管理します。

  3. 以下をコピペ
    以下はReact Nativeのコンポーネントの一例です。お好みで変更して下さい。 

{
    "React Native Component": {
        "prefix": "react-native-component",
        "body": [
            "import React from \"react\";",
            "import { View, StyleSheet } from \"react-native\";",
            "",
            "type Props = {};",
            "",
            "export const ${TM_FILENAME_BASE}: React.FC<Props> = ({}) => {",
            "\treturn (",
            "\t\t<View style={styles.container}>",
            "\t\t\t<View />",
            "\t\t</View>",
            "\t)",
            "};",
            "",
            "const styles = StyleSheet.create({",
            "\tcontainer: {}",
            "});"
        ],
        "description": "React Native component"
    }
}

スニペットの利用

エディタでreact-native-componentと打ち込んでTabキー。

スニペットが挿入されます！
コンポーネント名はファイル名が自動的に反映されます。