DEV Community: Hannah Gooding

How I customise my Terminal with Oh My Zsh (macOS)

Hannah Gooding — Fri, 30 Apr 2021 13:53:33 +0000

As a software engineer I use the command line every day. It's very important to me that the tool I stare at for hours looks nice and that I have a set up that saves me time and energy. I use the macOS default Terminal because that's what I used when I started learning to code and I'm loath to change (soz). The macOS Terminal is a ZSH terminal shell (aka Z shell) which runs on a Unix-like operating system (macOS, Linux, BSD, Windows/WSL2). This post will go through how I set mine up on my personal MacBook Air (2015) running Big Sur, your experience on a different operating system may differ but luckily Oh My Zsh is a very popular framework so there will probably be people on Stack Overflow/Reddit who have encountered the same issues!

Step 1: Downloading Oh My Zsh

Oh My Zsh is opensource framework for terminal configuration that has loads of themes and plugins.

You can download Oh My Zsh from their website via curl or wget by copying and pasting the command. Make sure you're in your system's root folder.

Step 2: Configuring the `.zshrc` file

The .zshrc file contains the script that is run when you start a new zsh shell (rc stands for "run commands"). So if you make changes to this file you have to start a new shell to see them take effect.

You can customise your terminal by running open ~/.zshrc to open the .zshrc file in your system's root folder (the ~ tilde symbol means home directory).

Note: if you're on macOS Catalina or above you may get the error zsh: permission denied: - you will need to configure permissions to open the file with chmod +x ~/.zshrc.

Step 3: Changing the Terminal theme

Choose your theme from the Oh My Zsh Themes and change the ZSH_THEME="" line in the .zshrc file.

I use the agnoster theme so I have ZSH_THEME="agnoster" in my .zshrc file.

When you run a new shell you should see it has a new theme - yay! But wait...what are all those questions marks? You need to download the fonts to see the cool symbols!

Step 4: Installing Powerline Fonts

Follow the instructions on the Powerline fonts README to download the fonts needed for your new theme.

Step 5: Changing your Terminal Fonts

Go to Preferences > Profiles > Font to change the font for your Terminal to any of the fonts that have Powerline in the name. I use Meslo LG L DZ Regular for Powerline. You can either change the Basic profile or make a new profile and make that your default profile.

Now the question marks should be replaced with cool symbols. The purple arrow indicates what directory you are in, and the green arrow indicates what branch you are on if you are in a git initiliased directory.

Step 6: Changing your colours

You can play around with the colours in the Terminal Profiles yourself but I would suggest going with a pre-made theme because they will have considered the constrast and readability of the colours in different scenarios. Here's a list of cool MacOS Terminal Themes.

I use the VS Code Dark Plus theme which looks like this:

You can download the .terminal file and go to your Terminal Preferences > Profiles and import it as a new profile. Then select Default to make it your default theme.

Now it looks beautiful! 💄 💅

Plugins

There's so many other things you can do with Oh My Zsh. Have a look at the plugins it comes bundled with. I use the aliases that come with the Git plugin every day. An alias is a shortcut for a command that you write instead of the command and it runs the command.

The Git aliases I use the most are:

Alias	Git Command
ggp	git push origin $(current_branch)
gcb	git checkout -b
gco	git checkout

Aliases

You can add your own custom aliases by adding them to your .zshrc file

The bottom of the file has the syntax for aliases in comments:



# Example aliases
# alias zshconfig="mate ~/.zshrc"

I have the command for editing my .zshrc file under the alias edit. I prefer editing the file in VS Code* so I have this in my file:
alias edit="code ~/.zshrc"

*The instructions to set up launching files in VS Code from the command line can be found here for macOS.

🎨 That's all! 🎉

Customising the Terminal is a great place to start personalising your tooling, apparently you can do even cooler things with iTerm2 and you can customise that in much the same way as I've outlined in this tutorial.

Group project tip: How to set up a Jira board and link it to your GitHub project

Hannah Gooding — Wed, 23 Sep 2020 16:10:27 +0000

During my web development bootcamp at Founders and Coders we built a new group project in a couple of days every week. We raised issues on our GitHub repositories, and then used the GitHub project kanban boards to visualise our issues into the default recommended columns: To Do, In Progress, Done.

