Awesome VS Code extensions

Firdaus Jawed
3 min readSep 15, 2021

Visual Studio Code is one of the most popular code editors out there. It’s free, it has a clean interface, and it has countless extensions which make programming easier and more fun. VS Code extensions are essential in modern web development. They are basically a source code editor for building modern web applications. It is a free and open-source editor. Furthermore, It supports a huge number of extensions that can be used for web app development.

1. Live Server

This is one of my favorite extensions. Live Server launches a local development server with a live reload feature both for static and dynamic pages. Normally, when you make a change in your code or write something new, you need to refresh the page manually to see the changes.

2. Prettier

Prettier is an opinionated code formatter that works particularly well if you have multiple people working on a single project, because the extension enforces a consistent style. It 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.

You can set it up so it formats your code every time you save it, significantly reducing the amount of time you need to spend formatting your code.

3.Auto Rename Tag

Clearly from the name Auto Rename Tag automatically renames tags that you change. The extension works for HTML, XML, PHP, and JavaScript, and removes the need to change your tag names twice, which increase your working efficiency and decrease the error in code.

4. Code Runner

Code Runner is a run code snippet or code file for multiple languages. It is useful to run the code file of the currently active text editor, through the context menu of file explorer. Also, you can run selected code snippets in the text editor. It supports REPL by running code in Integrated terminal.

5.Icon Fonts

Icon Fonts offers snippets for a variety of icon fonts, including the popular Font Awesome v5 icon pack.

This package is also available for Atom and Sublime Text.

6.JavaScript Code Snippets

While VS Code includes built-in JS IntelliSense, JS Code Snippets enhances that experience by adding a slew of import/export triggers, class helpers, and method triggers.

The extension supports JS, TypeScript, JS React, TS React, HTML, and Vue. In the VS Code Marketplace, code snippets for other flavors, such as Angular, are also readily available.

This extension contains code snippets for JavaScript in ES6 syntax for Vs Code editor (supports both JavaScript and TypeScript).

7.Code Spell Checker

Although it isn’t life-threateningly important, I prefer my code to have no spelling errors. Code Spell Checker underlines words that it doesn’t recognize in its dictionary files.

The extension is available in many different languages and supports jargon such as medical terms.

8.GitLens

GITLENS simply helps you better understand code. Quickly glimpse into whom, why, and when a line or code block was changed. Besides, it let you explore the history and evolution of a codebase effortlessly.

GitLens supercharges the Git capabilities built into Visual Studio Code. It also helps you to 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.

9.Git History

Similar to GitLens, Git History is a VS Code extension that gives a visual of the git log. No longer should you look through git log in the terminal.

The extension is quite comprehensive as well. It allows you to compare branches, commits, and files across commits. You can also look up Github avatars, which is quite neat.

10.ESLint

ESLint statically analyzes your code to quickly find problems. ESLint statically analyzes your code to quickly find problems. It is built into most text editors and you can run ESLint as part of your continuous integration pipeline. ESLint fixes are syntax-aware so you won’t experience errors introduced by traditional find-and-replace algorithms.

Hope this will help you in fast and effective coding😄.

Happy Coding!!

--

--

Firdaus Jawed

Final year student at National Institute of technology Patna || Guardian @ Leetcode(2222) || competitive programmer