Photo by Sai Kiran Anagani on Unsplash

Coding Workspace Quick Wins: Upgrade Your Zsh Terminal and VSCode

Having a nice workspace is like having a nice home. If you’re a developer, you can probably estimate how much time you spend typing commands in your terminal or code in your IDE. (Hint: All the time.)

Since that’s the case, taking the time to tweak your workspace the way you like it is actually a great investment. Here are some customization and productivity tips to make the most out of your terminal and IDE.

📌 Terminal Upgrades

This guide assumes you have Zsh installed already; if not, check out how to here

1. Themes & Colors

• Install oh-my-zsh.

sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

• Pick any of the terminal themes there (agnoster is a favorite). The theme sets how paths, prompts, and git would look like in your terminal.

agnoster screenshot from the oh-my-zsh wiki

• Once you’ve decided on a theme, apply it to your terminal by editing your .zshrc file.

nano ~/.zshrc
## Look for this environment variable...
ZSH_THEME="robbyrussell"
## ...then change it to your preferred one
ZSH_THEME="agnoster"

• After getting a terminal theme, you can customize the color theme that comes with it. Check out the Gogh selection for options (Solarized, Monokai, Dracula and Gruvbox are common favorites).

Demo from Gogh documentation

2. Fonts

• Install Powerline fonts to power your terminal as well as your IDE’s (we’ll walk through that later).

sudo apt-get install fonts-powerline

• Open your terminal (Ctrl + Alt + T) then click Edit menu > Preferences.
• Go to the Text tab and choose a Custom font (we chose Source Code Pro as an example here).

Setting your preferred terminal font

3. Bonus: Emoji Randomizer

• Instead of the boring @myusername_laptop prompt at the start of your terminal, you can customize it to random emojis! Here’s how:
• Open your terminal and enter:

nano ~/.oh-my-zsh/themes/${yourchosenthemehere}.zsh-theme

• Edit your preferred emojis, then paste this code snippet anywhere in the file (credits to biigpongsatorn):

# Context: user@hostname (who am I and where am I)
prompt_context() {
   # Custom (Random emoji) - change to a series of emojis that you like!
   emojis=("◕ ◡ ◕" "🦄" "🌈" "🍻" "🌻" "✨" "🍩" "🍕" "🐶" "💊" "💃")
   RAND_EMOJI_N=$(( $RANDOM % ${#emojis[@]} + 1))
   prompt_segment black default "${emojis[$RAND_EMOJI_N]} "
}

4. Bonus: Aliases

• This tip is more for your productivity than aesthetic.
• If you find yourself often typing cd ~/Documents/Development/Projects to get to your projects folder, or python manage.py runserver localhost:8000 to start Django projects, it’s probably time to make aliases.
• Open your .zshrc file and append aliases at the end of the file. Samples include the following (and of course, change the following paths to your own):

alias projects="cd ~/Documents/Development/Projects"
alias django="cd ~/Documents/Development/Projects/my-django-project ; pipenv shell"
alias pm="python manage.py"
alias run="python manage.py runserver"

• Save and restart your terminal.
• Next time you need to go to your Django project or run it, just type django or run localhost:8000 in behalf of the long commands.

5. Bonus: Autosuggestions and more

• Another productivity tip: If you want suggestions of past-entered commands as you type, install zsh-autosuggestions. See here for a screencast.
• For other helpful plugins, see oh-my-zsh’s external plugins.

6. Terminal Reveal

After everything, here’s how my terminal looks now:

The After

📌 IDE (VSCode) Upgrades

1. Themes

• Download a theme by pressing Ctrl + Shift + X to go to the Extensions Marketplace, then search theme to view options.
• For a visual selection, go over to VSCodeThemes and choose from there.

VSCodeThemes selection

2. Fonts

• Open VSCode, then press Ctrl + , to open the Settings tab.
• Search for font family and look for two settings: 1) Editor: Font Family and 2) Terminal > Integrated: Font Family.
• Change it to your preferred font (make sure you have Powerline installed, as detailed earlier).

Editing your VSCode Font Family settings

• Save and restart VSCode to check if it took effect.

3. VSCode keyboard shortcuts

• Scrap the mouse/trackpad. These shortcuts will save your life (and boost productivity and efficiency) once you get used to them 👍

4. Bonus: Some nifty extensions

We have favorite extensions we can’t live without. Here are some handy ones:

• GitLens — Visualize code authorship at a glance via Git blame annotations and code lens

GitLens

• Bracket Pair Colorizer — Allows matching brackets to be identified with colors
• indent-rainbow — Colorizes the indentation in front of your text alternating four different colors on each step

For JS/React devs, here’s an extension of the list:

• Prettier — VSCode package to format your JavaScript/TypeScript/CSS using Prettier
• ESLint — “Lints” JavaScript code, aka formats them according to style guidelines as well as analyzes them for code errors
• Simple React Snippets — Essential collection of React Snippets and commands

Simple React Snippets for React developers

No matter what language you use, always look for its linters and code snippet extensions!

That’s pretty much it! I hope this guide has inspired you to claim your workspace as your own and use quick wins that compound over time. After all, everyone wants to improve their own developer experience and daily quality of life — sometimes it’s hacking the little things that yield the biggest benefits.

Happy coding!