My current VsCode tools and Themes!

VsCode Extensions

All below are extensions I have recently found and used. Hope this blog will help anyone that are looking for tools to try for more efficient coding. :)
Wanna jump over to themes or icon themes?

ERB toggle

You can toggle through your ERB tags using cmd+ shift + period. Cycles through tags <%= %>, <% %> and <%# %>. This extension also works for editing tags that you’ve already written! Highlight the line you wanted to edit and press the toggle commands and it’s that easy!

ERB-Vscode-Snippets

I just discovered this extension recently like a couple of the extensions on this blog. Just like the one above, this also toggles through ERB tags but this extension covers more than just the open and closing your tags for you. You can also toggle through the collection of tags using the back tick (`) and type the corresponding snippet command. Ex. The if will trigger a dropdown list for if and if-else statements.

Here's a list of tags that's available for this extension;

VsCode-spotify

For this extension, you would need to be logged in to your Spotify account on your desktop. Download the extension on VsCode(you may or may not need to restart Vscode after). Once installed, check your bottom navbar for a small log in icon(see reference photo below). Then click the Spotify icon on the navbar in the left side of the screen and enjoy! This is basically a controller for your spotify right on your VsCode!

HTML preview

I have mentioned this extension on my previous blog. This is a nice extension to preview HTML files while editing them in VSCode. Try and test this on a project you're working on. Go and open any html file and you'll see a small icon for html preview. See how that page is styled? Not bad eh?

Browser Preview

Another discovery for someone who’s new on VsCode. Instead of opening another browser or swipe through your desktop spaces, you can use this extension to run your server and view results side by side with your code. This extension is ran by headless chrome or headless browser. Click here for more details about headless chrome or headless browser testing details.

This is good if you just need a quick glance on your app, however, the interface is not as smooth compared to going directly to your browser to run your server. You can set a start-URL on this extension’s settings so that every time you run rails s or shotgun it will automatically bring you to your local host page. Don’t forget to put http:// when you set your start-URL so you don’t run on any problems loading the page.

Live Share

Enables you to collaboratively edit code with colleagues in real time, regardless what programming languages you are using or app types you are building. Both sides of the collaborators needs to have Live share extensions. After downloading, there’s a prompt to log in to your Github account.
-You can start a collaborating session by clicking the live share icon below your VsCode window.
-Copy the link and send it to the people you need to collaborate with. It will lead you back to you VsCode and load all the necessary files.
Tip: There’s a green pin mark on the upper right of your window, toggle that if you need to be synced with the host on where they are editing on your file. The host will have the capability to give you access to their terminal or just make the session a read-only. Here's a quick video of developers collaborating with Live Share; (You can begin watching from 0:37 - 3:35)
This has been a very useful tool in collaborating and brainstorming about code. Enjoy!

Polacode

Polaroid for your code! Same with screenshots but the benefit is it takes a photo much clearer and your syntax is highlighted correctly by VsCode!

Press Cmd+Shift+P then type Polacode. Copy the snippet of code you want and paste it to the Polacode view. You can adjust the shot by dragging the tab on the corner. Press the shutter to take the the photo of the snippet. After taking the photo it’ll ask you where to save. The default file extension is png. This comes very handy for showing snippets for blogging or presenting code through a photo and show off your favorite theme and font. Guaranteed you are showing correct highlighting on your syntax. Here's an example photo that I took using Polacode.

THEMES

-Light
-Dark/Colors
Disclaimer: Some color themes listed below comes with their own file icon theme.

Light

Light+

Quiet light

Remedy Light

Solarized light

Winter is coming light

Dark/Colors

Remedy

Winter is coming-Dark

Tomorrow night Blue

Rosé Pine

Red

Palenight series

Monokai

Monokai High Contrast

Merko’s green

Hopscotch

(Also comes with a couple more styles like Mono, Classic & Proofreader)

Kimbie - Dark

Darkiota

Dracula Official

Abyss

Andromeda

ICON THEMES

Back to Themes

Back to extensions
Listed below are on my current rotation.

Cage

Minimal

Nomo Dark icon theme

Material- Current favorite icon theme

File icon theme

Helium

Mosmmy icon

Stardew (comes with winter and autumn)

Click here to go back to extensions!

Let me know if you have any input for me or if I have missed anything! Love to try other extensions as well! Feel free to leave a comment for suggestions! Thank you for your time in reading my blog! Until the next!

Comments

[Suvin Nimnaka]

Good read. Helpful!

[Ellaine Tolentino]

I feel you! I could go on and on in changing my theme.

[Phillip Sturgeon]

Nice! For your icon choices, what's the one labelled File Icon Theme? After Material, before Helium.