DEV Community

Joel Diharce
Joel Diharce

Posted on

Shortcuts are every coder's best friend

Alrighty... So I opened the next video, and found that it went over ways to implement shortcuts in Sublime, which is what the instructor of the videos (also, a teacher in my bootcamp. ;D) uses in the videos. Well, I'm using VS Code because that's what the instructors of my bootcamp directed us to use. So, I decided to see what I could find in making shortcuts in VS Code!

Thanks to (Hannah Gooding's post on Dev.to)(https://dev.to/hannahgooding/vs-code-shortcuts-and-tricks-that-i-wish-i-knew-sooner-3mcj) (much appreciated, Hannah!), I learned that there is a boiler plate that exists in VS Code! :D Just typing "!" and pressing enter, brings up the following boiler plate in my version:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Now, this is the default that comes with VS code, so it's different from what we have in the instructional video I just watched, so I need to create one. Well, apparently I can do that too (thanks again Hannah!) So, first, you go to the preferences of VS Code, and choose "User Snippets", then you find the file "html.json" where you can add a new snippet! You have to use json language to create the snippet, but there is a tool that every new coder's new BFF Hannah directs you to that will help you write your desired html snippet in json!

Note: I wasn't able to find the original emmet file that has the prefix I wanted to use, so I just created a new one in the html.json file.

Joel out! :D

Top comments (0)