I don’t have to tell you that “VSCode” is THE code editor for web technologies. My personal favorite UI framework is ReactJS.
I will get to it right away, my current configuration/extensions of VSCode is as below:
- Utilities
- PlantUML
- Rest Client
- Swagger Viewer
- Auto Rename Tag
- Encode and Decode
- Live Server
- Formatting
- Prettier
- colorize
- TODO Highlight
- YAML
- Themes
- Dracula Official
- Shades of Purple
- Winter is Coming
Most of these are very well known extensions but I will try to give my view on each of them as to how they have helped me to be more productive.
PlantUML
For me, we have been using plantUML as the UML diagram language. While PlantUML is already widely used, it gave me high benefit to document UML diagrams locally for a specific project – API, UI or adhoc and then upload the same to confluence which also has PlantUML Macro. The experience has been amazing. It has syntax highlighting which makes it even more user friendly.
A must have for designer, solution architect and developers.
Rest Client
Following the text based sequence diagram language, I am a fan for Rest Client extension. This helps me to define a simple file to document all API and get a feel of the response. REST Client supports many configuration from environment to variables to theming.
A must have for UI and API developers.
Swagger Viewer
This is quite straight forward and gives you a viewer for your swagger files. A quick and handy tool to have for API developers. Best part is that you can try your APIs from the viewer itself.
Auto Rename Tag & Encode/Decode
These two utilities have helped me to code faster. Auto Rename Tag will just replace the other end of HTML tag by just changing one. I know its small – but trust me – it improves your productivity. Encode/Decode lets you to handle transformation between Base64, JSON Byte Array, XML, MD5 and Unicode. This comes in very handy when checking values for development.
Live Server
Probably the most downloaded extension. We all love hot reload so this just gives the functionality to a standalone HTML project not using any framework like ReactJS…
Formatting
As you can see, the downloads of these extensions is rocketing, these gives you a much needed user experience. My personal view is – it lets you read the code faster. My personal favorite is colorize since it lets you highlight all CSS colors with the actual color and that too in any type of CSS files. TODO Highlight lets to highlight “TODO” in your file – making it easier to scan and do work better and faster.
Themes
While theming is very personal, but I think these themes works very well with the UI and API development. I personally configure “Fira Code” as font with these themes and it just look so neat.
Well, this sums it all for me. I keep it clean, simple and fast. Please let me know you favourites of your VSCode customisations in the comemnts.