Full-Stack Engine

Recommended VSCode extensions for JavaScript

Visual Studio Code (VSCode for short) has become one of the most popular Editor for working with JavaScript. Thanks in part to the constant efforts of Microsoft to support several features out of the box and provide constant improvement through updates; and thanks also to the open source community that create a great bunch of extensions to work with among other things, JavaScript.

In the previous post, I wrote about my recommended extensions (packages) React, you can read it here.

Note: If you're interested in learning JavaScript, I wrote a guide for starting in JavaScript: How to start in JavaScript in 2018 - From beginner to Full-Stack

VSCode offers several great packages to complement your programming experience in JavaScript, let's begin our tour through my recommended selection!

Bracket Pair Colorizer

One of the first things you can ask an editor is to improve readability when we have large blocks of code, with nested loops, object notations, promises and other common code structures. This extension allows matching brackets to be identified with colors to help to define scopes.

From its page description, features include:

User defined matching characters

  • By default (), [], and {} are matched, however custom bracket characters can also be configured.
  • A list of colors, being configured, as well as a specific color for orphaned brackets.

Screenshot:

example

Prettier

Prettier is a JavaScript, TypeScript and CSS formatting for VSCode with ESLint integration.

prettier

To enable ESLint integration, go to Preferences->Seetings and add the following configuration object:

{
    "prettier.eslintIntegration": true,
}

ESLint

As usual, when coding using React as our front-end framework, we're writing ES6 code, which is not strongly typed nor compiled ahead, so it's easy to introduce syntax errors that are not evident until execution time, so to solve these problems, eslint is a must have a tool, checking the most common types of errors as you write.

usage

vscode-icons

Bring icons to VSCode for more appealing look!.

screenshot

Auto Import - ES6,TS,JSX,TSX

This extension let us automatically find and code complete for all available import as we type. Very useful when creating a new component, module index or any other piece of JS code that needs an import from an external module. It works for JavaScript ES6 and TypeScript as well.

giphy

Auto Close Tag

Auto Close Tagis a simple extension that does a single task, closing tags in HTML markup. However, as simple as it sounds it's something missing in a plain VSCode installation and makes your life easier when writing web content. Auto Close Tag works with plain HTML code as well as with JSX.

usage

Git Lens

Another excellent extension for VSCode to work with Git. Similar to Git History, it provides the changes log for every file and branch we have in the project we're working on, but also provide other useful features, like current line blame at the end of each line of code.
Git Lens site in Market Place offers a list of some of the features:

  • a GitLens explorer to navigate and explore repositories or file histories
  • an on-demand GitLens Results view to explore committed searches, visualize comparisons between branches, tags, commits, and more
  • authorship code lens showing the most recent commit and # of authors to the top of files and on code blocks
  • an unobtrusive current line blame annotation at the end of the line
    on-demand gutter blame annotations, including a heat map, for the whole file
    detailed blame information accessible via hovers
  • on-demand recent changes annotations to highlight lines changed by the most recent commit
  • a status bar blame annotation showing author and date for the current line
  • commit search — by the message, author, filename, commit id, or code changes
  • many powerful commands for exploring commits and histories, comparing and navigating revisions, stash access, repository status, and others
  • and so much more

gitlens-preview

Thank you for reading these recommendations and enjoy coding!. Take care and see you next time!.

Author image
Costa Rica
Passionate Software Developer with full-stack development experience.