VS Code must have plugins and extensions for Frontend Developers | November 2018

VS Code extensions - must have

Introduction

Visual Studio Code (VS Code) is arguably the best Code Editor to use in 2018. It has a whole bunch of extensions which can be downloaded and installed from the VS Code Market Place. There are extensions for debugging code, formatting code, keymaps, development technologies, IDE themes, code linters, code snippets, and many other categories. In this article we are going through some of the extensions you need to have in your arsenal if you are a Frontend Developer.

IntelliSense for CSS class names in HTML:

This extension does one simple Job, scan your current workspace looking for CSS Classes and then provide auto-completion for the same classes inside your HTML templates. Doesn’t matter whether the classes are library classes like Bootstrap or your own custom classes, this extension will find them and provide auto-completion for them under the class attribute of your HTML elements. It is simple, neat and works out of the box. You can learn more about this extension here.

Debuggers for Chrome, Firefox, and Edge:

If you are a web developer, you obviously need a browser to test your functionality. These are three extensions that basically do the same thing but on different browsers. They enable you to test your application functionality. The neat trick is that debug information is sent directly back to visual studio code console instead of the browser’s console. On top of that, you can add breakpoints to your code, and step through the execution of your code. These are important tools to allow you to test your app compatibility with multiple browsers.

You can find more details about the extensions in the links below:

Google Chrome (Debugger for Google Chrome)

Mozilla FireFox (Debugger for Mozilla Firefox)

Microsoft Edge (Debugger for Edge)

debugger

TSLint Extension (Typescript Lint):

This extension integrates TSLint into VSCode. TSLint is an extensible static analysis tool that checks TypeScript code for readability, maintainability, functionality and syntax errors. This extension brings all this goodness to VSCode. For more information about TSLint, visit the official Github repo here.

The extension also provides some important VSCode commands such as Auto-Fixing of problems highlighted by TSLint among others. You can learn more about this extension here.

TSLint - VS Code

ESLint Extension (JavaScript Lint):

Here is for all the linting for your Javascript and jsx. ESLint is TSLint equivalent for JavaScript. Similar to TSLint, ESLint is an extensible static analysis tool that checks JavaScript code for readability, maintainability, functionality and syntax errors. 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. You can get more details about this extension here.

ESLint - VS Code

Prettier – Code Formatter:

Every developer wants their code to look clean, organized and be consistently formatted. Clean, organized and consistent code makes it easy to read and follow and even prettier to look at. That’s the goal of this extension.

This extension also comes with a host of configuration options such as where to add a line break, format on save/paste or type, whether to automatically add semicolons at the end of a statement etc. It works well with JavaScript/TypeScript and CSS. For HTML, VSCode seems to do a fine job on its own – no extension required. You can learn more about this extension here.

Prettier - Code Formatter - VS Code

Beautify:

Beautify is a very popular alternative extension for ‘Prettier – Code Formatter’. Beautify supports code formatting for javascript, JSON, CSS, Sass, and HTML in Visual Studio Code. I personally prefer Beautify over Prettier – Code Formatter. You can get more details about this extension here.

Beautify - VS Code

NPM:

Another very simple extension that I find extremely useful. In your package.json file, if you select or hover on a package version number, it will automatically pull the latest version of the package from NPM. This gives you an option to easily know whether you are using the latest version of an NPM package.

That’s what I use it for mainly, but it can do more than that. The extension will validate your package.json file for errors, quickly run NPM scripts and stop a running script. For those of you who use yarn, some of the features may be unavailable. You can learn more about this extension here.

GitLens — Git supercharged:

At the time of writing this article, this extension has close to 9 million downloads on VS Code marketplace. You get the idea! It’s a go-to extension when it comes for version control for most developers using VS Code.

GitLens supercharges the Git capabilities built into Visual Studio Code. It 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. You can learn more about this plugin here.

Gitlens - Vs Code

Path Intellisense:

This is a simple yet useful extension whose goal is to provide filename Intellisense inside your code. It relies on the TsConfig Base URL to map the root of your project. It enables you to navigate through your directories in your project until you get to the file you want. There isn’t much to say about this extension considering the name is quite self-explanatory.  You can learn more about this plugin here.

Live Server:

This cool extension by Ritwick Dey creates a development local server for your static and dynamic pages. A go-live button appears on your taskbar 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. Know more about this extension here.

Live Server

Conclusion

Those are some of the VSCode extensions I use to improve my Web Development Workflow. If I missed any extension from this post, or you know of any awesome extension not covered in this article, please let me know in the comment below and I will be happy to add it to this list. Thank you for getting this far, don’t forget to share if you found this helpful.

Subscribe to our Newsletter to get more such cool articles straight into your Mailbox,

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.