The thing that makes a mechanic good at what they do are the tools in their toolbox. The same goes for coding. A software developer is only as good as his or her tools. Using the right ones can make for a more efficient and more elegant coding process.
The preferred coding IDE, integrated development environment, is VScode, Visual Studio code. The best part about VScode is the vast number of extensions offered.
I will share with you a few of my favorites.
Note all of these are offered on Visual Studios MarketPlace
1. REST Client
This extension allows you to send an HTTP request and see the response in the IDE itself. You no longer need to use post man ;).
This extension alone has over 1,000,000 installs. Its extremely popular. Since Ive begun using this extension, my time between developing and waiting on postman has drastically fell.
Sending a request is really easy with this extension. The code is easy to read and plenty of options to change. One line of code and you can send a GET request!
2. Beautify
Like looking at clean code? Then this is for you. Beautify allows you to get your code clean and on point. It supports JS, HTML, CSS, SASS, and JSON.
The entire extension is fully customizable: ident size, end with new line, etc. Its also possible to customize by coding language.
This one has over 5,000,000 downloads.
3. Bracket Pair Colorizer
Tired of losing which pairs of [] , {} , or ()? Bracket Pair Colorize solves this for you! It gives each pair a specific color based on indention and placement in the nesting.
The colors are fully customizable and vary in range.
I have been using this since day one and this extension has really effected my code the most!
4. Auto Rename Tag
This extension does one very simple thing...that will change your life!
The extension automatically changes paired up HTML5 tags. Change an opening tag? Closed one: done!
This has saved me an EXTREME amount of time when coding!
5. Material Themes
I always found myself hating the default Visual Code Themes. Bright white? AH MY EYES! DARK? AH MY EYES x2!
With Material Themes you can customize the way your IDE looks. They offer a wide range of colors, and premade palettes. In fact, most palettes are also customizable.
The one I have been using since the install has been Palenight
Also checkout their icon theme: I use that also... icons
6. Javascript (ES6) Code Snippets
This extension has dozen of snippets you can use to generate es6 code. A list of commands can be found here.
This extension has saved me so much time. Rather than taking the extra seconds to type something like
arr.forEach(() => {})
I could simply do
fre
7. ES7 React/Redux/GraphQL/React-Native snippets
Typing out entire React components? Thing of the past!
This extension works similarly to the one listed above, but for react!
Instead of doing something like this
import React from 'react';
const Example = () => {
return (
)
}
export default example;
you can simple type
racfe
This will insert the typed out version. It uses the file name as the functional component name.
However! This is just one of the features of this extension, it can do many other shorthand inserts: check them out here
Top comments (15)
Another good one to add to the list is Vuln Cost - to understand the "vulnerability cost" your imports bring into your project created by dev.to/brianverm
You can find it the plugin here:
marketplace.visualstudio.com/items...
Thanks for the shout out Sharone 😊
Joining my colleagues here to suggest adding Vuln Cost for a friendly way of integrating security insights quick into VS Code: marketplace.visualstudio.com/items...
Great list of extensions Larry. I should probably move from an external POSTman for REST calls into VS Code indeed :-)
2 cent about auto rename tags.
stackoverflow.com/a/62314297
If you need to work with a remote team, try this extension we develop, CodeTogether. Yes, VS Code has Live Share, but if your colleagues use IntelliJ or Eclipse, or if you need a privately deployed solution on your intranet, that isn't an option.
Available here: marketplace.visualstudio.com/items...
Quick video: youtu.be/Cb6A49ylPnc
I've always wondered what the difference is between Prettier and Beautify.
I was searching for the same question on the web and found this:
"Prettier is opinionated and not dependant on IDE
Prettier does not support HTML, only JSX"
Seems coherent to me
Thanks!
Dont confuse people with Visual Studio and Visual Studio Code.
This is about vs code...title clearly says it😂 did I miss sometbing
Yes, you may want to change the Logo.
AH
Changed it lol
the hell is sunlight...darkness is the best :D
THE WHITE THEME KILLS MY EYES! Im not sure how you do it