Self-Taught Developer: How To Code Like A Pro 2/5–10 VSCode Extensions
Use this as your guide and reference as you start your Web Development journey.
Don’t forget to read first the Part 1/5 Self-Taught Developer: How To Code Like A Pro 1/5–Best 5 Code Editors
Before you even start, make sure to download and set up a Code Editor, this will be the tool you can use to write code.
Sublime Text was widely use before VSCode but when VSCode came up and took the heart of every developer not just because of its nicely-look Interface but also because of its thousands of extensions or tools to choose that makes coding more efficient, easier, and more powerful. The most popular and also my recommendation would be VSCode.
These extensions are not just for having a good interface but will boost up your productivity and will save your life in the future, you wouldn’t want to spend your entire day looking for that missing bracket, writing codes could kill you and make you question your decisions in life haha
1 — Auto-Close Tag
Like Bracket Pair Colorizer mentioned below this too is a must, and it’s non-negotiable, coding is already hard and crazy, you probably don’t want to deal with finding errors just because of missing close tag <div></div>
You can thank me later!
2 — Visual Code Integrated Terminal
Having your command/terminal inside your VSCode Editor will not just make your life easier but it will save up some space. Thanks to VSCode, having your terminal comes in handy.
3 — Bracket Pair Colorizer
and yes, you’re welcome.
4 — ESLint/TSLint
Basically, the main function is to auto-format codes for consistent formatting.
And it has millions of downloads for a reason.
ESLint can also be configured to auto-format your code, and whenever you make an error it will YELL on you with a bunch of warnings, isn’t it cool?
5 — Code Spell Checker
If you are non-native English speaker like me, if English is not your first language and not even second then Code Spell Checker is also very helpful to keep your code free from typos and errors, nevertheless, nobody is perfect neither you are fluent with the language or not typos is inevitable, and you don’t want to spend some time finding them especially if you have a spaghetti code.
6 — Settings Sync
If you are like me who uses multiple different machines then you will find this extension very useful, like how React describes itself, “learn once, code everywhere” settings sync replies, “set up once, and use it everywhere” :) in short, settings sync keeps all your computers/laptops synced in terms of how your Visual Studio is set up.
7 — Prettier
Earlier I’ve listed ESLint which will help you with the auto-formatting for consistent code and at the same time will show several warnings and errors.
As a React/Native Developer, keeping my code clean and properly aligned is a must, non-negotiable. Having it properly indent and separated for better code reading is a priority especially when dealing with long written code, separations with styles and functions and handlers are critical, not just for you but for your colleagues to read and work on.
This is super easy to set up, it will automatically format on its own the moment you hit save.
8 — Material Icon Theme
9 — Path Intellisense
This extension is one of those I can’t live without, trust me it will save you so much time, I am always forgetful and working as a Frontend with numerous components, extensions, packages, especially with React formatting, you need something that will help you with the file paths, working with large projects is crazy, and path Intellisense is your best bud for this, as you try and type a path in quotations, Intellisense will automatically fill or show suggestions for you.
10 — Browser Preview
This extension is a must for Frontend Developers, instead of opening another window for your chrome to see the changes you have made on your code, download this browser preview so you can work it all out within your VSCode, this will show you the browser preview of your code, no more having to tab to your browser to even see just the small changes. It helps you save some time and space.
Part 3/5 coming up…