VSCode is probably the number one code editor as of today. I love it.
I think the reason it’s become so popular is simply that VSCode provides every developer’s wants, including features that they didn’t even know they needed. That’s the secret charm of VSCode — it never fails to surprise you.
I believe that one of the best ways to get to a person’s heart is by helping them to realize what they need before they even know they need it. This is one of the powerful drives in marketing, actually, and VSCode did a very good job.
When it comes to choosing a text editor, always go for the latest and greatest. Technology is changing rapidly and you don’t want to fall behind. Time should always be on your side to become a great developer.
I don’t mean you should jump from one language to another, or one framework to another — that’s crazy. What I’m saying, and have been saying in my previous blogs, is to stay updated, stay sharp, know the latest, and compare them to what you have been currently using, know the difference, pros and cons and watch the support and its community growth, because stability is also important. You’ll be surprised how much your productivity could skyrocket!
VSCode has a huge open-source community. Its growth and potential are limitless, and in the future learning how to code and coding itself will be easier.
1. Auto-Close Tag
Having this extension is a must. Coding is hard and crazy enough, without having to deal with finding errors just because of a missing close tag,
You can thank me later!
What it does is automatically add the closing bracket of the opening tag you just added and then position the mouse cursor between the tags. Cool, right?
2. Visual Code Integrated Terminal
Having your command/terminal inside your VSCode Editor won’t just make your life easier, it will save space. Thanks to VSCode, having your terminal comes in handy.
3. Bracket Pair Colorizer
Brackets are a pain for most developers, especially when working with huge projects. It’s even worse when you have spaghetti code. Trust me, bracket pair colorizer will save you all the stress.
And yes, you’re welcome!
Bracket Pair Colorizer
This extension allows matching brackets to be identified with colors. The user can define which characters to match…
The main function of this extension is to auto-format codes for consistent formatting across your team. ESLint can also be configured to auto-format your code, and whenever you make an error it will scream at you with a bunch of warnings.
It has millions of downloads for a reason.
5. Code Spell Checker
If you are non-native English speaker like me and English is not your first language, and maybe not even your second, then Code Spell Checker is very helpful for keeping your code free of typos and errors. And nobody’s perfect, whether you’re fluent in English or not, typos are inevitable — you don’t want to spend time finding them, especially if you have spaghetti code.
6. Settings Sync
If you use multiple machines, as I do, you’ll find this extension useful. Settings sync keeps all your computers/laptops synced in terms of how your visual studio is set up.
If you’re a developer who works on both an office and home computer you’ll basically you will be working on a different workstation. It’s time-consuming to change your settings manually on both because, to be honest, we will need to change our settings from time to time depending on the projects we are doing, so to reduce the stress of programming, I recommend that you use this extension so that all the changes you make are automatically synced on all your machines and workstations.
While being free and open-source, if you find it useful, please consider supporting it by donating via PayPal or Open…
Earlier, I listed ESLint, which helps you with auto-formatting for consistent code and shows several warnings and errors.
As a React/Native Developer, keeping my code clean and properly aligned is a must — it’s non-negotiable. Having it properly indented 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.
Visual Studio Code extension for Prettier. Contribute to prettier/prettier-vscode development by creating an account on…
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’m forgetful and working as a front-end developer with numerous components, extensions, packages, especially with React formatting, I need something that will help me with the file paths. Working with large projects is crazy and path Intellisense is your best friend for this. As you try and type a path in quotations, Intellisense will automatically fill or show suggestions for you.
Path Intellisense can also help with auto-completion for all your hidden files.
10. Browser Preview
This extension is a must for front-end Developers. Instead of opening another window for your Chrome to see the changes you’ve made in your code, download this browser preview so you can work it all out within your VSCod. This shows you the browser preview of your code, so no more having to tab to your browser to see even small changes. It helps you save time and space.
A real browser preview inside your editor that you can debug. Browser Preview for VS Code enables you to open a real…
11. Debugger for Chrome
The console is powerful when it comes to finding which lines and functions do the error came from, up to seeing its data handling.
13. Live Server
In using Live Server, this vscode extension will help you open a live web server of your current project. Usually, when using a builder like Webpack, that normally does the job, but this extension has proven itself to be more useful. You can just right-click and run open with live server and it will do the rest.
It’s very lightweight, productive and powerful compared to other VSCode extensions. It will boost your workflow, it’s real-time and will give you feedback right away.
What it does is utilize a fixed color type for each result, so developers can easily understand the execution of the flow.
15. Live Share
Live share is one of the most advanced features in VSCode text editor. It’s perfect when working with team members. One of its functions is to allow every developer to share code snippets with other developers in real-time.
This is perfect and helps team collaborations become much more efficient and productive. Live Share allows the instant sharing of current projects even when debugging — how cool is that!
Collaborators don’t have to install any repositories, SDKs, or anything to connect with other developer’s current code. Everyone on the team can collaborate sessions to explore and fix things remotely.
16. Github Extension
If your team is using Github, or you are using Github for your project repositories or want to use other developer’s source code repositories, then this extension is for you.
Github, by the way, is now owned and managed by Microsoft for those who don’t know, so Github and VSCode are now part of Microsoft’s products.
With using Github Extension, you can now easily connect other developer’s repository, your favorite developer’s repositories and even your own. You can easily pull and push — very handful if you use Github regularly.
This vscode extension integrates with GitHub. Note: I recommend to use GitHub Pull Requests instead of this, because…
Gitlens is another great extension. It supercharges the current VSCode Git functionalities with the ability to perform side by side code comparison from your previous commits and changes, together with other cool features.
GitLens — Git supercharged
GitLens supercharges the Git capabilities built into Visual Studio Code. It helps you to visualize code authorship at a…
Every modern developer already knows what NPM is and why it’s important. The Node Package Manager is an extension that helps you manage your
package.json file. It gives you warnings if there are dependencies required that haven’t been installed yet, as well as your NPM package’s version control.
Most of the bugs and errors that I’ve been working on comes from using NPM packages, functions and features that won’t work because of its incompatibility with other packages. I swear, not having the dependencies it requires not having the compatible versions is stressful!
This VSCode extension is a must:
This extension supports running npm scripts defined in the package.json file and validating the installed modules…
Beautify is another great extension for code formatting, almost the same as the one I mentioned earlier, Prettier. It now has almost 12 million downloads, so there’s nothing more to say here for you to be convinced of why this extension is so useful.
20. Live Sass Compiler
If you’re a fan of Sass for styling, or just using Sass because it’s part of the project application requirement, then this VSCode extension is for you!
It compiles your SASS/SCSS files into CSS files in real-time and automatically gives you a live preview of the app or the compiled styles in your browser.
I’ve been using Emmet since I started using VSCode. It helps every developer improve your speed when it comes to writing your codes. Use this extension and soon you won’t be able to imagine coding without it.
You DON’T need this extension to use Emmetin VS Code. Emmet (for HTML, CSS, JSX) is a built-in feature of VS Code. This…
Here’s a bonus: Emmet Documentation Cheatsheet:
22. VSCode Icons
23. Color Picker
The color picker extension helps you to easily select colors within your CSS files. It will immediately be reflected or apply to the property that you are currently working on. It’s also available if you preferred to use RGBA colors.
24. ES7, React, Redux & GraphQL Snippets
Typing standard codes over and over is inefficient. With the help of this snippet you can easily create class-based components, functional components, imports, lifecycle methods and many more by just typing shortcut codes, this is one of my most used extensions since I’ve been working with Reactjs and React Native.
ES7 React/Redux/GraphQL/React-Native snippets
25. REST Client
Another advanced tool, the Rest Client extension helps you if you are working with other third-party tool and APIs. It’s useful if you need to be able to make an HTTP request easily.
This extension allows you to easily call and endpoint directly inside your code editor. It saves time —yuo can use this instead of going back and forth to your browser, or postman just to make a request.
Thank you all for reading!