Top 10 Visual Studio Code Extensions for Node.js

Top 10 Visual Studio Code Extensions for Node.js

Here are my top picks for Visual Studio Code extensions for Node.js developers

Here are my top picks for Visual Studio Code extensions for Node.js developers

I am amazed at the adoption of Visual Studio Code by developers from all platforms and languages. According to the 2019 Stack Overflow Developer Survey, VS Code is dominating. The primary reasons I use VS Code are its great support for debugging JavaScript and Node.js code, and how easy it is to customize with free extensions available in Visual Studio Marketplace.

However, there are thousands of extensions available! How do you know which ones are good to use?

One way is to look at an extensions average rating and the number of downloads to gauge its popularity. Another way is to read personal opinion posts like this one. And here you are!

Bracket Pair Colorizer 2

I try to keep my code as simple as possible and not nest too many things. Unfortunately, sometimes it is unavoidable. Bracket Pair Colorizer 2 colorizes matching brackets, making it easier to visually see which opening and closing brackets, braces, or parentheses belong to each other.

npm

The npm extension provides two features: running npm scripts defined in the package.json in the editor and validating the packages listed in the package.json.

npm Intellisense

The npm Intellisense extension introduces autocomplete behavior when you use require() to import modules into your code.

ESLint

When I initialize a new Node.js project folder, the first thing I install from the terminal is ESLint.

npm init -y
npm install --save-dev eslint

The ESLint extension uses your local ESLint and configured rules to look for common patterns and issues in JavaScript code, and is designed to help you write better code with fewer bugs. ESLint can also reformat your code to make it more consistent, depending on the rules you have enabled for your project. Be sure to enable Auto Fix On Save ("eslint.autoFixOnSave": true) in your VS Code settings.

You can initialize an ESLint configuration file in your project with this command.

npx eslint --init

My current .eslintrc.js looks like the following.

module.exports = {
 env: {
   commonjs: true,
   es6: true,
   node: true
 },
 extends: "eslint:recommended",
 globals: {},
 parserOptions: {
   ecmaVersion: 2018
 },
 rules: {
   indent: [ "error", "tab" ],
   "linebreak-style": [ "error", "unix" ],
   quotes: [ "error", "double" ],
   semi: [ "error", "always" ],
   "array-bracket-spacing": [ "error", "always" ],
   "object-curly-spacing": [ "error", "always" ],
   "space-in-parens": [ "error", "always" ]
 }
};

Code Spell Checker

I don’t know about you, but it really bugs me when I discover I’ve misspelled function names, variables, comments, or anything else in my code. Misspelled code, as long as it’s consistently misspelled, works fine, but mistakes can still be frustrating or embarrassing.

Well, those days are over with Code Spell Checker! One nice thing is the extension understands camelCase, PascalCase, snake_case, and more. Another great feature is there are dictionaries available for Spanish, French, German, Russian, and a number of other languages.

Auto Close Tag

More recent versions of VS Code automatically create closing tags when you are working in an HTML or XML file. For other file types, such as JavaScript, Vue, and JSX, Auto Close Tag will save you some typing!

DotENV

It’s quite common to configure Node.js applications using environment variables. And, one of the most popular modules for managing environment variables is dotenv. The DotENV extension for VS Code adds convenient syntax highlighting when editing a .env file.

Path Intellisense

The Path Intellisense extension adds autocomplete support for file paths and names, reducing typing as well as the introduction of bugs related to wrong paths.

MarkdownLint

Good code and good documentation go hand-in-hand. I prefer to write README’s and other documentation in markdown format. The Markdownlint extension can help you make sure your markdown syntax is in good form!

Material Icon Theme

The Material Icon Theme adds a ton of icons to VS Code for different file types. Being able to quickly distinguish different files in project can be a great time saver!

Honorable Mention VS Code Extensions for Node.js

These extensions didn’t make the top 10 list, but are still useful in some scenarios for Node.js developers!

  • Encode Decode - Adds commands to quickly convert text to and from various formats, such as Base64, HTML entities, and JSON byte arrays.
  • Rest Client - Make HTTP requests directly from your editor and view the responses in a separate window. Great for testing and prototyping APIs.
  • Better Comments - This extension helps you create more “human-friendly” comments by adding highlights to different types of comments.

node-js web-development npm visual-studio

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Hire Node.JS Developers | Skenix Infotech

We are providing robust Node.JS Development Services with expert Node.js Developers. Get affordable Node.JS Web Development services from Skenix Infotech.

How to Hire Node.js Developers And How Much Does It Cost?

A Guide to Hire Node.js Developers who can help you create fast and efficient web applications. Also, know how much does it cost to hire Node.js Developers.

Top Node.js Development Companies and Expert NodeJS Developers

A thoroughly researched list of top NodeJS development companies with ratings & reviews to help hire the best Node.JS developers who provide development services and solutions across the world. List of Leading Node.js development Service Providers...

Hire Web Developer

Looking for an attractive & user-friendly web developer? HourlyDeveloper.io, a leading web, and mobile app development company, offers web developers for hire through flexible engagement models. You can **[Hire Web...

Hire Node JS Developer from Expert Node JS Development Company

NodeJS Development Company-Hire Node JS developer from the most prominent NodeJS development company, Mobiweb and get remarkable Node.js app development services.