As we moved to building bigger projects in longer sprints, we wanted to try out linking our GitHub repo to Jira instead because it has a lot more features out of the box like issue priority tags, time tracking and sprint points (note: GitHub has loads of marketplace tools that you can manually add on to your project boards instead, but it's always fun to play with new software).

Jira is a very popular tool for project tracking, not just in software engineering teams. In my previous life before becoming a programmer I worked in a photography studio for an e-commerce fashion brand and they used Jira to track the status of the product photos (whether they had been shot, retouched, etc.).

I've picked up that people seem to have a love/hate relationship with it, and it can be quite difficult to use as a beginner. When I set up my first Jira project I was overwhelmingly confused, but hopefully I can break it down for those who want to try it and become bosses at sprint planning!

Step One - Set up Jira project board

Set up your Jira account if you don't already have one.
On Jira, go to Projects > Create Project and select Classic Project.
Take note of the project key as this is what will link to your GitHub branches and issues.
Choose your project board template, I'd recommend Kanban for an open-ended project, or Scrum for fixed sprint planning. I'm going with Scrum for this tutorial.

Step Two - Set up GitHub integration

On Jira, go to Apps > Find New Apps and search for "Github for Jira".
Select Get app and once it is added successfully, select Get started.
Select Add organisation which will take you to your GitHub account.
If you don't see your organisation listed, select Install Jira where it says: "Don't see your account? Install Jira on your user account or an Organization you own.".
Install on all or only selected repositories.

Please see the docs for more details.

Step Three - Add your teammates on Jira

Go to People > View all people and teams and select Add People to add your teammates to your Jira site.

Step Four - Add issues on Jira

Now you can start logging your issues into your Backlog on Jira.
You can assign Priority arrows for each issue, and also Story Points and Original Estimate (time estimation).

Step Five - Sprint planning

Once you have logged all your issues you can select Create Sprint and start dragging the Backlog issues into the Sprint.
It will tell you at the bottom the points Estimate so you can keep track.

Step Six - Start the sprint!

When you select Start sprint you can configure the duration and start date.
Then you will be redirected to the project board where you can move issues across columns. This can now also be found when you navigate to Active Sprints.

Step 7 - Linking your GitHub branches and commit messages

Now you can start assigning issues to team members and start coding!
But wait, how do you link the branches you're working on and commits that you make? Well, remember the project key? That's why all my issues are named COOL-1, COOL-2, etc.
To link a branch to your Jira issue make sure the branch name starts with the Jira issue name, e.g. COOL-1_create_readme
To link your commits, start the commit message with the Jira issue number and then add your message

git commit -m "COOL-1 Create README file"

Step 8 - Log your time

You can keep track of your work by logging the time spent on each issue on Jira so you can review how well you estimated at the end of each sprint.

That's it for setting up a basic project! There are so many more features that Jira has to offer, but this was sufficient to take us through our group projects.

VS Code shortcuts and tricks that I wish I knew sooner

Hannah Gooding — Wed, 12 Aug 2020 09:01:43 +0000

Introduction

After teaching myself for a year I started coding full time when I joined the Founders and Coders web development bootcamp in March 2020. Two weeks into the course we went into lockdown in the UK and our cohort had to go remote for the remaining 16 weeks. Thanks to the collaborative power of the VS Code Live Share extension we were still able to pair program and go through the syllabus as planned, but one of the things we missed out on from not being in person was organically sharing the little tips and tricks that you would normally pick up from working next to each other.

You can watch someone demonstrate something while sharing their screen, but unless you see them typing on the keyboard you don't necessarily pick up on the key presses that could also save you seconds of your day! As a result there are a lot of nifty VS Code tricks that I have learned since starting my first role as a Full Stack Developer that I wish I had know during the course.

I compiled these into a talk for the next Founders and Coders cohort, entitled "Why The F*** Didn't I Know This Sooner?!", and I also wanted to share them here for those starting out on their own coding journeys.

VS Code shortcuts

Emmet gives you some default abbreviations for a range of file types including .html and .css which expand into useful code snippets. Emmet support is built into VS Code so it does not require downloading an extension.

HTML boilerplates

If you type ! into an html file in VS Code and then press enter, you get the following HTML skeleton:



<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

</body>
</html>

A lot of my frequently used HTML tags are missing from this boilerplate so I have configured my own.

I made !! into a custom shortcut for my VS Code editor that includes the <meta> tag for SEO, as well as the tags for for linking CSS stylesheets and JavaScript files, and a few other frequently used semantic tags.

To do this you need to navigate to Code > Preferences > User Snippets and search for 'html.json'. Then you add your custom snippets into this file.

I would recommend writing out the desired structure into an HTML file first, and then you can copy it into a tool like this to parse your HTML file into a JSON string with escaped characters to get the right indentation.

My html.json file looks like this:



{
  "HTML boilerplate": {
    "prefix": "!!",
    "body": [
      "<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n  <meta charset=\"UTF-8\">\r\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n  <meta name=\"description\" content=\"\">\r\n  <link rel=\"stylesheet\" type=\"text\/css\" href=\"styles.css\">\r\n  <title>Document<\/title>\r\n<\/head>\r\n<body>\r\n  <header>\r\n  <\/header>\r\n  <main>\r\n  <\/main>\r\n  <footer>\r\n  <\/footer>\r\n  <script src=\"scripts.js\"><\/script>\r\n<\/body>\r\n<\/html>"
    ],
    "description": "HTML boilerplate with custom tags"
  }
}

And the finished boilerplate looks like this:



<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="">
  <link rel="stylesheet" type="text/css" href="styles.css">
  <title>Document</title>
</head>
<body>
  <header>
  </header>
  <main>
  </main>
  <footer>
  </footer>
  <script src="scripts.js"></script>
</body>
</html>

HTML abbreviations

Sometimes you can spend longer learning to type out shortcuts than if you just manually typed the code. I personally don't find Emmet abbreviations a time saver for writing CSS, but some of the HTML abbreviations I find useful include:

Nested elements

The shortcut nav>ul>li creates:



<nav>
  <ul>
    <li></li>
  </ul>
</nav>

Multiple elements

The shortcut li*5 creates:



<li></li>
<li></li>
<li></li>
<li></li>
<li></li>

Tags with text

The shortcut a{Click Me} creates:



<a href="">Click Me</a>

Elements with multiple classes

The shortcut div.first-class.second-class creates:



<div class="first-class second-class"></div>

Elements with IDs

The shortcut div#main creates:



<div id="main"></div>

A full list of shortcuts for can be found on the Emmet Docs Cheat Sheet.

VS Code Source Control Tab

Using VS Code's built in Source Control feature, you can stage your files and write commit messages with the VS Code UI, rather than using the terminal.

What I like about this is:

You can stage particular files easily without having to type out the file path into your terminal.
You can format your commit messages more easily.
When you write a commit message, it warns you if you go over the "recommended" character count in a line.
If you are using the Live Share extension, your collaborator's co-authoring credentials appear (they have to be signed in with their GitHub account).

Useful VS Code extensions

Bracket Pair Colorizer 2

This extension colorizes matching opening and closing brackets in your code so you can scope your functions and statements at a glance.

Without extension:

With extension:

Edit: This article originally linked to Bracket Pair Colorizer v1, thank you to @indcoder for pointing out in the comments that there is a v2 out there which is faster and more accurate!

Relative File path

This extension gives you a shortcut for getting the relative filepath of another file from your current file. This is really helpful in a large codebase with lots of nested folders where you have a lot of imports and exports between files, for instance in a React.js project.

Use the shortcut to bring up the file search (Windows Ctrl+Shift+H, Mac Cmd+Shift+H):

Search for the file you want the relative path for:

The relative path will appear:

GitLens

This extension is Git supercharged for your editor with loads of features that I don't yet know how to use.

What I do use it for is the Git blame feature, which annotates the most recent commit history for each line in your files. This is especially useful when working on a group project so you can see at a glance when the last changes were made, who made them, and the relevant commit message.

Prettier

Prettier is a lifesaver because it automatically formats your code! You can download it as an extension on VS Code, and it will run your settings that you configure in the application (go to Settings and search for 'Prettier').

To format your current file, right click and select Format Document, or to turn on automatic formatting when you save your files go to Settings and search for 'format on save' and tick the checkbox.

It's a good idea to have a .prettierrc config file in the root folder of your group projects where you specify how many spaces you want for intentation, single or double quotes, whether all lines should finish with a semi-colon, etc.

The config file overrides your local VS Code Prettier settings so everyone on the team will have the same formatting rules applied to their code - avoiding nasty conflicts!

I use this Prettier Config Generator to generate the JSON for the file, and the Prettier docs explain more about what each of the format options mean.

The following JSON in a .prettierrc file:



{
    "printWidth": 80,
    "tabWidth": 2,
    "useTabs": false,
    "semi": true,
    "singleQuote": false
}

Reformats this:

Into this, with consistent spacing, an average line width of roughly 80 characters, 2 spaces for indentation and not tabs, semicolons printed at the end of every statement, and double quotes instead of single quotes:

This is just an example to demonstrate the formatting changes Prettier applies, and is not a recommendation of code style. Most of the time you won't have to play around with the settings too much and you can go with the basic config to keep your codebase consistent, or when you start working as a developer your company will already have a "house style".