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. Tabnine
Tabnine is an AI-powered extension that provides intelligent, context-aware code completions to speed up development across multiple programming languages.
Features:
- Intelligent Suggestions: Offers code completions based on your project context.
- Multi-language Support: Works with JavaScript, C++, Go, and more.
- Privacy-Focused: Keeps your code secure with local inference models.
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. Prisma
Prisma makes database management easier by providing schema modeling and query validation, compatible with databases like PostgreSQL, MySQL, and SQLite.
Features:
- Schema Definition: Create and manage database schemas efficiently.
- Autocomplete: Helps write queries faster.
- Error Validation: Highlights syntax errors in schemas and queries.
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. GitLens
GitLens enhances Git functionality in VS Code by adding annotations, commit details, and history directly into your editor.
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. Auto Import
Auto Import automatically adds missing imports for classes, methods, or libraries as you use them.
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. GitHub Copilot
GitHub Copilot is an AI-driven assistant that writes code based on context, comments, or partial lines of code.
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. Auto Rename Tag
Auto Rename Tag updates the closing tag automatically when you edit the opening tag in HTML, XML, or other structured languages.
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:
<main>
<div id="content">Content</div>
</main>
To:
<main>
<section id="content">Content</section>
</main>
Auto Rename Tag updates the closing tag to <section> automatically.
7. Code Spell Checker
Code Spell Checker identifies typos in your code, comments, and strings to maintain quality and readability.
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. Live Server
Live Server launches a local development server that reloads your webpage automatically whenever you save changes.
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. REST Client
REST Client allows you to test APIs directly in VS Code without needing separate tools like Postman.
Features:
-
Request Files: Write
.httpor.restfiles 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. Project Manager
Project Manager helps you organize and quickly switch between multiple projects within VS Code.
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 :)
Top comments (20)
VSCode has built-in auto tag completion that you can enable in your settings.
{
"editor.linkedEditing": true,
"javascript.preferences.renameMatchingJsxTags" : true,
"typescript.preferences.renameMatchingJsxTags" : true
}
The 2 settings at the bottom are for people using JSX
Yes, this, as I understand, appeared relatively recently. In the old-fashioned way, people simply install the auto rename tag extension, I also could not help but include it in the list.
But most likely yes, this may not be entirely relevant today.
Why still people uses Auto Rename Tags / Auto imports, vscode already provides this, just search import and rename in settings then manually search foe those settings
I know extentions are easy fix for this but don't forget they come with cost of some memory, while Auto rename, auto closing tag extention don't work always in bg, but extentions like, auto import tag always works in behind and may cause some memory issues take more loading time.
"I'm too lazy to search and figure out the settings when I can install an extension that I've been installing for 6+ years by default and everything works" - maybe? It's more of a habit.
If it works, don't change it. That's all. I have been using VSCode since 2018, syncing all of my settings and extensions, and it runs fine. Why should I find another way to do the same thing?
I need more of these..š„
Thanks! There's a lot more that I've used all the time. It will also be necessary later, maybe to take out separate topics, or just increase it to 30.
I'm waiting š
me too
also
also
also
Cool!
I will need to make an extended list, there are many more interesting things.
Here are some more
21 VS Code Extensions To Boost Your Productivity
Kiran Naragund ć» Jun 2
Here the list has more extensions - this is a plus
Nice list! š If you want to work faster, check out my article about DevTools and VS Code shortcuts: Boost Your Productivity with These Essential Developer Shortcuts.
Github Pull Request: To review git pr in vs code.
Nice!