If you haven’t been introduced yet, meet Visual Studio Code

Visual Studio Code is a text editor that is gaining popularity on a daily basis.  If you’re looking for one place to highlight all of the key features that have developers making the switch to VS Code, look no further.

Jump to a section:

 


Cross Platform Availability

When you think ‘Visual Studio’ your mind might automatically jump to a description of an expensive and beastly application that primarily runs on the Windows operating system.  Visual Studio Code is free and is available for Windows, macOS and Linux.


Text Editing Capabilities

First thing’s first, this is a text editor.  Whether you’re used to Vim, Emacs, Sublime Text, Atom, etc., you most likely know what I’m talking about here.  You’ll get the standard multi-language support and syntax highlighting.  However, there are a few gems that you should be aware of.  You may be familiar with the following features from using your favorite IDE but keep in mind this is a lightweight text editor we’re talking about here.  In addition to those highlighted below, there are other interesting features such as multi-cursor selection, column editing, auto save capabilities, “hot exit” functionality, formatting, region folding, file encoding and much more.

IntelliSense

Once VS Code is installed IntelliSense is provided for JavaScript, TypeScript, JSON, HTML, CSS, Less, and Sass.  This includes invaluable code editing features such as code completion, parameter info, quick info, and member lists.  If you’re bummed out because you’re language isn’t listed above, no worries.  IntelliSense is most likely available by installing a language extension.  Lastly, your IntelliSense experience can be customized in your user or workspace settings.

VsCodeIntellisense

Code navigation

Navigating between files is simple and easy.  You can hold Ctrl and press Tab to see all of the files you’re currently working on.  Keep pressing Tab to highlight the desired file, release Ctrl and the file will open.  Alternatively, you can type the file name you’re looking for by pressing Ctrl+P (or ⌘+P for Mac).

‘Go to Definition’ functionality is available which makes life 10x easier if you’re working with a large code base.  There are multiple ways to jump to the desired section of your code.  For example, if you just put the cursor on a method name and press F12 it will take you directly to that method definition regardless of which file it’s in.  The same can be accomplished by holding the Ctrl key (or ⌘ for Mac) and clicking the method name.


Preference Flexibility

There are a number of ways to alter your editing experience depending on your personal preferences.

Editor settings

VS Code offers users the ability to configure the editor settings either globally or for the current workspace.

File > Preferences > Settings on Windows

Code > Preferences > Settings on Mac

EditorSettings.png

When you set your user preferences globally they will apply to any instance of VS Code that you open.  However, this is overridden at the workspace scope by workspace preferences if they exist.  Workspace settings live in the ‘.vscode’ directory.  This is extremely useful for a consistent editing experience for every member of a team working on the same source code.  Although, there may be a few arguments when deciding how many spaces are in a tab 🙂

Themes

You have the ability to completely customize the theme of your editing experience from colors to icons.  You can also pick from themes that have already been created.

PreviewThemes

Keyboard shortcuts

Some of the developers reading this might be dreading the thought of recreating all of the key bindings that have accumulated in their favorite code editor over the years.  There’s good news.  There is a savvy tool for customizing all of your keyboard shortcuts.  You can easily import your key bindings from other popular editors via a keymap extension.


This feature is one of my favorites.  You have the ability to search for text within the current file or search all files in the currently opened folder.  If there are thousands of files in your workspace, VS Code gives you the ability to easily include or exclude files from your search query.  You can also bulk replace text in multiple files.

Aside from development, I personally use VS Code to take notes and it’s very easy to find any text regardless of the folder that the target file is in.


Source Control Integration

Personally, I use VS Code’s out of the box Git source control manager and it works like a charm.  I can easily view the files I’ve modified, stage files for commits, add a commit message, commit the code and push to my upstream branch with the click of a button.

Note: In order to leverage this feature you need to install Git locally (at least version 2.0.0).

This is also handy for comparing a file in your local workspace to the repo version.  VS Code has a nice “diff” tool built in!

VersionControlDiff


Extensions

There is a substantial marketplace for extensions which you can install to enhance your experience in the editor.  Extensions are designed to strengthen your development workflow.

ExtensionGallery

VS Code will let you browse popular extensions as well as search for a specific add-on.  It even suggests extensions which are recommended based off of the work you do!


Debugging Capabilities

Let’s not forget about the basics.  There is direct debugging functionality available in Visual Studio Code.  Initially, there is debugging support for the Node.js runtime.  You can debug JavaScript, TypeScript and any other language that gets transpiled down to JavaScript.  As always, you can install extensions for additional debugging support.  Below are a few popular examples.

DebuggerExtensions


Accessibility

Accessibility is often overlooked or is one of the last features to roll out in a product.  VS Code has a ton of great accessibility options for users who need or prefer them.

  • Zoom and high contrast colors for readability
  • Built in screen-reader support
    • Note: the integrated terminal does not yet support screen-readers but this is actively being worked on (Github issue)
  • Keyboard navigation options
    • Everything can be done without a mouse
    • Intuitive tab navigation
    • Even features such as debug hover are keyboard accessible

Community Presence

Some of you may have experienced the empty feeling when you find out that your favorite editor is no longer being developed and/or supported.  This editor is open sourced and is constantly being updated by some folks over at Microsoft.  The people working to make this product so great are also listening to the community and implementing high-demand features as well as bug fixes.

There are a ton of “how-to” sites and Q/A threads that can answer pretty much any question you have.  If something just isn’t working correctly, submit an issue on the VS Code Github repository.


Wrapping things up

There are many other awesome features such as the integrated terminal, custom snippet support, emmet and tasks.  If you’d like to investigate further, I’d urge you to check out this page with a ton of detailed tips then get started with VS Code.  Install this software if you want the power of an IDE and the speed of a text editor.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s