DEV Community

loading...
Cover image for My current VsCode tools and Themes!

My current VsCode tools and Themes!

tolentinoel profile image Ellaine Tolentino Updated on ・6 min read

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;
Alt Text

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!
Alt Text

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.
Alt Text
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!
Alt Text
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.
Alt Text

THEMES

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

Light

Light+

Alt Text

Quiet light

Alt Text

Remedy Light

Alt Text

Solarized light

Alt Text

Winter is coming light

Alt Text

Dark/Colors

Remedy

Alt Text

Winter is coming-Dark

Alt Text

Tomorrow night Blue

Alt Text

Rosé Pine

Alt Text

Red

Alt Text

Palenight series

Alt Text

Monokai

Alt Text

Monokai High Contrast

Alt Text

Merko’s green

Alt Text

Hopscotch

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

Kimbie - Dark

Alt Text

Darkiota

Alt Text

Dracula Official

Alt Text

Abyss

Alt Text

Andromeda

Alt Text

ICON THEMES

Back to Themes

Back to extensions

Listed below are on my current rotation.

Cage

Alt Text

Minimal

Alt Text

Nomo Dark icon theme

Alt Text

Material- Current favorite icon theme

Alt Text

File icon theme

Alt Text

Helium

Alt Text

Mosmmy icon

Alt Text
Alt Text

Stardew (comes with winter and autumn)

Alt Text
Alt Text

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!

Discussion (4)

pic
Editor guide
Collapse
suvink profile image
Suvin Nimnaka

Good read. Helpful!

Collapse
ryansamaeian profile image
Ryan-samaeian

I really just want to customize my vscode cmd

Collapse
tolentinoel profile image
Ellaine Tolentino Author

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

Collapse
alex_johnson profile image
Alex Johnson • Edited

Hello, thanks for the insightful discussion. I look forward to more such discussions. solarpanelcostprice.com.au/1-5kw-s...