How To Improve Your Development Efficiency with Visual Studio Code

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.

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.

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.

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

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

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.

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.

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.

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.

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.

Here’s a few more:

• Night Owl
• Dracula
• Material Theme

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.

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.

ESLint

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

TSLint

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

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.