Add an Custom Snippet for Javascript in Visual Studio Code

In this tutorial, we are going to learn how to add a Custom Snippet for javascript, especially for react-native programming language in Visual Studio Code Editor. Using a Custom snippet for any programming language gives us the power to write code easily with shortcuts. just like see for creating a simple function in react native we need to write the code manually. but using the Custom Snippet we can do this with just three words. let’s see how.

Also just like am showing you how to add a Custom Snippet for React native programming you can also add a Custom Snippet for any other programming language.

First of all, you need to write an example code that you are going to use to add as a Custom Snippet for any programming language in Visual Studio Code Editor. just like am going to use the below-given code for Custom Snippet.

import React from 'react';
import { View, StyleSheet } from 'react-native';

function hellow(props) {
  return (
       <View style={styles.container}></View>
     );
}

const styles = StyleSheet.create({
         container: {}
});

export default hellow;

after that, you need to go to the User Snippets. For Mac users select the Code from the menu and then go to the Preferences and then go to User Snippets. For Windows users select the File section and then Preferences and then select User Snippets.

and then you need to select the file based on the language for which you want to add the Custom snippet. for example, I want to add a Custom Snippet for the javascript programming language. after that, you will see a file like as given below.

after that, you will see a file like this as shown in the below image.

after that, you need to add the below function component in between the curly brackets.

{
    "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};",
        ]
    }
    // Place your snippets for javascript here. Each snippet is defined 
    // under a snippet name and has a prefix, body and 
    // description. The prefix is what is used to trigger the 
    // snippet and the body will be expanded and inserted. Possible variables are:
    // $1, $2 for tab stops, $0 for the final cursor position, 
    // and ${1:label}, ${2:another} for placeholders. Placeholders with the 
    // same ids are connected.
    // Example:
    // "Print to console": {
    //  "prefix": "log",
    //  "body": [
    //      "console.log('$1');",
    //      "$2"
    //  ],
    //  "description": "Log output to console"
    // }
}

Here for comfort let me tell you that we set the prefix to rnfc. means whenever in the javascript file we type rnfc then it will return the body of the function component. just like you can see in the given below image. and ${TM_FILENAME_BASE} means it will return the name of the file.

so if we have a hellow.js file and inside it, we write rnfc then it will return

import React from 'react';
import { View, StyleSheet } from 'react-native';

function hellow(props) {
  return (
       <View style={styles.container}></View>
     );
}

const styles = StyleSheet.create({
         container: {}
});

export default hellow;

This trick can be used for any programming language. and the Custom Snippet helps programmers to write code in no time. just like we did in this tutorial.