How to create a VSC Snippet

It is very handy to use snippets in VSC such as
"rfce" and press tab to create :

import React from 'react'

function test() {
  return (
    <div>test</div>
  )
}

export default test;

I will show you how you can easily create your own custom snippets.For this example i want to create a user snippet which provides a react native function component

1. go to your settings and to "User snippets"

2.Create the snippet

Use double quotes to wrap the JSON properties and Array items, but single quotes for the strings in your code snippets.

Take a quick look at my example:

{
  "Function Component": {
    "prefix": "rnfc",
    "body": [
      "import React from 'react';",
      "import { View, StyleSheet } from 'react-native';",
      "",
      "function ${TM_FILENAME_BASE}(props){",
      "  return <View style={styles.container}>$0</View>;",
      "};",
      "",
      "const styles = StyleSheet.create({",
      "  container: {},",
      "});",
      "",
      "export default ${TM_FILENAME_BASE};"
    ]
  }

Now lets see what we got here

• "prefix": "rnfc" This is your new shorthand
• with "" you can define empty lines
• ${TM_FILENAME_BASE} creates the file with the name of the file -$0 will tell VSC where the cursor should be after creating the code block

So from now on you can always just type rnfc and press tab and you will get the code block you created.