JavaScript Extensions Part 2

October 31, 2016 by Wade Anderson, @waderyan_

Visual Studio Code has excellent support for JavaScript out of the box. As with other languages, JavaScript is powered by a language service. The JavaScript language service is implemented by the TypeScript team, allowing JavaScript developers to leverage the best IntelliSense experience.

But what other features can you get with VS Code? VS Code has a rich extensibility model and many features are provided through VS Code extensions. This post is a follow up to my previous post about JavaScript extensions.

Tip: Install any of these extensions by clicking the Extensions View button, typing the name of the extension in the Search box, and clicking Install. Learn more at Browse for extensions.

Debugger for Chrome

Marketplace - Debugger for Chrome

Publisher - Microsoft

When you develop for the front end, you might not see the value of an integrated debugger in your editor. You use the browser's debugger right? This is where the Debugger for Chrome extension comes in. This extension lets you debug your JavaScript code in the Google Chrome browser, or any other targets that support the Chrome Debugging Protocol while staying in VS Code. No more context switching to debug!

Prefer to debug using a different browser? You can find extensions for Edge and Firefox as well.

debugger for chrome image

Git Project Manager

Marketplace - Git Project Manager

Publisher - Felipe Caputo

Although not necessarily a JavaScript extension, Git Project Manager is a favorite in the VS Code team. This extension scans a directory (or directories) for Git repos and allows you to switch between them easily.

To use this extension, first install it and then add the following configuration to your settings.json file.

"gitProjectManager.baseProjectsFolders": [
    "/path/to/your/base/project/folders"
]

git project manager showcase

Beautify

Marketplace - Beautify

Publisher - HookyQR

Internally, VS Code uses js-beautify. This extension allows you to specify a .jsbeautifyrc file to indicate the formatting style for your JavaScript, CSS, Sass, and HTML code.

You can search the Marketplace for more formatters using the new Formatters category.

Note: For extension authors, we are working on a blog post for source code formatters best practices. Stay tuned as it will be coming soon.

Keymaps for Sublime Text and Atom

There are two extensions in this section, one for Atom and another for Sublime Text. If you have used these editors, you have likely memorized their keyboards shortcuts. These extensions bring the keyboard shortcuts from Atom and Sublime Text to VS Code.

These extensions are in preview because we want your feedback. There are still many shortcuts to include and it is easy for you to add any we may have missed.

  1. Go to the extension's GitHub repository (Atom and Sublime Text).
  2. Open the package.json file (Atom and Sublime Text).
  3. Add a JSON object to contributes.keybindings section of package.json as seen below (Atom and Sublime Text).
  4. Open a pull request.
{
  "mac": "<keyboard shortcut for mac>",
  "linux": "<keyboard shortcut for linux",
  "win": "<keyboard shortcut for windows",
  "key": "<default keyboard shortcut>",
  "command": "<name of the command in VS Code"
}

Do you have other editors or IDEs you'd like to make a keymap for? Simply follow the instructions in the contributes.keybindings section and the Keybindings document.

It's raining keyboard shortcuts

If you find that VS Code does not have a keyboard shortcut feature from Atom, Sublime Text or another product, please comment in one of these GitHub issues (Atom and Sublime Text) or create a new issue.

Additionally, there are many extensions in the Marketplace which add useful keyboard shortcuts:

Creating your own JavaScript extension

Not finding an extension that meets your needs. You can make your own with JavaScript or TypeScript! Check out the documentation to learn more.

Wade Anderson, VS Code Team Member
@waderyan_