VS Codeのスニペットで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キー。

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