Tutorial

How To Improve Your Development Efficiency with Visual Studio Code

VS Code

While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or edited it to ensure you have an error-free learning experience. It's on our list, and we're working on it! You can help us out by using the "report an issue" button at the bottom of the tutorial.

Visual Studio Code is extremely flexible and powerful. By learning the ins and outs, you can greatly improve your speed, efficiency, and process as a developer. In this article, we’ll look at five ways to improve your development work in Visual Studio Code.

Customizing Shortcuts

As a developer, think about every time you save a file, copy/paste a line of code, open a file, and so on. You do these tasks constantly, and without shortcuts, each of these actions requires grabbing the mouse. Although it may not seem like much, the transition from keyboard to mouse takes time, even if it’s just a few seconds.

In Visual Studio Code, you can view and customize shortcuts by going to Code -> Preferences -> Keyboard Shortcuts on a mac and File -> Preferences -> Keyboard Shortcuts on Windows.

You can use Command K + Command S on Mac or Control k + Control S on Windows to access the shortcuts.

the shortcut menu for viewing and customizing in Visual Studio Code

Optimizing Your Layout

IDEs (Integrated Development Environments) can often be bulky with a lot of functionality already built in. Visually, with so many features, buttons, menus, and so on, you can often be distracted from what’s most important to you—your code.

There are many ways to alter your layout in Visual Studio Code.

Note: All of the following can be accessed from either settings or from the command palette with CMD + SHIFT + P.

Moving the Activity Bar From Left to Right

By default, the Activity Bar is on the left. It can be minimized, but when it is opened it pushes your code over to the right.

activity bar on the left of the screen

By changing your settings (see Settings section below), you can dock this menu on the right.

Settings section

This way, when it is opened, it does not push your code over.

Activity bar on the right of the screen

Hiding The Activity Bar

You can take the previous option one step further by hiding the activity bar completely. Open your settings menu and search for Activity Bar: Visible.

Settings menu after searching

Zen Mode

Zen Mode is the easiest way to get rid of everything else from the screen so you only see your code. Use CMD + K Z on Mac and CTRL + K Z on Windows to toggle Zen mode.

Code on screen with no other menus

Centered Layout

One last option is to use Centered Layout which centers your text editor (as is the default with Zen Mode), but does not hide all of the other menus in the UI. With this layout, you don’t have to worry as much about opening the Activity Bar pushing your code over. To toggle Centered Layout, open the command palette (CMD + SHIFT + P or CTRL + SHIFT + P) and type Toggle Centered Layout.

Centered layout with the tabbed menu on the left side of the screen

There are other ways to customize your layout that you can spend time exploring.

Using Further Customizations

Visual Studio Code is built using Electron.js which allows it to be customized by web developers. We’ve looked at a couple of ways of customizing through shortcuts and layout already, but let’s explore a few more.

Extensions

For extensions or plugins there is an extensions tab where you can search extensions, install them, and view ones you’ve already installed.

Here’s a look at some of the extensions I have installed.

Author's extensions inlcuding advanced-new-file, auto rename tag, better comments, bookmarks, bracket pair colorizer, cobalt2 theme official, debugger for chrome, dotenv, dracula official, editorconfig for VS Code, ES7 React/Redux/GraphQL

If you can’t find an extension that achieves what you’re looking for, you can also create one yourself.

Themes

Themes are, in fact, extensions, but they can add some colorization and that will make your code and menus much easier to read. For exmaple, there is Cobalt 2 by Wes Bos.

Image showing Cobalt 2 Official them in use

Here’s a few more:

Settings

Settings are also customizable and are saved in a JSON file that Visual Studio Code manages and allows you to customize. Visual Studio Code also provides an interface with dropdown menus, search ability, etc. to be able to change settings. You can open the settings window using CMD + , on Mac or CTRL + , on Windows.

User settings window in view

Setting Up Auto Formatting

Developers often spend a lot of time cleaning up their code; checking indentation, wrapping text on new lines, adding semicolons, and so on. This can be even more difficult to implement across a team as each developer might have different opinions.

You can set up auto formatting in Visual Studio Code. Here are a few options:

Prettier - Code Formatter

The Prettier - Code Formatter extension can format your JavaScript, TypeScript, and CSS using Prettier.

Image of the Prettier - Code Formatter page

ESLint

The ESLint extension allows you to both lint and format your JavaScript code.

Image of the ESLint page

TSLint

The TSLint Extension allows you to lint and format your TypeScript code.

Image of the TSLint page

Creating and Using Snippets

Every day we write some of the same code over and over again. In Visual Studio Code, you can define snippets to write all of that boilerplate code for you.

Code Snippets are based on language and saved in a Json file that Visual Studio Code manages. You can add snippets by going to Code -> Preferences -> User Snippets on Mac or File -> Preferences -> User Snippets on Windows. Then you’ll choose your language. Here’s a snippet for generating a for loop through an array in JavaScript:

"For Loop for Array": {
        "prefix":"forarr",
        "body": [
             "for (let $index = 0; $index < $array.length; $index++) {",
             "\tconst element = $array[$index];",
             "\t",
             "}"
        ],
        "description":"This will create a for loop through an array"
    }

For more details on creating snippets, check out Creating Code Snippets in Visual Studio Code. If you’re working with React, you’ll also want to check out Write React Faster With Simple React Snippets.

Conclusion

Visual Studio Code is extremely customizable. By taking advantage of the features and settings, you can increase your development experience as well as your speed and efficiency.

Creative Commons License