20+ Awesome VS Code Extensions You Should Consider Using
Davis Gitonga / March 08, 2021
5 min read •
Photo by Ferenc Almasi
Visual Studio Code is one of the most popular code editors for building and debugging modern web and cloud applications.
Besides being open source and completely free of charge, it boasts a massive library of plugins that I find useful in terms of productivity, customization and developer experience.
Below is a list of favorite VS Code extensions that give me a productivity boost.
Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.
GitLens supercharges the Git capabilities built into VSCode. It helps you visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more.
Import cost is a handy tool that will show you the size of the third-party packages that you import in your file. The information appears when you import a package and will help you identify obvious issues with your bundle size.
IntelliSense for CSS class names in HTML
A VSCode extension that provides CSS class name completion for the HTML class attribute based on the definitions found in your workspace or external files referenced through the link element.
A VSCode plugin that autocompletes filenames.
Tailwind CSS IntelliSense
Tailwind CSS IntelliSense enhances the Tailwind development experience by providing VSCode users with advanced features such as autocomplete, syntax highlighting, and linting.
Visual Studio IntelliCode
This extension provides AI-assisted IntelliSense by showing recommended completion items for your code context at the top of the completions list. The example below shows this in action for Python code.
Auto Close Tag
This simple extension automatically adds HTML/XML close tag.
This extension automatically finds, parses and provides code actions and code completion for all available imports.
Auto Rename Tag
Automatically rename paired HTML/XML tag
Tabnine is a powerful Artificial Intelligence assistant designed to help you code faster, reduce mistakes, and discover best coding practices - without ever leaving the comfort of VSCode.
Emoji Snippets help developers to insert emoji on their files. You can use these emoji in PHP,HTML,JS,CSS,React and more!!! 😎
ES7 React/Redux/GraphQL/React-Native snippets
Bracket Pair Colorizer
This extension allows matching brackets to be identified with colours. The user can define which characters to match, and which colours to use.
This extension highlights and styles css/web colors found in your document.
A simple extension to make indentation more readable.
This extension shows an image preview in the gutter and on hover.
Highlight TODO, FIXME and other annotations or keywords within your code.
Allow peeking to css ID and class strings as definitions from html files to respective CSS. Supports
Go To Symbol in Workspace and
Go To Definition.
Emoji-Log — An Emoji Git commit log messages spec standard. [ 📦👌🐛📖🚀🤖 ‼️ ]
Live Sass Compiler
A VSCode extension that helps you compile/transpile your SASS/SCSS files to CSS files in realtime with live browser reload.
Launch a development local server with live reload feature for static & dynamic pages.
Turbo Console Log
This extension makes debugging much easier by automating the operation of writing meaningful log messages with a keyboard shortcut.
Markdown Preview Enhanced
Markdown Preview Enhanced is a SUPER POWERFUL markdown extension for Visual Studio Code that brings you a wonderful markdown writing experience.