Great VS Code Extensions
As a developer, your code editor is your most important tool. One of the perks of using VS code is the numerous extensions available to enhance your workflow. In this article, we’ll explore some of the best VS code extensions that can significantly improve your coding experience. From productivity and time-saving extensions to debugging and code analysis tools, we'll cover everything that you need to know about the must-have extensions for every developer.
1. Live Server
Live Server is an excellent VS Code extension that creates a live server locally on your computer. It is used to serve HTML files and help you develop websites quickly with a better developer experience.
It comes with a live browser reload, so every time you make changes to your HTML file and save it, it reflects on the server instantly. Live Server has been installed more than 30 million times to date in VS Code.
2. Markdown Preview GitHub Styling
Markdown Preview GitHub Styling is an extension that enables GitHub themes for markdown files inside VS Code. With this extension, you can preview your markdown files in the same way as they will appear in GitHub.
This extension has been installed more than 950 thousand times to date in VS Code.
3. Prettier
Prettier is an opinionated code formatter that helps you establish a consistent pattern in your code. It supports HTML, CSS, JavaScript, React, Angular, TypeScript, and many other languages and frameworks.
Prettier has been installed more than 28 million times to date in VS Code.
4. Auto Rename Tag
Auto Rename Tag is a really useful extension for web developers. When it is installed, every time you rename a tag, the complimentary opening/closing tag is renamed by itself to match the new tag name.
VS Code now supports this feature natively but it works only for HTML files. So this extension is still very useful for other libraries and frameworks. Auto Rename Tag has been installed more than 12 million times to date in VS Code.
5. CSS Peek
CSS Peek is a VS Code extension that allows you to peek into your CSS code right from the HTML file. CSS Peek turns the classes and IDs into hyperlinks so that every time you are coding in HTML, you can hover over the classes and IDs to preview the CSS properties assigned to them or visit the CSS file directly.
CSS Peek has been installed more than 3.8 million times to date in VS Code.
6. Tabnine
Tabnine is an AI assistant for developers to help them code fast with AI-generated code suggestions. With Tabnine, you get real-time suggestions that help you reduce the number of lines you have to write manually and save you a huge chunk of time.
Tabnine has been installed more than 4.8 million times to date in VS Code.
7. GitLens
GitLens is a powerful VS Code extension to better manage Git inside VS Code. GitLens unlocks amazing features like Commits view, Commits Details view, Authorship, Git Command Palette, etc. inside VS Code to skyrocket your productivity.
GitLens has been installed more than 20 million times to date in VS Code.
8. ES7+ React/Redux/React-Native snippets
ES7+ React/Redux/React-Native snippets is one of the best VS Code extensions for the React and React Native snippets. Once installed, you can generate snippets with short commands.
For instance, the command rfce will generate a snippet for a React functional component and export it. There are many more useful commands to ease your development process.
This extension has been installed more than 7.2 million times to date in VS Code.
9. Code Spell Checker
Code Spell Checker, as the name says, is a spell-checking extension for VS Code. Humans are prone to errors. Whenever you are coding, there's a great chance you will make spelling mistakes.
This extension helps in such a situation by highlighting the incorrect text. It also gives you the option to add spelling to the global or local dictionary.
Code Spell Checker has been installed more than 7.2 million times to date.
10. Turbo Console Log
Turbo Console Log is an excellent VS Code extension that automates the task of writing meaningful console.log statements. If you are a web developer, you know how essential console logs are in the debugging process.
With Turbo Console Log, you don’t have to add them manually everywhere to test and debug the code.
This extension has been installed more than 860K times to date.
11. ChatGPT - Easy Code
ChatGPT by Easy Code is a VS Code extension that allows you to use GPT 3.5 and GPT 4 inside VS Code window. You can ask GPT to write code, tests, refactor code and do the other stuff which you would use GPT for.
It also gives you the option to index the codebase and ask contextual questions about your codebase with the Ask Codebase feature. The best part of using this extension is that you don't need to create an account to start using it.
ChatGPT - Easy Code has been installed by more than 230K times to date.
12. Colorize
Colorize is a CSS color visualizer extension for VS Code.
Once the extension is installed and active, it automatically generates a color background for the colors defined inside your style files. In real development work, this extension is really helpful as it avoids the constant back and forth between code files and color visualizer.
Colorize has been installed more than 700K times to date.
13. Relative Path
Once your project becomes large, finding the correct path and importing files becomes very tiring. Fortunately, we have Relative Path extension.
It helps you import files easily in less time. Once the extension is installed, type Ctrl + Shift + H and type the name of the file you want to import, and hit enter. Relative Path extension will now automatically add the relative path of the file you requested.
This extension has been installed roughly 250K times to date.
14. IntelliCode
IntelliCode is an AI-based IntelliSense for JavaScript, TypeScript, Python, Java, and T-SQL. What sets it apart is its ability to understand the context of your code and giving those completion items suggestions at the top that you are most likely to use next.
IntelliCode gains this contextual understanding by going through thousands of high open-source projects on GitHub and your own code.
IntelliCode has been installed more than 30 million times to date.
15. Better Comments
Writing good, human-friendly comments is an art that establishes proper communication between you and your team. Better Comments extension helps you to write such comments.
It allows you to categorize your annotations into TODOs, Highlights, and more and also supports tons of programming languages including all the popular ones.
Better Comments has been installed more than 5 million times to date.
16. Project Manager
Project Manager is an extension that allows you to quickly switch between multiple projects. You can do the same thing with a few keyboard commands, but this extension allows you to be far more quick.
Additionally, it gives you extra features like marking your favorite projects, organizing them using tags, etc.
This extension has been installed more than 3.5 million times to date.
17. Blackbox
Blackbox is an AI-based multifaceted extension that assists you while coding.
Its smart code suggestion feature gives you endless lines of code based on your comment. It also has a dedicated chat section for you to ask coding questions.
Additionally, with the Blackbox Code Search, you can get entire code snippets for your specific use cases.
Blackbox has been installed more than a million times to date.
18. SVG Previewer
VS Code, by default, shows you only the source code when you open an SVG file. SVG Previewer helps you change this setting and allows you to preview SVG files inside VS Code window.
With this extension installed, you can opt to view code + preview or preview only for the SVG files you open.
This extension has been installed more than 100K times to date.
19. Headwind
Headwind is a Tailwind CSS sorting assistant for VS Code. It enforces a specific order for your Tailwind Classes.
Every time you save the file, HeadWind will sort the Tailwind Classes and even remove the duplicated classes, in turn, saving you from lots of future hassle.
HeadWind has been installed more than 250K times to date.
READ MORE:
What’s a Rich Text element?
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
Static and dynamic content editing
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
How to customize formatting for each rich text
Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
