Howdy!
If you're here, it's one of the following reasons:
1.) You have no idea what VSCode is and would like to know
2.) You are considering using it but wanted to learn a bit more before you dive in.
3.) You like me, use VSCode as your code editor and need to learn some shortcuts.
If you identify with the first option, VSCode, which stands for Visual Studio Code is a free-source editor for coding. It helps you to write programs in a variety of languages and it has helpful features like pointing out syntax errors by line numbers, auto completion of code snippets and even add-on extensions that allow theme customization (hey night-mode 😏) and tons of other cool features.
If you have been considering it but wanted to know what sets it apart from the others you've heard about, here's a few points to consider:
Visual Studio Code is FREE
VSCode was created by Microsoft, so it's trustworthy as well as compatible on Windows, MacOS and Linux.
It has a built-in terminal as well as built-in Git support
It's good at handling larger projects.
In addition to the main points outlined there's a lot more that you can do with VSCode to help make coding easier and more productive.
One of these features is Emmet. This is a built-in extension that allows you to skip the step of manually typing out HTML tags. By using keyboard shortcuts, the tags are automatically created. Some of the most useful shortcuts are:
.class
//<div class="class"></div>
.title
//<div class="title"></div>
a{Click me}
//<a href="">Click me</a>
link:css
//<link rel="stylesheet" href="style.css" />
ul>li*5 //replace 5 with the amount of items in your list
/*
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul> */
p[title="Hello world"]
// <p title="Hello world"></p>
script:src
// <script src=""></script>
#header
// <div id="header"></div>
img
//<img src="" alt="" />
div+p+bq
/*
<div></div>
<p></p>
<blockquote></blockquote>
*/
!
/*
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
</body>
</html>
*/
These are just a few of the plethora of shortcuts that are possible when creating an HTML file in VSCode, however, I find myself using these mostly since most HTML files use these tags. To find more of the shortcuts there's a document on the official VSCode website that you can browse through.
Comment below if you know any more shortcuts that you think are helpful in VSCode while coding in HTML.
Top comments (0)