If you’re a front-end developer looking to enhance your current workflow then this post is for you. Today I’m sharing my top 10 VSCode extensions to help you increase your developer productivity in 2020.
Extension 1: Prettier
Prettier is undoubtedly my favourite extension that I have installed this year by far. In a nutshell Prettier is a code formatting tool that will scan your current document to ensure that your code conforms to a consistent style. It supports all major file formats including JavaScript, HTML, JSON, CSS. This saves you a mammoth amount of time going back and forth to indent any code you may have missed.
To use Prettier simply right click on your current open file and click Format Document or ALT + SHIFT + F on Mac & Windows.
Download Link: Prettier
Extension 2: Live Server
Live Server does pretty much what it says on the tin, opens a live web server of the current project that you are working on. Most of the time when using a module builder such as webpack this is taken care for you by webpack-dev-server however Live Server has proved itself useful when just testing out basic code in say a new HTML file. Simply right click and run Open With Live Server and this will automatically spin up a localhost instance in your default browser.
Download Link: Live Server
Extension 3: Emmet
I have been using Emmet for years now and to describe it in one word would be AWESOME. If you have never used Emmet before it will vastly improve your speed of writing HTML & CSS with the use of various dynamic snippets. After using Emmet for a while you will wonder how you ever wrote code without it.
Download Link: Emmet Also: Cheet Sheet
Extension 4: Debugger For Chrome
If you are working with JavaScript every day like most front end developers Debugger For Chrome is a great way to add breakpoints,access the console and step through code directly within your code editor. This saves you precious time having to go back and forth with the browser and your text editor. Thats if your not lucky enough to have two monitors. 😉
Download Link: Debugger For Chrome
Extension 5: VSCode Icons
Okay so this one is pretty cosmetic, but lets face it you spend most of your day staring at a text editor so you might as well make it look as good as possible. VSCode Icons applies real file icons instead of just using the standard out of the box VSCode display. If you work on the front-end you like things to look good right?
Download Link: VSCode Icons
Extension 6: GitLens
Another great extension that I use almost every day is GitLens. It essentially supercharges the current VSCode Git capabilities with the ability to perform side by side code comparison with previous commits along with various other awesome features.
Download Link: GitLens
Extension 7: Color Picker
Color Picker is a great way to easily select colors within a CSS file and immediately apply them to the property your working on. Beats always using background-color: #BADA55; (Badass) and comes in especially useful when working with RGBA colors.
Download Link: Color Picker
Extension 8: ES7, React, Redux & GraphQL Snippets
Working with React is fantastic however typing the same code over and over again becomes tedious. React Snippets extension allows you to easily create class based components, functional components, imports, lifecycle methods and much more with ease. Highly recommended.
Download Link: ES7, React, Redux & GraphQL Snippets
Extension 9: REST Client
When working with third party or even internal API’s it’s always useful to be able to make a HTTP request with ease. The REST client allows you to easily call an endpoint directly within your code editor. Saves you time instead of having to fire up the browser or client such as PostMan to make a request.
Download Link: REST Client
Extension 10: IntelliSense For CSS
My last but not least extension for VSCode is IntelliSense for CSS. This extension will turbo charge your ability to add class names to your HTML elements. It automatically reads in the CSS file via the link element that you include at the top. Its a great tool and will save you time not writing class names out manually.
Download Link: IntelliSense for CSS
I believe that taking the time to ensure you have a development environment that is fast and easy to use is essential to any web developer. It allows you to save time and overall be more productive doing the fun stuff… coding!
I hope that this post helped to direct you to some of the best plugins out there for VSCode.