Improve Your VSC With My Top 7 Extensions
My story begins 6 months ago when I decided to begin a new journey as a full stack web developer at UC Berkley Extension.
Before I started my journey as a full stack web developer I received a small pre-workout that supposed to prepare me to the course. The pre-workout include sections , like what is HTML , CSS and JS and many other sections . One of the sections was the new technologies that I am going to use during my course as Slack, Git bash and others technologies. One of the technologies was VSC — visual studio code .
VSC is a free source code editor that help us to write our code . There are other code editors but this is one that I was working with and I also recommend for new web developers.
In this article I want to share my top 7 extensions that I was using during my course that made my coding skills easier, faster and better. Before I share my extensions I want to show where you can install the extensions via VSC.
Instructions to set your extensions:
Open the tag where it says Extensions, after opening the tag you will have an input field where you can type for any extension that can help you improve your coding skills.
Top 7 Extensions :
- open in browser :
When you are building your first HTML page even the basic one , you want to be able to see what you have wrote on in your web. This feature can help you and open your code with chrome or other browsers that your are using .
2. One Dark Pro :
You can choose to work with very cool theme inside your editor. VSC editor comes with default theme, if you want to check which themes are exists you can search — visual studio color theme you will find a link to VSC docs and there you will get examples of some build in colors themes. The one that I am using is One Dark Pro , it’ s makes you a pro 😎.
3. Auto Rename Tag :
As you know HTML element tags are build with 2 elements , opening tag and closing tag. Imagin that you wrote like more than 50 lines of HTML syntax and now you need to change syntax of one of your elements. By default you will change opening tag and then closing tag, this extension can help you to change the opening tag and the closing tag simultaneously and avoid bugs in your code.
4. Bracket Pair Colorizer :
As you continue to move forward as a web developer and the complexity of the code becoming more and more harder to read , for example when you working with Promises (this is one small example) , this feature can make your code more readable , understandable , cleaner and if need to find bugs . Why? because it helps you to identify each scope and each parenthesis with different colors.
5. Live server :
Purpose of this feature is to be able to update your HTML file (or your client side) every time your are making changes inside your code and then you saved the changes. The default way is to open the HTML file with our extension open in browser and if you want to make changes in your code and then to see how this changes are improving your HTML page you need to close and then open again the file , this extension help you to save time on opening and closing files each time that you are making any changes inside your code.
6. Live Share :
When working on a team , more than 2 developers you want to be able to share your code and make changes together as a team on one file. The way to make it happen is through the VSC extension-> Live Share can help you and your team to make changes quicker , cleaner and of course fixing bugs in more efficient way as a team .
7. ES7 React/Redux/GraphQL/React-Native snippets :
Build in snippet codes for ES7 React/Redux/GraphQL/React-Native snippets, I was using this feature in all my React project that I build during my course. One of the most used snippets was rfce , but of course there is more.
****More info about extensions and everything else you can find in VSC docs.
Conclusion :
I wanted to share my extensions that helped me during my course .This extensions is just my preference I’m sure that each developer has his own tools and his own extensions that helped him/her as new web developers .
As someone that started 6 months ago as full stack developer using VSC knows that this extensions helped me to become more efficient at coding and I hoped after reading this short and very brief article about VSC extension it will helped you in your new journey as web developers !
