DEV Community

Cover image for 8 Essential VS Code Extensions [2024]
Evotik
Evotik

Posted on • Updated on

8 Essential VS Code Extensions [2024]

Hey fellow amazing developers, we got you Essential VS Code Extensions for 2024 (these are especially important for web developers) recommended by our developers at evotik, we wont talk about ESlint nor Prettier which all of you already know.

We bring you best 8 we experienced so lets list them for you here.

Live Server

Image description

Live Server is a development tool that offers live reloading and a local server for your web projects. It enables you to view changes instantly as you modify HTML, CSS, and JavaScript files. The Live Server extension for VS Code initiates a local server and displays your project in the browser, simplifying the process of testing and debugging your code while you develop.

Markdown All in One

Image description

The Markdown Support extension for Visual Studio Code enriches your Markdown editing experience with features like keyboard shortcuts, table of contents, and auto preview. It enhances VS Code's native Markdown capabilities, which include a basic preview function. This extension also supports GitHub Flavored Markdown, Math expressions, and has settings for optimizing the Table of Contents and list editing. Additionally, it offers the ability to print Markdown to HTML and handles GitHub-specific Markdown syntax.

GitLens

Image description

GitLens supercharges the native Git features of VS Code with its comprehensive suite of tools. It offers deep insights into your Git repository, such as detailed commit histories, authorship data, and graphical branch exploration. GitLens simplifies the process of exploring and managing your Git repositories, proving itself as an indispensable tool for developers engaged in Git-based projects.

Code Spell Checker

Image description

Code Spell Checker extension scans your code for spelling mistakes, helping to maintain accuracy in variable names, comments, and documentation. It is particularly valuable in larger projects, enhancing readability and ensuring professionalism. By identifying and offering fixes for spelling errors, it supports developers in producing well-documented and clear code, thereby improving overall code quality and facilitating collaboration.

Beautify

Image description

The Beautify extension for Visual Studio Code enhances the native beautification capabilities, allowing developers to customize the formatting style with a .jsbeautifyrc configuration file.

It supports beautifying JavaScript, JSON, CSS, Sass, and HTML. This extension intelligently determines the appropriate settings based on your workspace and uses any specified .jsbeautifyrc files from various directory levels or the user's home directory. It merges these settings with VS Code's own configurations, ensuring a seamless integration that respects the coding standards set within your projects.

Better Comments

Image description

The Better Comments extension enhances code commenting by allowing developers to categorize comments into types like Alerts, Queries, TODOs, and Highlights. It supports multiline and plain text comment styling, configurable through User or Workspace settings. This extension helps in making comments more readable and organized, which can improve code maintenance and clarity.

JavaScript (ES6) code snippets

Image description

The VS Code JavaScript (ES6) snippets extension provides a collection of code snippets for JavaScript and TypeScript, enhancing productivity in coding with ES6 syntax. The snippets range from import/export functionalities to various helper methods for classes and console operations. This extension supports multiple file types and can be easily installed via the Command Palette. Additionally, it includes features to review code directly within the IDE, offering tools such as jump-to-definition among others.

Settings Sync

Image description

The Settings Sync extension for Visual Studio Code, formerly known as Visual Studio Code Settings Sync, offers comprehensive synchronization of VS Code settings using GitHub Gists. It enables one-click uploads and downloads of settings and extensions, supports GitHub Enterprise, and can sync any file across devices. Key features include automatic updates on startup, sharing settings with others through Gist, and a GUI for easy configuration. The extension is particularly useful for teams in a professional setting.


We hope that you liked our list, and if you did ask us for more specific extensions. We invite you to see our other articles about Open-Source Next.js Projects and NPM Packages for JavaScript Beginners. If you are in Dubai or UAE you might find our article about Payment Gateways guide interesting too check it.

Top comments (11)

Collapse
 
edmundo096 profile image
Edmundo Elizondo • Edited

Those are quite the same popular recommenations from the covid era or earlier.
One extension have been even abandoned and not working good enough for a few years now, unless you do some workarounds.
Is this article AI generated? By the 2024 suffix, it seems like it.
If not, then it would be nice to know your opinions for each of them.

Collapse
 
evotik profile image
Evotik

Not at all, though we have tagged it for beginners, so new comers can benefit from this definitely. What is old news for us, is a new finding for fresh developers. We ll post one advanced list for newly released useful extension ❀
Image description

Collapse
 
mike_earley_2ac31f69e25a7 profile image
Mike Earley

I don’t want to see the same plugins everyone puts in their articles and videos. Find some new ones to recommend!!!

Collapse
 
evotik profile image
Evotik

We have tagged it for beginners, so new comers can benefit from this definitely. What is old news for us, is a new finding for fresh developers. We ll post one advanced list for newly released useful extension ❀
Image description

Collapse
 
danieloor profile image
Daniel Oor • Edited

Title says "8 Essential VS Code Extensions [2024]".
Essential is for everyone.
Doesn't say "8 new VS Code Extensions [2024]" or "new VS Code Extensions for xperienced users [2024]"
So the title's right for the article, and your comment is egocentric: you want everything to be for experienced readers only...

Collapse
 
motss profile image
Rong Sen Ng

Settings Sync should be part of the built-in extensions in VS Code now.

Collapse
 
evotik profile image
Evotik

True to that

Collapse
 
chewingoncode profile image
ChewingOnCode

The Beautify code extension is deprecated and is not being maintained anymore. Please remove it from your list.

Collapse
 
evotik profile image
Evotik

It is still active on market place, but we take your point here, it is not a stright forward thing to work with it. We ll post one advanced list for newly released useful extension ❀
Image description

Collapse
 
gsivaprabu profile image
Sivaprabu Ganesan • Edited

Settings Sync :

Is default available in VSCODE?

Image description

Image description

Collapse
 
dev737 profile image
dev-737 • Edited

How are these 8 essential extensions when there's 2 deprecated ones?? There are outdated extensions, and the settings sync have been merged into VSCode's main features a long time ago. Whats going on?