# Why The F**k Didn't I Know This Sooner?! By Hannah Gooding ## Contact Me - FAC Slack - Email: hannah.gooding@yahoo.com - Twitter: @hannahwsgooding --- ## Pimp My Terminal - ZSH terminal shell (aka Z shell) runs on Unix-like operating system: macOS, Linux, BSD, Windows: WSL2 is preferred - You can download [Oh My Zsh](https://ohmyz.sh/), an opensource framework for terminal configuration - You can customise the look of your CLI with themes, I use [agnoster](https://github.com/ohmyzsh/ohmyzsh/wiki/Themes#agnoster) which shows the git branch you're on - You can use plugins, it ships with the [git plugin](https://github.com/ohmyzsh/ohmyzsh/tree/master/plugins/git) which gives you cool shortcuts for git commands --- ## Emmet in VS Code - Shortcut support built into VS Code - no extension required ### HTML Boilerplates - `!` is a built-in Emmet shortcut that brings up a basic HTML boilerplate - Doesn't have: - `<meta name="description" content="">` meta description for SEO - `<link rel="stylesheet" type="text/css" href="styles.css">` for linking CSS stylesheets - `<script src="scripts.js"></script>` for linking JavaScript files ### Custom Shortcuts - I made `!!` into a custom shortcut for my VS Code editor that includes these tags and a few other frequently used semantic tags - To configure: - Code > Preferences > User Snippets > html.json - Add snippets into this file - There are comments in the file (and docs) that explain in more detail, but the JSON structure means this: ```json { "Shortcut name": { "prefix": "shortcut keystrokes", "body": [ "<code goes here>" ], "description": "Shortcut description" } } ``` - To parse your HTML file into a JSON string with escaped characters you can use a tool like [this](https://www.freeformatter.com/json-escape.html) - My `html.json` file: ```json { "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" } } ``` ### Elements with children - The shortcut `nav>ul>li` creates: ```htmlembedded <nav> <ul> <li></li> </ul> </nav> ``` ### Multiple elements - The shortcut `li*5` creates: ```htmlembedded <li></li> <li></li> <li></li> <li></li> <li></li> ``` ### HTML abbrevations - The shortcut `a{Click Me}` creates: ```htmlembedded <a href="">Click Me</a> ``` --- ## Useful VS Code extensions ### Bracket Pair Colorizer - Colorize matching brackets so you can scope functions at a glance ### Relative File path - Shortcut for getting the relative filepath of another file from your current file - Windows `Ctrl+Shift+H` - Mac `Cmd+Shift+H` ### GitLens - Shows commit history for each line in your files - It shows Git history information on the extension dashboard, it's [Git supercharged](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)! ### Source Control Tab (in-built you do not need to download) - You can stage your files and write commit messages in VS Code rather than using the terminal - It tells you the character count if you go over the "recommended" amount in a line - If you are using the Live Share extension, your collaborators co-authoring credentials appear (they have to be signed in with their GitHub account) --- ## Prettier - 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 - To format the current file, right click and select `Format Document` - To turn on automatic formatting go to Settings and search for `format on save` - It's a good idea to have a `.prettierrc` config file in the root folder of your projects where you specify how many spaces you want for intentation, single or double quotes, 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! --- ## Resources ### Oh My Zsh [Oh My Zsh Docs](https://github.com/ohmyzsh/ohmyzsh) [Git Shortcut Cheat Sheet](https://kapeli.com/cheat_sheets/Oh-My-Zsh_Git.docset/Contents/Resources/Documents/index) ### VS Code Emmet [Emmet Cheat Sheet](https://docs.emmet.io/cheat-sheet/) ### Git Commits [How to Write a Git Commit Message](https://chris.beams.io/posts/git-commit/) ### Prettier [Prettier Config Generator](https://michelelarson.com/prettier-config/)