Code faster with custom VScode snippets
Tags: javascript, tutorial, productivity, programming
Published: 2022-12-06 17:38:25

Code snippets are templates that make it easier to enter repeating code patterns and who better than yourself knows what code you copy again and again. The best way to tackle this problem is with tailored-to-you snippets and I will show how to create them in less than 2 minutes.

* * *

## Transform your code into snippets

First of all, open the snippets settings (**File** &gt; **Preferences** / **Code** &gt; **Preferences** on macOS, and then select the language for which the snippets should appear, or **Global Snippets file** for it to be available for every language).

Then get the code you want to turn into a snippet and head over to this website [https://snippet-generator.app](https://snippet-generator.app/?description=&tabtrigger=&snippet=&mode=vscode)

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1669999660996/83819032-372d-4a1e-be8b-f330575808d0.png)

You will get the **body** of the snippet, which is the text interpreted by VScode to generate your code.

You also have to fill in the rest of the snippet:

*   `name` a short name that will be displayed when the snippet is suggested
    
*   `prefix` defines the trigger to call the snippet
    
*   `scope` is the list of languages for which the snippet applies (*ex: javascript, typescript, typescriptreact*)
    

You should have something that looks like this

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1669889157755/bSmbHFD0g.png)

* * *

## Placeholders and advanced syntax

You can further improve your snippet with placeholders, tabstops and variables. You can find the documentation here: [snippet syntax doc](https://code.visualstudio.com/docs/editor/userdefinedsnippets#_snippet-syntax)

You can set **cursor locations** with `$0`, `$1`... if you write multiple times the same number you will edit the same text at each location.

**Placeholders** are default values that are linked to those cursor locations like this `${1:foo}`

You also have default variables for example if you want the **name of the current file** you write `TM_FILENAME_BASE` . The best of it is that you can combine with placeholders.

Here is a snippet where you will have the **file name as the name of the component** and the default export but with cursor locations on them if you want to quickly edit it. (you will find the gist of all my snippet at the end)

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1670279791168/5pLxMMgxT.png)

One special trick, if you want to get the name of the folder, you have to use the directory path variable and transform it like this: `${TM_DIRECTORY/^.+[\\/\\\\]+(.*)$/$1/}`

![result snippet vscode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/62xt26dpsdgk686kiaby.gif)

You can find some examples of my snippets [here](https://gist.github.com/sakymar/8b94b28024d61ebc110e9182a768c55f)


* * *

#### **😄 Thanks for reading! If you found this article useful, consider following me on** [**Twitter**](https://twitter.com/AntoineMesnil)**, I share tips on development, design and share my journey to create my own startup studio**