🔥10 Useful Extensions For VS Code

Hello everyone Today, I have prepared 10 extensions for VS Code that will help you develop cool software products, and generally speed up the development process. You may have used some extensions and are using some now. But I think that you will definitely be able to find something new for yourself :)

1.

Example:

When writing a function in JavaScript:

function calculateSum(numbers) {

    // Tabnine may suggest the following:

    return numbers.reduce((a, b) => a + b, 0);

}

Tabnine automatically suggests the logic for summing an array, saving you time.

2.

Example:

Define a database schema:

model Product {

  id          Int      @id @default(autoincrement())

  name        String

  price       Float

  inStock     Boolean

}

Prisma validates this schema and warns if there are missing relationships or invalid data types.

3.

Features:

• 
  Blame Annotations: View the author of each line of code.
  


• 
  Visual History: Navigate commit logs and file changes.
  


• 
  Inline Comparison: Compare changes inline for better code reviews.

Example:

When working on a file, GitLens shows:

• Who edited each line.
  


• The date of the edit.
  


• The commit message, helping trace the reason for changes.

4.

Features:

• 
  Quick Fix Suggestions: Automatically suggests required imports.
  


• 
  Configurable Paths: Adapts to your project's import settings.
  


• 
  Multi-language Support: Works with TypeScript, JavaScript, and more.

Example:

When using a utility function:

capitalize("example");

Auto Import will add:

import { capitalize } from './string-utils';

This eliminates manual imports and speeds up coding.

5.

Features:

• 
  Smart Suggestions: Provides full code snippets.
  


• 
  Comment-Driven Coding: Writes functions based on comments.
  


• 
  Multi-Language Support: Works with popular languages like JavaScript, C#, and Rust.

Example:

Write a comment like:

// Function to reverse a string

Copilot generates:

function reverseString(str) {

    return str.split('').reverse().join('');

}

6.

Features:

• 
  Dynamic Updates: Edits both opening and closing tags in real-time.
  


• 
  Error Prevention: Avoid mismatched tags.
  


• 
  Works with Nested Tags: Handles complex structures efficiently.

Example:

Change:

<div>Content</div>

To:

<section>Content</section>

Auto Rename Tag updates the closing tag to <section> automatically.

7.

Features:

• 
  Inline Suggestions: Highlights potential typos as you type.
  


• 
  Custom Dictionaries: Add project-specific terms to avoid false positives.
  


• 
  Language-Agnostic: Works across all programming languages.

Example:

If you write:

// A simple fuction to calculate sum

The extension highlights "fuction" and suggests "function."

8.

Features:

• 
  Auto-Refresh: Instantly displays changes in the browser.
  


• 
  Custom Configurations: Adjust server settings as needed.
  


• 
  Supports Multiple File Types: Works with HTML, CSS, and JavaScript.

Example:

Edit your .html file and save. The browser will reload automatically to reflect your changes, saving time during development.

9.

Features:

• 
  Request Files: Write .http or .rest files to define API requests.
  


• 
  Formatted Responses: Displays API responses in a structured format.
  


• 
  Dynamic Variables: Use environment variables for flexible testing.

Example:

Create a request in a .http file:

GET https://api.example.com/items  

Authorization: Bearer YOUR_API_TOKEN

Run it, and REST Client shows the response directly in VS Code.

10.

Features:

• 
  Quick Access: Open saved projects from the command palette.
  


• 
  Workspace Customization: Save and restore workspace layouts.
  


• 
  Project Labels: Add meaningful names for easy identification.

Example:

Save your project as "My New Project." Later, use the command palette to quickly switch to it, with all your open files and layout preserved.

Conclusion

In this short list, I have tried to indicate the most useful and frequently used extensions that can and should be used when working on code. Of course, there are still a bunch of interesting extensions that can also help in development, but they simply won't be included in 10, since there are a lot of them. What other cool extensions do you think there are? It will be cool to find out in the comments. Thanks!

By the way, you can check out the template language I'm working on! He's pretty cool, in my opinion, and I think he can help solve typical server and client problems. It will be cool if you give a star ☆ to the project :)