![Cover image for 8 Essential VS Code Extensions [2024]](https://media.dev.to/cdn-cgi/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fg7hewtkv33f12oraf22g.png)
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
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
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
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
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
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
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
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
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)
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.
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 ❤
I don’t want to see the same plugins everyone puts in their articles and videos. Find some new ones to recommend!!!
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 ❤
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...
Settings Sync should be part of the built-in extensions in VS Code now.
True to that
The Beautify code extension is deprecated and is not being maintained anymore. Please remove it from your list.
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 ❤
Settings Sync :
Is default available in VSCODE?
How are these 8 essential extensions when there's 2 deprecated ones?? There is outdated extensions, and the settings sync have been merged into VSCode's main features a long time ago. Whats going on?