5 Ways To Improve Development With Visual Studio Code

Celý článek

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 the top 5 ways to do so!

Check out Learn Visual Studio Code to learn everything you need to know about Visual Studio Code!

https://www.youtube.com/watch?v=Ijz_TOyDnAk

Learn and Customize Shortcuts

As a developer, think about every time you save a file, copy /paste a line of code, open a file, etc. You do these things 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 just a few seconds each time (more in some cases).

Over the course of a couple of hours, these transitions really add up and detract from the amount of time you are able to write code. NOT GOOD!

Moving your hand back and forward from keyboard to mouse is very inefficient.

In Visual Studio Code, it's incredibly easy to view shortcuts (also referenced as key bindings) and customize them. To do so, go to Code -> Preferences -> Keyboard Shortcuts on a mac and File -> Preferences -> Keyboard Shortcuts on Windows.

There's also a shortcut to get to shortcuts...cough, cough! :) Command K + Command S on Mac or Control k + Control S on Windows.

Optimize Your Layout

The problem I often find with IDEs (Integrated Development Environments) is that they are bulky with tons of functionality already built in. Visually, with so many features, buttons, menus, etc. you can often be distracted from what's most important to you, your code!

There are tons of 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

Optimize your layout to be less distracting and optimized for writing code!

Move the Activity Bar From Left to Right

By default, the Activity Bar is on the right. It can be minimized, but when it is opened it pushed 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.

Or... Hide The Activity Bar Completely

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".

Simply uncheck the box, and the Activity Bar goes away!

In addition to hiding the activity bar, you can also hide/show the status bar at the bottom.

Zen Mode

Zen Mode is the easiest way to get rid of all the frills and just focus on code. It hides all extra menus from you for so code is all you see. Use Command + K Z on Mac and Control + 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 pallette (Command Shift + P/ Control Shift + P) and type "Toggle Centered Layout".

There are tons of other ways to customize your layout. Spend some time trying things out and see what works!

Customize For You

Visual Studio Code is built using Electron.js which allows it to be customized very easily 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.

We have a VS Code course: Make Visual Studio Code Your Editor

Extensions

It's incredibly easy to add extensions or plugins. There's an extensions tab where you can search extensions, install them, and view ones you've already installed. You can find an extension to do just about anything. Just give a search.

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

Remember, if you don't find an extension that does what you're looking for, you can also creat one yourself!

Themes

You're just one install away from an easy on the eyes editor!

Themes are, in fact, extensions, but they are cool enough to look at separately. Themes can add some amazing colorization (is this even a word?!) and make your code and menus much easier to read. I personally use Cobalt 2 by Wes Bos, but there are tons of great ones out there!

Here's a few more.

• Night Owl
• Dracula
• Material Theme

Settings

Settings are easily customizable as well 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 Command + Comma on Mac or Control + Comma on Windows.

Want to change the font size, for example? Just search and update it!

Set Up Auto Formatting

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

Setup auto formatting and never worry about it again!

Did you know you can setup VS Code to do your formatting automatically? Well, you can, and it's amazing! Here's 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.

Create and Use Snippets

Every day we write some of the same code over and over again! Stubbing out for loops, event handlers, unit test, etc. are all good examples. With Visual Studio Code, you can define snippets to write all of that boilerplate code for you!

Code Snippets means you don't have to type the same code over and over again!

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.

Recap

Visual Studio Code is an amazing tool that is extremely customizable. By taking advantage of the features and settings above, you can greatly increase your development experience as well as your speed and efficiency!