My current VsCode tools and Themes!
Tags: vscode, themes, extensions
Published: 2020-11-09 01:28:10

##__VsCode Extensions__<a name="ext"></a>
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](#themes) or [icon themes](#icon)? 
####__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! 
<img src="https://media.giphy.com/media/JdG2Mx3NxvqtpvqQ0B/giphy.gif">

####__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. 
<img src="https://media.giphy.com/media/5yVs9XEvL3iEyVaqdD/giphy.gif">
Here's a list of tags that's available for this extension;
 ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/epum4omx9q2zjctbw7eh.png)

####__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](https://dev-to-uploads.s3.amazonaws.com/i/ogfjypmav4df13e7vlf6.png)

####__HTML preview__
I have mentioned this extension on my previous [blog](https://dev.to/tolentinoel/html-css-is-a-playground-fhe). 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] (https://developers.google.com/web/updates/2017/04/headless-chrome#tldr) for more details about headless chrome or [headless browser testing] (https://www.softwaretestinghelp.com/headless-browser-testing/) details. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/zuwgmh7glipgrvm1bj20.png)
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){% youtube A2ceblXTBBc %}
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](https://dev-to-uploads.s3.amazonaws.com/i/o3q2banp4mv5obisouqo.png)
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](https://dev-to-uploads.s3.amazonaws.com/i/z6tuy6f4q27ti6rc6eid.png)

##__THEMES__<a name="themes"></a>
   -[Light](#light)
   -[Dark/Colors](#dark)
*Disclaimer: Some color themes listed below comes with their own file icon theme.*

####__Light__ <a name="light"></a>
    
#####Light+
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/r7hdarlrs4rky3417ql7.png)
#####Quiet light
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/yg8mhd1y3rcrjrhoa3b9.png)
#####Remedy Light
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/szmwczee4r89zoi13j0n.png)
#####Solarized light
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/z4u37ovj0finq51e4391.png)
#####Winter is coming light
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/pudbuvp2ynh4oxhkkqxf.png)

####__Dark/Colors__ <a name="dark"></a>
#####Remedy
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/xgdg36z7fs2n1vlzry5l.png)
#####Winter is coming-Dark
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/mpzpfqshqpslu9cewnof.png)
#####Tomorrow night Blue
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/os5q60hnb5t2i2gv7oyv.png)
#####Rosé Pine
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/fm2oje6urn62pjenllsm.png)
#####Red
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/lkw12y1h7gnadcxubu6m.png)
#####Palenight series
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/u4totz84zos108f7bhgc.png)
#####Monokai
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/dbemu8bhxrg8xc6lrww2.png)
#####Monokai High Contrast
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/40x6mcnff8gzt65thdzg.png)
#####Merko’s green
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/hqtjykv3e0qbu3oz01h1.png)
#####Hopscotch
(Also comes with a couple more styles like Mono, Classic & Proofreader) 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1j0g6xnqwr3xh0ux1igj.png)
#####Kimbie - Dark
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/zbinle7s8r65maza6tnd.png)
#####Darkiota
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2b2tmfuekpg53byvlc0d.png)
#####Dracula Official
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/xuyg43af1y3r27i1v2rd.png)
#####Abyss
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vo2gmhdss55lep8dq20g.png)
#####Andromeda
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7kjlyzdckdsvzecdx8mw.png)

###__ICON THEMES__ <a name="icon"></a>
*[Back to Themes](#themes)       
[Back to extensions](#ext)*
Listed below are on my current rotation.
#####Cage
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/j4opw9z61xxq4f5f4tt5.png)
#####Minimal 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/tjt6f3gnv1mvemyw1j9l.png)
#####Nomo Dark icon theme
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jpaxw3xvyvo7zyy6mahc.png)
#####Material- Current favorite icon theme
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/htfnssihodciomgg6ps1.png)
#####File icon theme
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ae6m487acdm234sl51f3.png)
#####Helium
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3wtrol9b8oc8sfsq4msl.png)
#####Mosmmy icon
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/bd6righuerc4in87ebs8.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/l30ta2iwbqvn5cxn4232.png)
#####Stardew (comes with winter and autumn)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2citldyj5ovv7ks01b3o.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/br4dgl1axotmt18f54i9.png)


Click here to go back to [extensions](#ext)!

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!