Top 10 VS Code Extensions Every Developer Should Use

1. Prettier – Code Formatter

Prettier is an opinionated code formatter that supports many languages and integrates with most editors. It enforces a consistent style by parsing your code and reprinting it with its own rules.

Key Features

• Supports multiple languages including JavaScript, TypeScript, CSS, and more.
• Enforces a consistent code style.
• Integrates with most editors and tools.

Usage

To use Prettier, you can either format your file manually or set it to format on save.

// .vscode/settings.json
{
  "editor.formatOnSave": true
}

Example

Before Prettier:

function greet(name){console.log('Hello, '+name);}

After Prettier:

function greet(name) {
  console.log("Hello, " + name);
}

2. ESLint

ESLint is a static code analysis tool for identifying problematic patterns in JavaScript code. It helps in keeping the code consistent and avoiding bugs.

Key Features

• Supports custom rules and plugins.
• Works with most JavaScript tools and frameworks.
• Offers auto-fixing of common issues.

Usage

Install ESLint and configure it with the following command:

npx eslint --init

Example

ESLint configuration file:

// .eslintrc.json
{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": "eslint:recommended",
  "parserOptions": {
    "ecmaVersion": 12
  }
}

3. Live Server

Live Server provides a local development server with live reload capability. This extension is crucial for web developers who want to see changes in real-time.

Key Features

• Auto-refresh the browser as you save files.
• Supports both static and dynamic pages.
• Easy to set up and use.

Usage

Simply right-click your HTML file and select “Open with Live Server”.

4. GitLens

GitLens supercharges the built-in Git capabilities of VS Code. It helps in visualizing code authorship and navigating through Git repositories.

Key Features

• Visualize code authorship at a glance.
• Navigate and explore Git repositories.
• Seamless integration with GitHub.

Example

View the history and blame information directly in the code editor:

# View inline history
gitlens: toggle blame

# View the file history
gitlens: view file history

5. VS Code Icons

VS Code Icons enhance the default file and folder icons in VS Code. This makes it easier to navigate and identify files at a glance.

Key Features

• Provides a wide range of icon themes.
• Customizable to fit your preference.
• Supports most file types and extensions.

Usage

Install the extension and select your preferred icon theme:

// .vscode/settings.json
{
  "workbench.iconTheme": "vscode-icons"
}

6. Bracket Pair Colorizer 2

Bracket Pair Colorizer 2 helps in identifying matching brackets by coloring them. This is particularly useful in languages with heavy use of brackets like JavaScript or Python.

Key Features

• Colorizes matching brackets for easy identification.
• Configurable color schemes.
• Supports nested brackets.

Example

With Bracket Pair Colorizer 2, matching brackets are highlighted in the same color:

function example() {
  if (true) {
    while (false) {
      console.log('Test');
    }
  }
}

7. Path Intellisense

Path Intellisense provides autocompletion for file paths in your workspace. This extension is a great time-saver, especially when dealing with large projects.

Key Features

• Autocompletes file paths as you type.
• Supports both relative and absolute paths.
• Reduces errors in file path references.

Example

Start typing a file path and let the extension complete it for you:

import myModule from './components/myModule';

8. Debugger for Chrome

Debugger for Chrome allows you to debug your JavaScript code running in Google Chrome directly from VS Code. It simplifies the debugging process by integrating it within the editor.

Key Features

• Set breakpoints, step through code, and inspect variables.
• Debug Node.js and browser apps.
• Integrated debugging experience.

Usage

Add the following configuration to your launch.json file:

// launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

9. Remote – SSH

Remote – SSH allows you to open a remote folder on any SSH server and take advantage of VS Code’s features. This is particularly useful for working with remote servers without leaving the editor.

Key Features

• Develop on remote machines or containers.
• Seamless integration with VS Code.
• Supports secure connections.

Usage

Use the command palette to connect to a remote server:

# Open the command palette
F1 > Remote-SSH: Connect to Host

10. IntelliCode

IntelliCode brings AI-assisted code completions to VS Code. It provides smarter suggestions based on your coding pattern and the open-source community.

Key Features

• Provides AI-enhanced code completions.
• Learns from your code patterns.
• Supports multiple languages.

Example

Start typing a method or property, and IntelliCode will prioritize suggestions:

// Begin typing 'console'
console.log('Hello, world!');

These extensions significantly enhance the functionality of VS Code, making it a powerful tool for development across various languages and frameworks. By installing and configuring these extensions, developers can optimize their workflow for efficiency and productivity.