Tools are helpers that makes our life as developers very productive. A lot of developers have different tools installed on their work gadgets and these tools are to make their life easier and to get tasks done in a very short time.
Visual Studio Code is an IDE developers use to write codes and it can be used across different platforms. Visual Studio Code is an IDE that you can use for different languages and frameworks and one very helpful thing is that you can install different extensions that makes writing code less stressful. I call these extensions helpers because it has really helped me in my coding journey.
In this article I will be sharing the extensions I use as a Frontend Developer that uses JavaScript and React and these extensions has really helped me and made me very productive.
My 9 Favorite VS Code Extensions
- Live Server
- ES7 React / Redux / GraphQL / React-Native Snippets
- GitLens - Git supercharged
- Prettier - Code Formatter
- Bracket Pair Colorizer
- Live Sass Compiler
- Night Owl
- File Icons
- Emoji
I have my reasons for choosing these 9 extensions as my favorite extensions and my reasons for picking these 9 will be explained below.
Live Server
This is a very important extension especially for a Frontend Developer like me, with this extension you just need to start the server once then it gets updated in the browser immediately you save your work, so you can just split your vs code workspace and browser while working so that you can see the changes made and it makes work easier. You will see a short clip that explains this further below.
Also there are several methods of starting the live server depending on when you want to use it and In case you don't have any .html or .htm file in your workspace then you have to follow method no 4 & 5 to start server. The several methods are;
Open a project and click to Go Live from the status bar to turn the server on/off.
Right click on a HTML file from Explorer Window and click on Open with Live Server.
Open a HTML file and right-click on the editor and click on Open with Live Server.
Hit (alt+L, alt+O) to Open the Server and (alt+L, alt+C) to Stop the server (You can change the shortcut form keybinding). [On MAC, cmd+L, cmd+O and cmd+L, cmd+C].
Open the Command Pallete by pressing F1 or ctrl+shift+P and type Live Server: Open With Live Server to start a server or type Live Server: Stop Live Server to stop a server.
With Live Server no stress of restarting my server for changes to be effected, just with ctrl + s my changes will be made on the browser.
ES7 React / Redux / GraphQL / React-Native Snippets
I am a Frontend Developer that uses a JavaScript Framework called React and this extension is a blessing to React Developers because it reduces the stress of writing several lines of codes by just using short cut keywords.
Imagine I want to create a Functional Component that uses arrow function and I want it to export the component at default. I just need to write rafce and it gives me a React Functional Component and exporting the component at default. There are a lot of other things you can do with it like importing of compnents, modules, using proptypes and many more...
// rafce
import React from 'react'
const $1 = () => {
return <div>$0</div>
}
export default $1
// rce
import React, { Component } from 'react'
export class FileName extends Component {
render() {
return <div>$2</div>
}
}
export default $1
// rafcp
import React from 'react'
import PropTypes from 'prop-types'
const $1 = (props) => {
return <div>$0</div>
}
$1.propTypes = {}
export default $1
Imagine just writing 4 words and it generates like 7 lines of code. It is amazing and I would advise you check it out as a React Developer😚
GitLens - Git supercharged
This is another powerful extension and it helps you better understand code. Quickly glimpse into whom, why, and when a line or code block was changed. Jump back through history to gain further insights as to how and why the code evolved. Effortlessly explore the history and evolution of a codebase.
You can also configure it to suit your needs, some developers might find those history feature distracting so you have the right to turn it off.
This extension makes collaboration on a project easier and any of the contributors will see and understand what others have done. Infact it shows their name, time they made a commit and more details.
There are more in depth features and benefits of using this extension, I would advise you check it out😚.
Prettier - Code Formatter
I am a developer that loves a well organized code and because of this I went for Prettier because 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. It makes you fall in love with your code.
It even gives you chance to pick if it should format it on save, on paste and I prefer all options. Immediately I do ctrl + s my code is formatted and it aligns well in a way that anybody can read and understand my code.
It is very nice and I will suggest that you check it out if you have not been using it and I promise you that you will testify to it😚.
Bracket Pair Colorizer
Bracket Pair Colorizer allows matching brackets to be identified with colors. The user can define which characters to match, and which colors to use.
You can have nested codes that will have similar brackets and this can get confusing but Bracket Pair Colorizer gives it different colors and this makes it easier to identify the brackets for every line of code.
It can also be customized to suit the way you want it. I will also suggest that you check it out if you have not been using it and I promise you that you will love it😚.
Live Sass Compiler
Sass is a CSS Pre-processor that makes you write CSS in a way where you can add some logic to your CSS but the browsers does not understand Sass so all your styles written with Sass will be compiled to raw CSS that the browser can understand and apply it. It is so stressful trying to configure from scratch on how to compile your Sass to CSS but Live Sass Compiler is a solution to this.
After installing the extension there are different usage shortcut and they are;
- Click to Watch Sass from Statusbar to turn on the live compilation and then click to Stop Watching Sass from Statusbar to turn on live compilation .
Press F1 or ctrl+shift+P and type Live Sass: Watch Sass to start live compilation or, type Live Sass: Stop Watching Sass to stop a live compilation.
Press F1 or ctrl+shift+P and type Live Sass: Compile Sass - Without Watch Mode to compile Sass or Scss for one time.
When using this extension you don't need to think of how your Sass code will be compiled to CSS, it does the thinking and execution for you and you can even customize the location of your compiled CSS file and it also depends on Live Server for automatic reload.
Night Owl
I just started using this extension like a month ago and I really love it because I am a Developer that works at night and to prevent my light from getting damaged by my PC light I use this extension.
One Importance of this extension to me is the prevention of eye damage, It is better than the dark mode version of VS Code and to see a screenshot of how it looks check the image below;
File Icons
This is not really necessary but I love it because if I am writing a JavaScript Code the name of the file carries a customized js icon and it is better than the default file icon vs code gives.
It is very easy to use, just install this extension and any file you create it get a customized icon of the language.
Emoji
This is also a very nice extension that I use when I need emoji in my website and with just an extension I can just use any emoji I like at anytime. It is cool and I will suggest you check it out also😚.
Conclusion
These are not the best extensions ever and I believe every developer have their own preferred extension based on the language and what they develop. The above listed extensions are what I use most times and it has really made life easier and I have been very productive using them. Thanks for reading through and I hope that they will make you very productive too and you can also share your favorite VS Code Extensions and I will check them out 😘😘