Pinterest Stumbleupon Whatsapp
Ads by Google

I absolutely adore Visual Studio Code. It has replaced Sublime Text as my text editor of choice and I don’t think I’m ever going back. And even though it’s based on JavaScript like other Sublime Text alternatives (namely Atom and Brackets), VS Code is lightning fast.

And in case you were wondering, yes: VS Code is open source and available on GitHub 10 Free Open Source Windows Tools Hosted on GitHub 10 Free Open Source Windows Tools Hosted on GitHub Microsoft is the organization with the most open source contributors on GitHub. To celebrate this achievement, we have compiled a list of the best free Windows tools you can download from GitHub. Read More . Surprising, isn’t it? Ten years ago, if I told you that Microsoft was going to start embracing open source, you would’ve laughed in my face. Now look at where we are.

Anyway, let’s get down to it. Here are thirteen essential tips that will help you get comfortable with and boost your productivity in Visual Studio Code.

1. Master the Command Palette

Much like Sublime Text (and TextMate before it), VS Code has something called a command palette. This feature lets you access various commands just by typing them out rather than being forced to navigate menus using your mouse.

visual-studio-code-command-palette

You can bring up the command palette with the CTRL + SHIFT + P keyboard shortcut. Just start typing what you want to do (e.g. “close”) and the options will update in real-time. Some commands are categorized (e.g. “File”, Git”, “Terminal”, etc), so you can use that to locate commands that you can’t seem to find.

Ads by Google

2. Set a Working Project Folder

If you click on Explorer in the navigation sidebar, you’ll see a new subpanel open up. This subpanel is divided into two sections: Open Editors (i.e. files and documents currently open) and No Folder Opened. The latter is what we’re interested in.

visual-studio-code-working-folder

Click Open Folder (or you can navigate to File > Open Folder… in the menu bar) and select any folder on your system. This will load that folder into VS Code as the “current working project”, allowing you easy access to all files and subfolders, so you don’t have to keep flipping back and forth to File Explorer.

3. View Multiple Files at Once

Most modern text editors can support multiple files at once, allowing you to switch between open files through some kind of tab-based interface. More advanced text editors may even support side-by-side text editing, which VS Code does (albeit horizontally only).

visual-studio-code-side-by-side

But side-by-side editing is tough on smaller screens, whether that means on a laptop or an older monitor — and that’s where VS Code shines.

It has something called dynamic panels, where if one of the open document panels is too narrow, it will automatically widen when you make that document active (i.e. place your cursor in it). If you’re still using a resolution close to 720p, you’ll love this feature.

4. Edit Multiple Lines at Once

If you ever need to insert or delete multiple instances of text throughout a document, all you have to do is create multiple cursors. You can do this by holding down ALT (or Option on Mac) and clicking anywhere in the text. Every click creates a new cursor.

visual-studio-code-multiple-cursors

This is particularly useful for things like HTML, where you might want to add many instances of the same class or change the format of several hyperlinks. Learn it and love it.

5. Go to Definition

When you’re programming or scripting, often times you’ll run into a variable or method that you don’t recognize. So what do you do? You could spend several minutes searching for the right file, or you could select the variable/method with your cursor and hit F12 to immediately jump to its definition.

visual-studio-code-definition

Or you can use ALT + F12 to simply peek at the definition, which shows you the definition right in line where your cursor is rather than opening up the source file.

visual-studio-code-inline

To go the opposite direction, you can select a defined variable/method and use SHIFT + F12 to find all references to it. This also shows up in line at your cursor.

In order for these features to work, you need to make sure the proper folder is opened as the “current working project” (see tip #2).

6. Rename All Occurrences

Refactoring is a necessary aspect of writing and maintaining clean code 10 Tips for Writing Cleaner & Better Code 10 Tips for Writing Cleaner & Better Code Writing clean code looks easier than it actually is, but the benefits are worth it. Here's how you can start writing cleaner code today. Read More , but it can be quite the headache — especially when you’re refactoring a large module or an otherwise huge chunk of code. So instead of hunting through dozens of files just to rename a variable or method, let VS Code do it for you.

If you select a variable/method and hit F2, you can edit the name and it will change every instance of that variable’s name throughout the entire current working project.

visual-studio-code-refactor

If you only want to change within the current file, use CTRL + F2 and VS Code will spawn a cursor at every instance throughout the current file.

7. Search Across Many Files

If you’re working with files that aren’t source code, the symbol-finding features above (in tip #5) won’t be usable. So what can you do when you need to find a sentence or word but don’t know which file it’s in? You go back to the basic find function.

visual-studio-code-search

CTRL + F lets you search within the current file, while CTRL + SHIFT + F lets you search within all files in the entire current working project, including all sub-folders recursively.

8. Take Advantage of Terminal

VS Code comes with an integrated terminal. On Windows, this terminal shows up as Command Prompt. On Mac and Linux, it shows up as a Bash prompt. Either way, the terminal starts off in the current working project’s directory (if one is loaded) or in your home folder (if no project is loaded).

visual-studio-code-terminal

It also supports the ability to have multiple, separate terminals. Just click the + at the top right to spawn more terminal instances, or click the Trash Can to close the current terminal. The drop-down menu makes it easy to switch between them (and doesn’t waste as much screen space as a tab-based interface might).

9. Install a New Theme

As one would expect, VS Code lets you theme the syntax highlighting of text and source code. Unfortunately, it doesn’t allow theming of the interface itself, but the syntax highlighting is the important bit. You’d be surprised how much a good theme can boost your productivity.

visual-studio-code-themes

You can find new themes on the VS Code Marketplace (don’t worry, they’re free) or you can search for them directly in VS Code.

10. Install Third-Party Extensions

The last essential feature we want to highlight is the extensibility of VS Code through third-party extensions. As with themes, you can find them on the VS Code Marketplace (yes, these are free as well) or you can search for them in VS Code. Access the Extensions panel with CTRL + SHIFT + X.

visual-studio-code-extensions

Extensions are the key to maximizing your productivity. You’ll find all kinds of tools here, like linters, debuggers, snippets, quality-of-life improvements to VS Code itself, build tools, and even one that implements Vim emulation The Top 7 Reasons To Give The Vim Text Editor A Chance The Top 7 Reasons To Give The Vim Text Editor A Chance For years, I've tried one text editor after another. You name it, I tried it. I used each and every one of these editors for over two months as my primary day-to-day editor. Somehow, I... Read More .

Visual Studio Code: What Do You Think?

As much as I love it, I’ll be the first to admit that VS Code isn’t perfect for anyone — nothing ever is — and it may not be what you’re looking for. Or maybe it’s exactly what you need! Give it a try and go in with an open mind. I think you’ll be surprised by what you find.

And I’m curious to hear what you think about Visual Studio Code! Do you think it’s missing anything compared to its alternatives? Which features do you appreciate the most?

What do you look for in a text editor? Let us know in a comment down below!

  1. Kirt Henrie
    October 7, 2016 at 5:46 pm

    Great tips! I am also a Sublime convert and I never thought that would happen. The only downside is it consumes more memory than Sublime which can be a problem for me when I have several windows open each with several editors.

Leave a Reply

Your email address will not be published. Required fields are marked *