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.
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.
