Visual Studio Code is a code editor with support for development operations like debugging, task running, and version control. A good number of developers use Vscode as their code editor. One of the coolest features 😎 of vscode is the Vscode Extension. It allows you to add tools, languages, debuggers, and much more to your code editor. With the vscode extension, developers write faster, cleaner, and more consistent code.
To get started is quite simple, we just have to install the extensions on our editor from the extensions panel
Or using shortcut
for Windows - Ctrl + Shift + X for Mac - Cmd + Shift + X
Here are some cool vscode extensions to use
Live Server, this is one of the coolest vscode extension I know 😎. It enables you to view your site live with a click. This can be down by clicking to go live from the status bar to turn the server on/off Or Hit (for windows) alt+L, alt+O to Open the Server, and (alt+L, alt+C) to Stop the server, (for MAC) cmd+L or cmd+O and cmd+L, cmd+C]
Git Extension Pack
Git Extension Pack , It contains some of the popular git extensions. The git extensions in the pack currently are:
Git History - This gives access to viewing git logs, file or line history.
GitLens - GitLens is one of the most powerful git extension, It helps you to visualize code authorship at a glance via inline Git blame annotations and code lens, seamlessly navigate and explore the history of a file or branch, gain valuable insights via powerful comparison commands, and so much more.
Open in GitHub / Bitbucket / VisualStudio.com - Jump to a source code line in Github / Bitbucket / VisualStudio
Css Peek saves the stress of switching between the HTML and CSS files. The extension supports all the capabilities of symbol definition tracking but does it for css selectors (classes, IDs, and HTML tags). This includes:
Peek: load the css file inline and make quick edits right there.
Go To: jump directly to the css file or open it in a new editor.
Hover: show the definition in a hover over the symbol
IntelliSense for CSS class names in HTML
This extension makes it easier for syntax that is hard to remember.
Better Comments will help you create more human-friendly comments in your code. With this extension, you will be able to categorize your annotations into:
- Highlights Any other comment styles you'd like can be specified in the settings. The extension is supported by a large number of languages.
CodeSnap extensions allow developers to take beautiful screenshots of your code in Vscode, easily and fast.
It can be done by -
Open the command palette (Ctrl+Shift+P on Windows and Linux, Cmd+Shift+P on OS X) and search for CodeSnap.
Select the code you'd like to screenshot.
Adjust the width of the screenshot if desired.
Click the shutter button to save the screenshot to your disk.
THEMES AND ICONS
This helps to make your vscode pleasing and comfortable to use.
Shades of Purple
Shades of Purple 💜, this is one of my best vscode themes. It combines different shades of purple together to make the code editor look more beautiful.
SynthWave '84, a color theme to satisfy your neon dreams. It gives a glow effect to the code.
Vscode Icons, This extension gives a unique icon to each folder and files.
These are some main Vscode extensions to have as developers for you to be more efficient. If you have any other one to add, Kindly mention it in the comment below.
You can also reach out to me on Twitter