Another 2to5 minutes of well spent time with quick but useful and up to date lessons on coding in today's world! We keep up to date with current tech trends and release videos weekly to keep our content fresh! Got any suggestions or want to present an idea on our channel?

createyourownsnippets

# Creating Your Own Snippets
Another 2to5 minutes of well spent time with quick but useful and up to date lessons on coding in today's world!
We keep up to date with current tech trends and release videos weekly to keep our content fresh! Got any suggestions or want to present an idea on our channel? Contact Jon now using the links and info [below](#contact)!

## Directions: 
Today we are going to go over a very useful and overlooked feature VS Code offers right out the box: the ability to make your own snippets. Here are the steps:

## Step 1 - Open The json File You Need
Go to `User Snippets` under `Code` > `Preferences` > `User Snippets`:

<img src="./code0.png" width="50%"></img>

Decide which file types you want the snippet to be active. For all file types, choose either `dci.code-snippets` or `New Global Snippets File`.

<img src="./code1.png" width="80%"></img>

<font size="1"><div style="border: 1px solid orange" width="fit-content">
<h3>Language snippet scope</h3>
Every snippet is scoped to one, several, or all ("global") languages based on whether it is defined in:
<ul>
<li>a language snippet file</li>
<li>a global snippet file</li>
</ul>
Single-language user-defined snippets are defined in a specific language's snippet file (for example <span style="color:yellow;">javascript.json</span>), which you can access by language identifier through Preferences: Configure User Snippets. A snippet is only accessible when editing the language for which it is defined.

Multi-language and global user-defined snippets are all defined in "global" snippet files (JSON with the file suffix .code-snippets), which is also accessible through Preferences: Configure User Snippets. In a global snippets file, a snippet definition may have an additional scope property that takes one or more language identifiers, which makes the snippet available only for those specified languages. If no scope property is given, then the global snippet is available in all languages.

Most user-defined snippets are scoped to a single language, and so are defined in a language-specific snippet file.
</div></font>

## Step 2 - Create Your Snippet
I chose 'html.json', which opens that file, which may have no working code... yet. The following is an example of the syntax to follow:

<img src="./code2.png" width="80%"></img>

Check out this one I created for `html` files:
<img src="./html1-json.png" width="80%"></img>

So when I type `htmlsc`, the snippet will pop up as follows. I've outline each part to show how the keys of the object are implemented when applied as a snippet:

<img src="./html3-example.png" width="80%"></img>

As expected you end up with the value of the key `body`, which is an entire html document. Hence the name, or prefix, of the snippet: htmlsc, 'sc' for shortcut 😉

Hope this was worth 2to5 minutes of your time! Please remember to like this video, follow the channel to stay tuned for more videos and giveaways, and comment away! I check them all the time as many of you know, so hit me up! Did I make a mistake? Probably! Call me out! 

See you next time. This is Jon Christie. 
<img src="./html2-result.png" width="80%"></img>
## Contact
<img src="https://avatars0.githubusercontent.com/u/17928947?v=4" alt="Github profile image" width="80px" height="80px" />

__Jon Christie__ 

GitHub: [mathcodes](https://github.com/mathcodes) 

[<code><img width="36px" src="https://img.icons8.com/color/48/000000/linkedin.png"/></code>](https://www.linkedin.com/jonchristie)       
[<code><img width="36" src="https://img.icons8.com/color/48/000000/twitter--v2.png"/></code>](https://twitter.com/jonpchristie)       
[<code><img width="36" src="https://img.icons8.com/color/48/000000/youtube-play.png"/></code>](https://www.youtube.com/channel/UC5GFnN-lv8Yuqc9O3b79k6g)       
[<code><img width="36" src="https://img.icons8.com/color/48/000000/facebook.png"/></code>](https://www.facebook.com/jonpchristie)       
[<code><img width="36" src="https://img.icons8.com/color/48/000000/instagram-new--v2.png"/></code>](https://www.instagram.com/fullstack11235)       
[<code><img width="36" src="https://img.icons8.com/color/48/000000/soundcloud.png"/></code>](https://soundcloud.com/jonchristie#/)       
[<code><img width="36" src="https://img.icons8.com/color/48/000000/spotify--v1.png"/></code>](https://open.spotify.com/artist/07S7aLfxH70VAX64g1WuFw?si=tlOj1OMBRLm-y4sY8Lox3Q)