working remotely

Joey Imlay

A look around my dev environment

A look around my dev environment

Most of my life as a developer is wrapped up in Visual Studio Code. I love it - it's endlessly customisable and extendable, which is great when you have a burning need to impress your own personality upon your immediate environment.

Below I've linked to the VSCode extensions I use on the daily, along with the relevant settings from my settings.json. Let me know if any of these are useful to you!

Because so many Northcoders students have been asking me about my theme, I've updated this post just for you!

Colours

I'm not a super girly girl, but in certain situations, cute is very much my aesthetic. Enter sailorhg's fairyfloss theme. It's very much based on the colour palette seen in that most feminine of classic anime, Sailor Moon, but with a dark enough background to still go easy on those of us who prefer a dark scheme. The VSCode port lives here.

"workbench.colorTheme": "fairyfloss"

You might have guessed that I've based the colours of this very site on this theme too. What can I say? I just really like this colour palette.

To easily differentiate between repos, I use Peacock to change the colour of the workspace. I keep it subtle though - just enough colour to know which repo I'm working in at a glance, but not so much that it's distracting. I've set the colours to match the fairyfloss theme - it's all in the details.

"peacock.affectActivityBar": true,
"peacock.affectTitleBar": false,
"peacock.affectStatusBar": false,
"peacock.elementAdjustments": {
  "statusBar": "darken"
},
"peacock.darkenLightenPercentage": 10,
"peacock.favoriteColors": [
  {
    "name": "FairyFloss Pink",
    "value": "rgba(252,184,209,1)",
  },
  {
    "name": "FairyFloss Yellow",
    "value": "rgba(241,206,56,1)",
  },
  {
    "name": "FairyFloss Green",
    "value": "rgba(184,255,218,1)",
  },
  {
    "name": "FairyFloss Blue",
    "value": "rgba(100,187,255,1)",
  },
  {
    "name": "FairyFloss Purple",
    "value": "rgba(190,150,255,1)",
  },
]

Update: Peacock was super helpful in my work at LADbible, where I was working with a handful of repos. At Northcoders, I'm jumping in and out of hundreds of repos, so setting a Peacock colour for every repo would be troublesome! But I'm leaving these settings here in case you find them useful.

Here are some further customisations I've made to the colours in VSCode, in keeping with the theme but also maximising readability:

"workbench.colorCustomizations" : {
  "terminal.background" : "#332E4A", // more on the terminal in a bit
  "editor.selectionBackground": "#be96e1",
  "editor.selectionHighlightBackground": "#be96e1",
  "editor.lineHighlightBackground": "#8B6897",
  "editor.wordHighlightBackground": "#be96e1",
  "editor.findMatchBackground": "#be96e1",
  "editor.findMatchHighlightBackground": "#9c74c0"
}

Readability

Fira Code is an excellent font choice for programmers. It renders characters in a very readable way by employing ligatures (that's a typographical term to describe two characters that are joined together to form a single glyph).

"editor.fontFamily": "'Fira Code', Menlo, Monaco, 'Courier New', monospace",
"editor.fontLigatures": true

Lately, however, I've been trying out Jetbrains Mono, which has been specifically designed to decrease eye strain. It also has ligatures, and uses taller letter formation.

Update: I've stuck with Jetbrains Mono, simply because it's easier on the eyes.

If you struggle to follow indentations every now and then, Indent-Rainbow colorizes each step of indentation in your code. I use a rotation of five custom colours to match the fairyfloss theme.

"indentRainbow.colors": [
  "rgba(255,174,203,0.2)",
  "rgba(255,225,50,0.2)",
  "rgba(184,255,218,0.2)",
  "rgba(100,187,255,0.2)",
  "rgba(190,150,255,0.2)"
]

Painting rainbows in your IDE whilst you're coding feels like you're using those magical girl powers.

I've customised some of the CSS in Bracket Pair Colorizer to better highlight the section of code I'm currently working in. I thought about matching the bracket colours to the fairyfloss theme, but a) the automatic colours with BPC don't look out of place with the theme, and b) the slight distinction makes them easier to keep track of anyways. BPC is an invaluable extension to help you avoid errors from functions that haven't closed properly. I can't recommend it enough.

"bracketPairColorizer.scopeLineCSS": [
  "borderStyle : dotted",
  "borderWidth : 2px",
  "borderColor : {color}; opacity: 0.75",
  "backgroundColor : {color}; opacity: 0.25"
]

Update: This functionality is now native in VSCode!

Terminal

Let me head this section up with another recommendation - the Command Line Power User video series by Wes Bos. It's been a big inspiration to me in achieving terminal zen. Here's a quick rundown of my setup:

  • iTerm2 on Mac, Terminator on Ubuntu
  • zsh and Oh My ZSH!
  • Agnoster theme for Oh My ZSH!
  • Fira Code font (any Powerline patched font will have the nifty special characters used by Agnoster)
  • fairyfloss theme for iTerm2, lightly customised for a darker background (unsure if this has been ported to Terminator)

In iTerm2, I've split up my default window into four panes, one for each of the repos I work with most often. I've set them up to run immediately on startup - one click to open iTerm, and a few seconds later all my Docker containers are up and running. No typing. Terminal zen.

Update: Again, this was super useful at LAD; I only use a single pane at Northcoders.

Replicating this level of zen in VSCode's integrated terminal requires a few extra settings. To get VSCode to use iTerm, add these settings:

"terminal.external.osxExec": "iTerm.app",
"terminal.explorerKind": "external",

With this, your integrated terminal will happily use zsh, Oh My ZSH and your chosen OMZ theme, but it's likely that if you're using a colour scheme in iTerm, your integrated terminal colours won't match yet. Don't worry, because there are settings for those too. A lot of settings...

"workbench.colorCustomizations" : {
  "terminal.background" : "#332E4A",
  "terminal.foreground":"#f8f8f2",
  "terminal.ansiBlack":"#332E4A",
  "terminal.ansiBrightBlack":"#8077a8",
  "terminal.ansiBlue": "#c5a3ff",
  "terminal.ansiBrightBlue":"#c5a3ff",
  "terminal.ansiCyan":"#c2ffdf",
  "terminal.ansiBrightCyan":"#c2ffdf",
  "terminal.ansiGreen":"#afecad",
  "terminal.ansiBrightGreen":"#afecad",
  "terminal.ansiMagenta":"#ffb8d1",
  "terminal.ansiBrightMagenta":"#ffb8d1",
  "terminal.ansiRed":"#ff857f",
  "terminal.ansiBrightRed":"#ff9e9a",
  "terminal.ansiWhite":"#f8f8f2",
  "terminal.ansiBrightWhite":"#feffff",
  "terminal.ansiYellow":"#ffea00",
  "terminal.ansiBrightYellow":"#ffea00",
  ...
},

One final recommendation: VSCode can do that?! lists a ton of features and extensions for VSCode that might make your dev life a little easier.

Has this inspired you to upgrade your dev environment? Do you also find the fairyfloss palette great for coding? Drop me a tweet if you found this post helpful!

thanks for reading! Joey x

Visual Studio Code
iTerm2
zsh

joeyimlay.dev © 2021

"When people call people nerds, mostly what they're saying is 'you like stuff', which is not a good insult at all."
-- John Green