# Hackspace - Qubit ## 18.11.2021 --- ## How I customise my Terminal --- - ==`Oh My Zsh`== is opensource framework for terminal configuration that has loads of themes and plugins. --- ****Step 1: Download**** You can download Oh My Zsh from their [website](https://ohmyz.sh/) 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). --- <p><strong>PS:</strong> if you're on macOS Catalina or above you may get the <span style="color:red"><em>error zsh: permission denied:</em> text</span> - you will need to configure permissions to open the file with <span style="color:green">`chmod +x ~/.zshrc.`</p> --- ****Step 3: Changing the Terminal theme**** --- Choose your theme from the [Oh My Zsh Themes](https://github.com/ohmyzsh/ohmyzsh/wiki/Themes) and change the ZSH_THEME=" " line in the `.zshrc` file. --- ****Step 4: Installing Powerline Fonts**** --- Follow the instructions on the [Powerline fonts README](https://github.com/powerline/fonts) to download the fonts needed for your new theme. --- ****Step 5: Changing your Terminal Fonts**** --- Go to `Preferences > Profiles > Text > 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. --- ****Step 6: Changing your colours**** --- You can play around with the colours in the Terminal Profiles yourself or use pre-made themes (suggested for contrast and readability purposes ) [MacOS Terminal Themes](https://github.com/lysyi3m/macos-terminal-themes) --- ****Plugins**** --- There's so many other things you can do with Oh My Zsh. Have a look at the [plugins](https://github.com/ohmyzsh/ohmyzsh/wiki/Plugins) it comes bundled with. I use the *aliases* that come with the [Git plugin](https://github.com/ohmyzsh/ohmyzsh/tree/master/plugins/git) every day. PS: 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 | | ----- | --------------- | | gcb | git checkout -b | | gst | git status | | gco | git checkout | | gp | git push | [...etc](https://jonsuh.com/blog/git-command-line-shortcuts/) --- You can add your own custom aliases by adding them to your `.zshrc` file  --- ****VS Code shortcuts and tricks**** --- [Emmet](https://code.visualstudio.com/docs/editor/emmet) comes with VS Code by default but you need to add a small tweak to it. --- React tweak for autocomplete: :star: Open any source folder on VS Code, and go to `Settings and open JSON folder.` Add > ``` > "emmet.includeLanguages": { > "javascript":"javascriptreact" > } and hit save. > ``` ***PS:** restart VS Code if it's not working.* --- ****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>` --- Full list of shortcuts [Emmet Docs Cheat Sheet](https://docs.emmet.io/cheat-sheet/) --- Useful VS Code Extensions --- [Bracket Pair Colorizer 2](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2) - This extension colorizes matching opening and closing brackets <div> <img src='https://i.imgur.com/pUzV5Bn.png' alt='' width=300 height=170 style=margin-right:10px/> <img src='https://i.imgur.com/ilproVt.png' alt='' width=300 height=170 /> </div> --- [GitLens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens) - I do use it for is the Git blame feature, which annotates the most recent commit history for each line in your files. <img src='https://i.imgur.com/VrucUyq.png' alt='' width=400 height=200 /> --- [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) is a lifesaver because it automatically formats your code! 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. --- <img src="https://media.giphy.com/media/xUPOqo6E1XvWXwlCyQ/giphy.gif" height=400 /> ---