About:
Visual studio code, arguably the best code editor to use at the present time. Due to its wide range of extensions and support from Microsoft this editor is widely adopted.Visual studio code is built on top of an open-source Monaco editor by Microsoft.
This project receives around 14k stars on Github.Visual studio code offers a wide range of extensions. Here is how to install the extension.Press SHIFT+COMMAND (or Windows)+X or just click on the extension icon of visual studio code. Search for the extension and press install.
This will show you a list of the most popular VS Code extensions on the VS Code Marketplace.
Following are the best and useful Vs code extensions:
1. Settings Sync :
It allows you to sync pretty much everything you customize on VSCode to Github, from settings to keyboard shortcuts to other VSCode extensions.
This way, you’ll have access to your preferred IDE from whichever device you want, instead of having to program from a vanilla VSCode environment on new devices or having to manually set up everything again.
Benefits: saves you valuable time, gives you access to your preferred IDE from any device.
2. GitLens:
GitLens supercharges the Git capabilities of Visual Studio Code. This is a powerful extension that allows you to see who, why, and how lines of code have changed over time (among lots of other features).GitLens is a highly customizable extension. If you don’t like a particular setting, you can easily turn it off in settings.
Benefits: helps you to better understand your code ,allows you to effortlessly explore the
history and evolution of a codebase.
3. Visual Studio IntelliCode:
This extension aims to aid developers and programmers with AI-assisted code completion suggestions. It comes with default support for Python, TypeScript, JavaScript, React, and Java.
Benefits: saves you time by putting what you’re most likely to use at the top of your completion list.
4. Prettier:
Prettier is an opinionated code formatter that works particularly well if you have multiple people working on a single project, because the extension enforces a consistent style.You can set it up so it formats your code every time you save it, significantly reducing the amount of time you need to spend formatting your code.
Benefits: Having consistent formatting and styling across your code can save a lot of time, especially when collaborating with other developers.
5. Bracket Pair Colorizer:
Bracket Pair Colorizer gives the opening and closing brackets matching colors, making it much easier to know which brackets belong together.Custom bracket characters can also be configured, and you can add a background color to the active scope too.
Benefits: Saves you time, reduces confusion and generally makes your coding life easier.
6. Auto Rename Tag:
While VSCode inherently highlights matching tags and immediately adds closing tags whenever you type an opening tag, Auto Rename Tag automatically renames tags that you change.The extension works for HTML, XML, PHP, and JavaScript, and removes the need to change your tag names twice.
7. Live Server:
Live Server launches a local development server with a live reload feature both for static and dynamic pages.
Every time you save your code, you’ll instantly see the changes reflected in the browser. You’ll be much faster at spotting errors and it’s much easier to do some quick experiments with your code.
Benefits: spotting errors will be much quicker and it will be easier to experiment with your code.
8 Debugger for Chrome:
The debugger is a VS Code extension to debug your JavaScript code in the Google Chrome browser or other targets that support the Chrome DevTools Protocol. It helps to debug eval scripts, script tags, scripts that are added dynamically, and setting breakpoints, including in source files when source maps are enabled.
Benefits: detect errors earlier on in the development process, gain useful information of data structures and allow easy interpretation.. Debugger for Chrome:
9 Snippets:
Code snippets are templates that make it easier to enter repeating code patterns, such as loops or conditional-statements. While VSCode includes built-in JS IntelliSense, Code Snippets enhance that experience by adding a slew of import/export triggers, class helpers, and method triggers.
Benefits: saves time and boosts productivity
10. Better Comments:
Better Comments allows you to create more human-friendly comments in your code, categorising your annotations into alerts, queries, TODOs, highlights, etc.
Benefits: clear and digestible code will save lots of time for you and also for your team
