VS Code For Web Development

How to Set Up VS Code for Web Development

January 19, 2022, BY HARSH VARDHAN TYAGI

Visual Studio Code has surpassed all other source code editors in popularity. It’s small but powerful, and it’s without a doubt my favorite.

In this article, I’ll show you how to get started with VS Code for Web Developers and set it up.

Introduction to VS Code

If you don’t yet have VS Code installed on your computer, head to code.visualstudio.com to download it. You can open the dropdown to choose the versions you want to download, but usually, the big button should do the work.

VS Code Welcome Tab

Once you have it installed and opened, the first thing you will see is a Welcome tab.

Here, you’ll find 5 sections:

 

Start: Start by either creating a new file or opening an existing folder.

Recent: Any recently opened folders can be found here.

Help: You’ll find some useful information here. For instance, there’s a printable keyboard cheatsheet and a series of video tutorials.

Customize: You can import settings and keyboard shortcuts from other code editors, such as Vim or Atom. So, if you’re used to using these editors, go ahead and give it a try.

But it’s the color scheme that we’re interested in. When you select it, you’ll see a list of themes from which to choose. The up and down arrow keys can also be used to preview the themes. But because the default theme is my favorite, I’m going to stick with it.

Learn:   There are three options available here.

Find and run all commands is the first option on the list. We can use this to find and run all of the commands that are available. Because we’ll be using this frequently, I recommend memorizing the short-cut, which is Command/Control + Shift + P.

The second selection is Interface Overview. If we select it, we can see the most common elements on the user interface and we can also see the shortcut to toggle the elements:

The last selection is the Interactive Editor Playground. Here, you can find the highlight features from VS Code with instructions and examples.

Let’s select Emmet, for instance. With Emmet, we can write shortcuts and then expand them into a piece of code.

Here’s Emmet's Cheatsheet for more deep tricks  Cheat Sheet.

 

Alright, I recommend that you check out all of these features.  There are a lot of them, and it’s okay if you don’t understand it all now. You can always come back in the future.

 

VS Code File Explorer

 

Next, let’s go to File Explorer by selecting the first tab on the side navigation or Command/Control + Shift + E.

You can open an existing folder from this screen, but let’s make a new folder and file. Let’s use VS Code to open the terminal instead of opening a new window. You can either use the Control +’shortcut or select the error and warning button on the status bar and then the Terminal tab.

Right now I am in my home directory. Let’s create a new folder by typing mkdir vscode-tutorials and let’s go inside it with cd vscode-tutorials.

Now we want to open this folder, so we can select the open folder button and navigate to the folder directory – but that’s a lot of work. So instead, in the terminal, we can say code .. Now, you might face an error: bash: code: command not found.

 

To fix this, we can open the Command Palette and search for, and select it. Now if we go back to the terminal and type, the new VS Code window will be opened with the created folder.

Alright, next, we want to create a new file. In the folder section, we can click the new file icon or right-click and select new file. Let’s name the file index.html, and inside it let’s type the exclamation mark (!) and press tab or enter. With Emmet, it will generate an HTML template.

Now let’s open the Command Palette again, search for Format Document and select it. You can see that it add spacings between different sections and cleans up our code.

This is a super useful feature from VS Code. But we don’t want to search for Format Document all the time and we want it to format whenever we save the file.

You also notice here that the indention is now equal to 4 spaces, which in my opinion is a bit much. So let’s change it to 2. And to do that, we can go to settings or use the shortcut  Command/Control + ,.

In the Commonly Used tab, we can change the Tab size to be 2 and under Text Editor/Formatting, we can select Format on Save. Now whenever we save, the files will be properly formatted.

VS Code Extensions

The last thing I want to show you how to use is Extensions. You can select the extensions tab from the side navigation or with the shortcut: Command/Control + Shift + X.

Here we can filter the extensions by, for example, Most Popular or Recommended.

There are many extensions to choose from. But the first extension that we need to install is Live Server. With this, we can have a local server reload static web pages.

For example, if we go to our index.html and open the Command Palette and search for Live Server: Open with Live Server you can see that a new tab on the browser is opened.

And if we create a new element on our HTML, for example, after we save the page will automatically be reloaded and we can see the changes. In index.html, you can also open the live server with the go-live button on the status bar.

 

Conclusion

There is a slew of other useful extensions, but I’ll save them for another post.

For the time being, I am confident that you are ready to begin your Web development journey after reading this introduction and setup guide.

This brings the article to a close. For future updates, you can follow me on social media. Otherwise, happy coding, and I’ll see you in the next post.