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

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
nano ~/.zshrc## Look for this environment variable...
ZSH_THEME="robbyrussell"
## ...then change it to your preferred one
ZSH_THEME="agnoster"
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

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!

--

--

--

Web Design & Development • Tech Careers

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

From Human-Defined to Software-Defined Data Integration — Part III, Data Pipelines

Transitioning iOS 10 layouts to the iOS 11 SDK

These Are The Best Platforms To Recover Information From The Internet

Get Tungsten Rates With An API

7 Useful Tips and Tricks for Xcode

Codable — 4 Ways to Improve How You Decode JSON

My Journey as a Software Engineer

Automate generating an Avro Schema from a Spark Dataframe

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Caye Borreo

Caye Borreo

Web Design & Development • Tech Careers

More from Medium

Git : For starters

Git official logo

My VSCode Setup

How to Start a New Git Repository

The tutorial of developing a vscode plugin/extension(2)