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.

Photo credit by Unsplash

Don’t forget to read first the

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

Brackets are a pain in the as** for most developers, especially in working huge projects worse having a spaghetti code, trust me, bracket pair colorizer saves lives. With tons of nested codes especially in working with Javascript, it will be almost impossible to determine which brackets matches up with each other, with using bracket pair it will help you find the opening and closing more easily with having them colored, it makes your code more readable, download this!

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

This extension will give you pretty cute icons for your file list, if the file is a javascript then it will include a javascript icon in material style beside the file name, if you’re more of a visual developer then this extension is for you, and this is widely used by millions of users.

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…

Photo credit by Unsplash

Software/Mobile Developer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store