10 VS Code Extensions for FrontEnd Engineer

Visual Studio Code, has a whole lot of extensions, they come with a kind of Extension-store (just like App store for your apps) called Market Place. There are extensions for debugging code, formatting code, key maps, development technologies (like heroku, github, docker, azure), IDE themes, code linters, code snippets and many other categories.

In this article I would highlight 10 must-have VS Code Extensions this 2020.

1️⃣ Turbo Console Log 🔥

turbo console vs code plugin

This extension make debugging much easier by automating the operation of writing meaningful log message.

2. Quokka 🔥

quokka vs code plugin

This extension is used for testing JavaScript code in the Visual Studio Code editor itself instead of checking it out in the browser console. You can find the detailed information regarding this extension in the following link.

3. Prettier 🔥

prettier vs code plugin

This very popular extension by Esben Petersen. It currently boasts of having almost 4 million downloads. It helps format Javascript code, colors keywords to make your code easily readable. There are similar extensions and one of the popular ones is beautify.

4. Live Server 🔥

liveshare vs code plugin

This cool extension by Ritwick Dey creates a development local server for your static and dynamic pages. A go-live button appears on your task bar so you can seamlessly run your code as a development server. It also comes with a shiny feature: Live Reload which reloads the page as soon as you save your work. Pretty awesome.

5. GitLens 🔥

git lens vs code plugin

This extension is used for getting information from a Git source that can be edited in the VS environment. Commit logs, file history, and more from the Git repository files can be viewed inside the VS code itself, and that saves time, too.

6. Polacode 🔥

polacode vs code plugin

This extension is used for taking code snippet screenshots. It can be used to copy and paste the code you need in snippet screenshots easily and save them after installing the extension. You can find the detailed information regarding the extension in the following link.

7. vscode-icons 🔥

vs code icons vs code plugin

This extension is used for bring icons to your Visual Studio Code.

8. Open in browser 🔥

open in browser vs code plugin

You can open any type of file with the default program, not only html file.

9. eslint 🔥

eslint vs code plugin

Here is for all the linting for your Javascript and jsx. Plug-able and makes sure you stick to standard practices like indentation and positioning and many more. It is one of the most downloaded extensions in VS Code with almost 12 million downloads.

10. Markdown preview enhanced 🔥

markdown preview vs code plugin

Markdown Preview Enhanced is an extension that provides you with many useful functionalities such as automatic scroll sync, math typesetting, mermaid, PlantUML, pandoc, PDF export, code chunk, presentation writer, etc. A lot of its ideas are inspired by Markdown Preview Plus and RStudio Markdown.

Thanks for reading this article ❤️

I hope you will find this article useful 🤩