DEV Community

Cover image for Make your Own VsCode Snippets
Abhay Prajapati
Abhay Prajapati

Posted on

Make your Own VsCode Snippets

#vscode #tutorial #beginners #productivity

Make your Own VsCode Snippets

Snippets are aer very useful for quickly creating code, but do you know it's more AWESOME to make one ?

Make your own snippets in VsCode 

1. Open VsCode and type
Enter fullscreen mode Exit fullscreen mode

Press Ctrl + Shift + P to Open Command Palette in VsCode.

Image description

1. type Configure User Snippets
Enter fullscreen mode Exit fullscreen mode

💥 Enter

1. type Select the language you want to create snippets for
Enter fullscreen mode Exit fullscreen mode
  • java
  • javascript
  • python
  • css .... Let's Enter Javascript. Image description 
{
    // ↓ this is name of snippet
    "Print to console": {
        // ↓ this is prefix the command will be typed to use it.
        "prefix": "log",
        //  ↓ this is the snippet itself, body of the snippet
        "body": [
            //  $1 is the placeholder for the first argument, $number defines tabindex for the snippet.
            "console.log('$1');",
            "$2"
        ],
        //  ↓ this is the description of the snippet.
        "description": "Log output to console"
     }
}
Enter fullscreen mode Exit fullscreen mode 
1. type Save the snippet/ Close the file.


    

  1. Make a file index.js
    2. 

  2. use the prefix to type the snippet.
    3. 

  3. type log and hit enter.

    4.
Enter fullscreen mode Exit fullscreen mode

you can also add more functionality like filename, foldername, cursor position, to your snippets, as a adding variables to your snippets

Read more variables in snippets from VsCode snippets docs.

Share which snippets you are gonna create with this

Thanks for reading.
Share your snippets with everyone.
comment about topics you like.

🤝🏾Connect me on:
Twitter: 🕊️@Abhayprajapati_
Github: 🐧@theabhayprajapati
Linkedin: 📌@abhayprajaapati
Youtube: 📺@Abhayprajapati

Top comments (0)

Read next

dm8ry profile image

Resolving Docker Push Errors: "Denied: Requested Access to the Resource is Denied"

Dmitry Romanoff -

arhamrumi profile image

Installing Node.js on Windows: A Complete Tutorial

Arham Rumi -

spwoodcock profile image

FastAPI, Pydantic, Psycopg3: the holy trinity for Python web APIs

Sam -

codenameone profile image

Front End Debugging Part 1: Not just Console Log

Shai Almog -