DEV Community

Gabriel
Gabriel

Posted on • Edited on

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;
Enter fullscreen mode Exit fullscreen mode

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"

settings->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};"
    ]
  }

Enter fullscreen mode Exit fullscreen mode

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.

Top comments (1)

Collapse
 
seif_sekalala_81e09fe6b9e profile image
Seif Sekalala • Edited

👏
Gut gemacht, bruder! 😊