In this article, I will guide you to install and configure Visual Studio Code. It is currently my favorite tool for developing front-end because of how much value it adds while also being a lightweight. After installation, we will take a look at some configuration, shortcuts, and great extensions to make our life easier as developers. If you already have another text editor/tool that you love feel free to skip this article and jump right to the action with more HTML and CSS articles of this series.
Download Visual Studio Code
Download VS Code using this link: https://code.visualstudio.com/download
Once the download finishes run the installer -> accept the agreement -> check all the options you prefer (I would recommend having all of them checked for ease of use). And click Install. Let the program do its thing and after a bit, you should have VS Code ready to run.
Walkthrough Visual Studio Code
The first things you will want to get familiar with are the TopBar, the Sidebar, and the open editor’s tabs toolbar. The top bar is the one at the very top that has the menus for File, Edit, Selection, etc. You will use the File menu to create files, open folders, etc. In the edit one, you will find the most commonly used commands, I recommend to try and memorize the ones you use most often but until that happens you can use that menu. The terminal menu for adding a new terminal that will allow you to run some commands is pretty important too. For now, with those menus, we are good to start. From the Sidebar you will be accessing the file explorer (one at the top), the search functionality, source control, run for debugging, and extensions. We will go deeper into extensions in a bit. The file explorer and search will be self-explanatory once you have a working folder and some files.
So let’s start using this tool, right? You can go ahead and use your favorite terminal or File Explorer to navigate to the path where you want to have your project and then just create a folder. For me in Windows that will look like this:
Inside that folder you can right click and select Open with code or just run the command: code . in a terminal.
That will open a window of VS Code with the same welcome in the open editor but if you look at your left you will see the name of your folder with a down arrow. That is the folder in VS Code, the only problem is that it is currently empty because we haven´t created any files just yet. Let’s fix that.
If you hover over the name of the folder that little menu with 4 buttons will appear and the first one is for creating files (the second is for creating folders, keep that in mind). Let´s go ahead and create a file and name it: index.html and enter. GREAT! We now have an HTML file open in our open editor’s tab and we can start writing some HTML. Let´s also add another file in the same folder called styles.css. If you do that you will get both files opened as editors. The first trick to be able to work with both files at the same time, if your screen size allows you to do that, right-click on the tab styles.css and pick Split Right.
That will duplicate the file in another editor and divide your workspace area with the two open editors. You can then close the styles.css on the left panel and you get both the index.html and the styles.css files on the same window to work on them at the same time :)! Hint: Adjust the size hovering and clicking over the line that divides the editors to adjust it at the proportions you prefer.
Next, let’s look at some Extensions that I use every day and find great for both boosting your performance and helping you out writing better and more consistent code.
Extensions in Visual Studio Code
Everyone will recommend different extensions, some would give you a list of 10 or more and others will focus on a couple of them. I use less than 10 extensions currently and if I have to pick the top 3 for beginners those would be Prettier, ESLint, and Live Server. Let´s go to get those extensions installed and see what they bring for us.
Go ahead and install it. Prettier is a code formatter. It will automatically reformat your code to its conventions (you can customize some of them). What is good about this is you get to have clean and consistent code. It is super easy to finish a long session of coding having different patterns in your code, some long lines, some wrapped around, some with 2 tabs others with 4 tabs and some lines ending with ; and others that do not end like that.
Next we are going to install ESLint and Live Server:
That´s great we have our local development environment setup!
To finish this article I want to talk about Emmet and some shortcuts I find useful. Emmet is now integrated into Visual Studio Code so you don´t have to install any extension to have it. Emmet will be your best friend to code faster! Basically it allows you to type less using shortcuts to create code. Lets put an example. If you want to add an image to your HTML you will use the img tag. It would look like this:
<img src="./images/myimage.jpg" alt="My Image">
Without emmet (or any helper) you would have to type all that out character by character, and we all know it can be annoying and slow to types those special characters. Now, with emmet you can start typing in VS Code img directly instead of starting with the < character and you will see this:
If you press enter or select with the mouse the first option that says Emmet Abbreviation if will automatically replace the img you just wrote with the whole img tag template like this:
Of course you still have to complete src and alt, but hey it is pretty cool to have all that typed out.
Emmet is super powerful and can do much more for you, let me just show you one more example that probably won´t be familiar if you are just starting but will help you realize how useful this is:
If you are familiar with lists, that’s how an unordered list looks like that could be used for a navbar for example. With just one line and some special characters, we can get all that HTML code produce for us.
OK, last thing I promise. I want to show you how to access commands, terminal and configuration in VS Code.
To access all the commands you can press control/command + shift + P or just F1 and it will display something like this:
There you can access all the commands and see their shortcuts, have fun!
Right there in that window, you can search by typing titles, for example, the second one on the image is preferences open settings. If you type that out you will get a couple of options one with (JSON) and another with (UI) at the end. That is the way to access the configuration of your VS Code via JSON document or with a User Interface. Use the one you prefer to tweak your configuration when required. And last but least to open a terminal you can use Ctrl+` on the keyboard or just go to the topbar “Terminal” menu and click Open New Terminal which will show your default terminal below.
That is all for this article, I hope you got to install and play a little bit with VS Code, it is a great editor with some very powerful features and extensions and we will be using it a lot later on in our journey so I hope you get to like it as well. See you in the next article to tackle down a lot of new HTML tags to start building websites!