10 VS Code Extensions for FrontEnd Developers in 2019
Some of the best VS Code extensions you should check out as a frontend developer this year…
Introduction
Visual Studio Code, arguably the best Code Editor to use in 2018 (In case you are not convinced, take a quick look at this) 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.
Tip: Use Bit to reuse components and build faster! Easily organize and use your components to build more apps with your team. Give it a try.
Good News for Frontend Developers
This article is for every developer but mostly for the ones that work with markup language, style sheets and Javascript and its numerous frameworks. There has been a boom of submissions of really intresting VS Code Extensions to help for efficient and easier frontend development.(this also shows how the community supports VS Code). In this article I would briefly highlight 10 must-have VS Code Extensions this 2018 so you can pimp up your IDE.
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 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.
Live Sass Compiler
This extension by Ritwick Dey compiles your scss files into css files just as swiftly and as real-time as node-sass. With a watch-my-sass button at the task bar it can show a real-time preview of the compiled styles in your preferred browser, also with the Live Reload feature.
Javascript Code Snippets
This extension by Charalampos Karypidis with more than 2million downloads and counting provides javascript code snippets in ECMAscript 6 syntax while using a javascript files and other files like Typescript, Javascript React, Typescript React.
NPM
This is the official Node Package Manager support on VS Code. It helps in to manage the package.json file in every imaginable way. It flags warnings for dependencies that are defined but not installed, or the ones that are installed but not defined in the package.json, it also indicates discrepancies in version control of packages. It also provides for quick run of npm commands with easy shortcuts.
ESLint
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.
Prettier
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 (which is also available on the marketplace)
CSS Peek
This really helpful extension by Pranay Prakash helps us when working with markup language class strings and IDs by identifying and enumerating the different styles already applied to the said element. This is very helpful as it saves us a lot of time going back and forth html and css files and also comes in handy for developers that do not enjoy having split screens.
Angular 6 snippets
This is the official Angular 6 snippets extension for VS Code. It follows the Angular style guide and helps to make working with Angular a whole lot easier. It has code predictability features coupled with auto-complete functionality compatible with the new version 6. It has support for typescript, service workers, RxJS, ngRx and even Angular Material, If you use Angular and do not already have this, you should really consider getting it.
Vetur
This is the official Vue js extension on VS Code. With an impressive 5 million downloads, Vetur has been here to help in making Vue js development easier. It has error-checking capabilities , code auto-completion feature and also has support for providing snippets. Vue developers also get latest updates on meetups and conferences here, its really that cool.
Debugger for Chrome
This is Chrome’s official debugger extension for VS Code. Currently one of the most used extension on the VS Code marketplace. It helps you debug your js files running in your chrome browser straight from VS Code, how cool is that? It has a host of dedicated contributors and goes a long way to make things very easy for a frontend developer.
How do I get these extensions?
- First, download VS Code here if you do not already have it, check out amazing things that you can do with VS Code.
- Then, just use the search bar on the extension tab to search for the extension of your choice.
Conclusion
These are just a few extensions out of thousands and thousands of more, there are a whole lot more and these are not necessary the best, but most of them are must-haves for frontend web developers. Let me know what your favorite VS Code extensions are down in the comments! :)
