The Top 3 Virtual Studio Code Extensions for Building a Web App for Beginners
Do you find yourself wondering — “with today’s tech, there must be a better a faster way to do this..”?
With these 3 Virtual Studio Code (VS Code) extensions, you’ll be one step closer to becoming a Devloping Wizard.
What do I need before I start?
If you’re new to VS Code and are just starting to make web applications in Rails or another language, welcome!
Also if you are reading this, I imagine you have already installed VS Code but if not, you may do so here:
The Marketplace
VS Code offers a lot of different extensions to make your life easier when working on any project. You’re able to view this marketplace by clicking on the “four-box” icon on the left hand side of your screen when opening VS Code:
You are also able to access it by visiting: https://marketplace.visualstudio.com/
Now that you’ve reached this point, let’s discuss the must-have extensions for VS code when building a web-based application.
Before you get started building the next web app of the future, you’ll need to think through how you plan to build out your application, along with the associations. Your ERD!
Luckily for you, there’s an integration now with Draw.io which allows you to do just this right from VS Code. This extension has a lot of different functionality linking your diagrams directly to your code and also associations with XML files if you’re interested in editing both at the same time.
Oh, and I can’t forget…You can collaborate in a group and build out the wireframes remotely with others. 220,000 downloads and counting…Check it out here
The Browser Preview allows you to open a real-time browser within your VS code. This is great practice to see in real time while your coding, the changes that are happening in your local browser. Perfect for debugging or if you’re working on your layouts in HTML/CSS. I’ve found this to be a true necessity when building a web app. Check it out here
3. Live Share
Many developers are aware of this amazing extension already, but for those just starting off not too long ago like myself — it was a complete game changer.
Live Share is an extension created by Microsoft which enables users to collaborate together on a project. This is an absolute must for any group coding sessions you may have at work or in class.
One user is able to host the Live Share session, while the other joins their private server all of which is done directly in VS Code. Hosts can allow participants to access multiple terminals, write code (of course) and even create/delete new files within your project directory.
Switching between “driving” and “navigating” has never been easier. If you are currently paired with someone on a project or perhaps want to collaborate with multiple people on a product, Live Share is the way to go. Check it out here
There are many other extensions that could could be mentioned here. I personally have found these to be the most useful in my web development journey thus far. But would love suggestions for any new developers using VS Code.
What are some of your favorite VS Code extensions to use with Rails? Leave a response below!
