DEV Community

Cover image for How I’ve Adapted my VSCode Workspace
Lopè Ariyo
Lopè Ariyo

Posted on • Originally published at Medium

How I’ve Adapted my VSCode Workspace

Have you ever come across a person who feels like they can’t work when things aren’t in sync with each other visually? Well… that’s me! So, now that I’ve become comfortable with what I expect from my workspace, here’s my small guide on how to make your VS code workspace work for you.

First things first, choose a theme…. There’s so many different ones out there and this blog has done a great job of curating the most popular.

50 VS Code themes for 2020

If you're looking for a new theme to change up your code editor in the new year, I'm here to help! Check out a variety of stylish themes with unique color palettes-from sleek to snazzy to vibrant and everything in between-to see what works best for you.

In addition, https://vscodethemes.com/ list themes for VSCode that are trending which you.

I currently love using Panda Theme because of how colorful it is, though I’ve found it can be a lot for others.

Panda Theme

A Superminimal, dark Syntax Theme. This is the latest version of the Panda Syntax theme. It's a dark syntax theme crafted especially for Visual Studio Code [New Version], with subtle colors that are meant to be easy on the eyes. The font in the screenshot is Operator Mono.

Once I downloaded my theme I used Apple’s Digital Colour Meter to find out what colours I was working so that I could adapt the rest of my visual enhancements to match. Colour Meter gives you the RGB codes however you’ll also need the hex code to change some visual enhancements. https://convertingcolors.com/ is great for this!

Here’s what I was able to get:

  • Green(it’s really turquoise but whatever) — RGB (25,249,216) | HEX #19F9D8

  • Pink — RGB (255,118,181)| HEX #FF76B5

  • Light Purple — RGB(177,128,215) | HEX #B180D7

  • Blue — RGB (111,193,255)| HEX #6FC1FF”

  • Orange — RGB (247,179, 106)| HEX #F7B36A

  • Light Pink — RGB (255,135,181)| HEX #FF87B4

The semantics for the colour scheme are mentioned in it’s documentation:

tinkertrain/panda-syntax-vscode

Some semantic meaning is intended for colors to help easily scan files. They are documented here for reference. Language keywords and component names are italicized for emphasis Green: Strings Pink: Logic Control Light Purple: Language access like module.exports, process.env Blue: Functions Orange: Variable assignments keywords Light Pink: Object access

Now that you have the colours you need, you can access VSCode settings using shift + cmd + P and then clicking on Preferences: Open Settings (JSON) to modify any visual enhancements you have. Here’s how I changed mine.

Indent Rainbow

I hate when my indents aren’t uniform so indent rainbow is a great tool for making sure I adhere to that. I made it so that the indent rainbow loops on five of my six theme colours with a transparency of 0.4 instead of it’s default colors. In addition, I gave it an error color of bright red so that it interupts how my theme looks and makes me want to correct it straight away.

In this blog, they’ve used a single colour, and changed the transparencies of each indent to differentiate between them.

Useful VSCode Extensions - Visual Enhancements - Petr Tichy - Front End Developer - Melbourne

Are you looking for some useful VSCode extensions that could speed up your front-end development workflow? I have been building React and Angular projects in VSCode over the last few years and in the next few posts I will share with you my most popular VSCode extensions.

Bracket Pair Colorizer 2

Bracket Pair Colorizer doesn’t allow you to change it’s colors but the second version does. As brackets only appear next to functions I chose the colours of my theme that contrast against Blue(that’s the colour functions appear in because of the Panda semantics. Alternatively, Rainbow Brackets can be used instead.

Bracket Padder

Bracket padder doesn’t add colour, but instead as white space, which is great if you prefer your code spaced out and easier to read, as opposed to clunky,.

Highlight Matching Tags

Highlight Matching Tags, for me, is essentially the tag version of bracket pair colorizer. The only downside (it seems) is that you can only have one color. Otherwise, it would be great to have that change color depending on their indents.

Auto Close Tag + Auto Rename Tag + HtmlTagWrap

I feel like the above three extensions all work as one. The auto-close and auto rename tags are self-explanatory. Once you create an opening tag, a closing tag is automatically named for you and if you change the opening of an existing tag the auto-rename extension will change the closing tag accordingly. HtmlTagWrap allows you to highlight some html and then wrap it in a default tag (it’s automatically set to

) using opt + w. I find myself having to wrap existing html in

tags often, so I changed it’s default accordingly, however if you wanted to leave the default as

Auto Rename is still there for you!

Better Comments

Better Comments can be modified by adding tags and then changing the colours within those tags. In this case tags are a keyword/letter that come after the comment notation for Better Comments to identify. I won’t go into how many tags I’ve got but I like to use backgroun colors to explain the type of comment and then use symbols to represent bullet points, again I’ve styled it to match my panda theme. TO-DO Highlight is another alternative to better comments.

Code Spell Checker

I admit I specifically went looking for this after I failed a code challenge because I made a spelling error. Without realising it, I had spelt a model differently from how I spelt my controller in Ruby on rails and as a result I couldn’t get my code working. What was worse is I couldn’t actually see it! Code spell checker picks up code spelt in incorrectly and highlights it with a squiggly underline, so it’s great to avoid this type of situation!

Prettier

Believe it or not, but even with all these extensions, I still can’t live without a code formatter. I think the best one is by far Prettier. I think of it as a final path to make sure my code is essentially “prettier”. I make sure it automatically formats my code on save and it’s tab width works in correlation as my rainbow-indent add on.

IntelliSense(s) and Snippet Packs

Not much to these but Intellisense add ons (there are hundreds! ) and Snippet packs (also hundreds!) are also useful tools for that help me avoid making silly mistakes.

Intellisense works by autocompleting items based on what’s located in your workspace. I use Path IntelliSense which auto-completes file names, npm which auto-completes module names and CSS which auto-completes class names.

Snippet packs usually work by creating a bunch of shortcuts so that when you’re typing you can make sure you put down the correct syntax. I have some installed for JS, ES6 React, React Native, Redux, ERB, Ruby on Rails(and I’ll be honest I don’t remember half the shortcuts but I hope to overtime)


Unfortunately for me, I think add-ons have become an addiction at this point and I’m always on the lookout for more. Right now, I’m especially interested in ones that help me monitor my time when it comes to coding. What are some of your favourite VScode extensions?

Discussion (0)