Visual Studio Code Quick Guide

Visual Studio Code Quick Guide

Why Visual Studio Code?

There are numerous paid and free editors for front end projects that
include autocompletion, auto import features and plugins. But the one
I suggest is Visual Studio Code, for one it is free and secondly it is
highly configurable and offers a plethora of plugins. It also supports
terminals that can have multiple instances. The autocompletion is for my understanding really good and it's also fairly easy to change shortcuts and custom snippets. With Visual Studio Code you also can configure workspaces easily that will make it easier for everyone to use the same configuration settings and plugins.

You can download Visual Studio Code for free here, it supports Windows, Mac and Linux: https://code.visualstudio.com

How to configure Visual Studio Code

Setting up PATH Variable

As I mentioned before, VS Code is highly configurable. Once you started VS Code you can Press SHIFT + CMD + P which will open the Command Palette. Here we can run numerous commands that will help us setting up new projects or configure our editor. For the beginning, type path into the Command Palette, this will give you some command suggestions, select Install code command in PATH, this will add vs code to your system path variable and allows us to open VS Code from the command line anywhere. After you have done this you can test this by open your terminal and navigating to some directory, type then the command code . and hit enter. This should open now a new VS Code project within that directory.

Configure UI

Next we want to see how we can configure the UI of VS Code easily. Press once again SHIFT + CMD + P to open the command palette. Then type sidebar and select the first option Toggle sidebar position, this will move the sidebar to either the right or left side.

The same way we can change the colour theme of VS Code, to do so open again the Command Palette and type theme and select Preferences: Color Theme, then you can select one from the available themes. You can do the same with the icon theme that will let you customise the way the folder structure is displayed in the sidebar and lots of other things, I encourage you to play around with it a bit.

If you want to configure it even further and you want to have full control over your configuration then I suggest to have a look at the settings.json file of VS Code, this file holds all settings you configured in JSON format and you also can overwrite, edit your editor here as you wish. To open the settings.json file, open the command palette and type settings, select then Preferences: Open Settings (JSON) and hit enter. In my case I have for instance my terminal shell and font family configured to use zsh as default shell with monospace as font family as well as my editor font family and enabled font ligatures. To do so, I added simply those lines to my configuration:

{
  "editor.fontFamily": "Fira Code",
  "editor.fontLigatures": true,
  "terminal.integrated.shell.osx": "zsh",
  "terminal.integrated.fontFamily": "monospace",
}

If you use a font family that isn't installed on your system then you have to make sure to install it first correctly of course. Fira Code and font ligatures make my code more prettier and better readable. What font ligatures do is they combine characters and display it as one new character. For example with === or when writing an arrow function => it will turn into into that:

font-ligatures

You can find Fira Code here: https://github.com/tonsky/FiraCode

Workspace Configuration

When collaborating with multiple people it comes in handy to ensure everyone uses the same configuration settings and plugins, especially when it comes to code formatting and linting, surely both can be done via npm and git hooks but it gives us an extra layer of protection and it's kind of nice if everyone working on your project has the same features available to make development easier.

To set up workspace settings, open the Command Palette and type Recommended Extensions and select Configure recommended extensions (Workspace Folder). This will create a .vscode folder to your project with a extensions.json file. You see there are already two JSON properties filled in for you, recommendations and unwantedRecommendations. Within recommendations you can add now all the plugins you want to suggest to collaborators of your project, to do so you need to add the plugin id. You can find the plugin id of a plugin easily by opening the plugins tab in VS Code and searching for the plugin you want to add to your recommendations, then click the settings icon next to install/uninstall and selecting Copying Extension id as shown in the screenshot below:

vscode-extension

Then paste the extension into our extensions.json Configuration:

"recommendations": [
  "dbaeumer.vscode-eslint"
],

If now someone opens the project without having these extensions installed VS Code will show a popup to suggest installing all the extensions within your configuration.

extensions-recommendation

Custom Code Snippets

If you are working as I do with React, then you are familiar with all the repeating boilerplate code you have to write when implementing a new Component. You need to import each time React and depending on your project other things then you write your component function, this is a repetitive process that costs us in the end unnecessary time we could use for something else. To avoid writing every time boilerplate code like this VS Code gives us the option to configure our own code snippets we can use via autocompletion.

To create our own snippets, open the Command Palette once more and type snippet and select then Configure User Snippets, then select new global snippet file and give it a name.

VS Code provides us with some explanation in form of a comment, you can see basically an example snippet, such as shown below:


"Print to console": {
  "scope": "javascript,typescript",
  "prefix": "log",
  "body": [
	   "console.log('$1');",
     "$2"
  ],
  "description": "Log output to console"
}

The scope is pretty much self explanatory, but the interesting one is here prefix. The values assigned to this property lets us define keywords VS Code will use to suggest us code snippets, so if I would in this case type in a javascript or typescript file log it will autosuggest me this snippet and once I select it, it will add it for me to my file. This property accepts also an array which lets us even define multiple keywords.
The body property is our actual snippet we want to use, in this case it is a simple console.log statement. You see within the log call is a '$1', what this does is simply putting our cursor to that position once we inserted the snippet. We can also have copies of those "placeholders" that will allow us to replace the value once we inserted the snippet in multiple places.

To show you how that works, let's create a short snippet that will insert a React functional component for us. To so repeat the steps from the beginning and create a new snippet. Add this to your snippet file:

"React Functional Component": {
  "prefix": ["rfc"],
  "body": [],
  "description": "React Functional Component"
}

In this case I use the prefix rfc but feel free to replace it with anything you like, but ensure it is unique and doesn't collide with existing snippets or other autocompletion keywords. Also I gave it a short description of what this snippet is for.
In the body we define now our snippet, first we want to import React, so let's add an import statement "import React from 'react'" followed by an empty line.

"body": [
  "import React from 'react';",
  ""
],

Then we add our actual component definition and also the default export to the body.

"const $cn = () => {",
"\treturn (",
"\t\t<div><h1>$cn</h1></div>",
"\t)",
"}",
"",
"export default $cn"

That might look a little bit confusing, since we have \t escapes here. But this only does ensure we insert a tab on those places. The $cn is the name of our component, we can enter once we inserted the snippet into our code.
Let us test our snippet now, save the file and open or create a new Javascript file within your project. Now type rfc and you will see VS Code will suggest us our snippet:

snippet-1

When hitting now enter, you will see VS Code inserts our snippet to our file and we have three active cursors that let us change the component's name, give your component now any name and you are done.

snippet-2

There are many more things we can do with VS Code, but this should be enough to set up your editor to your needs and make development with VS Code easier but I still encourage you once again to play around with the numerous other features this amazing editor offers. Until then cheerio!