Beautifying and setting up local workflow

localSetup.md

These are my workflow settings. Most information is included in here. If you run into any trouble setting this up, please ping me directly!

---

• Make sure you are running on node version v10.16 and npm version 6.9
• You can check to see if you are by pasting into your terminal

node -v && npm -v

---

1. Download and install vscode: https://go.microsoft.com/fwlink/?LinkID=620882
2. Open up VS Code and copy and paste this in your terminal and hit enter/return CONTROL + ~ (it is actually the ` symbol but, markdown)

code --install-extension alefragnani.project-manager \
code --install-extension atlassian.atlascode \
code --install-extension be5invis.vscode-custom-css \
code --install-extension be5invis.vscode-icontheme-nomo-dark \
code --install-extension BriteSnow.vscode-toggle-quotes \
code --install-extension christian-kohler.npm-intellisense \
code --install-extension christian-kohler.path-intellisense \
code --install-extension codezombiech.gitignore \
code --install-extension CoenraadS.bracket-pair-colorizer \
code --install-extension cssho.vscode-svgviewer \
code --install-extension dbaeumer.vscode-eslint \
code --install-extension donjayamanne.git-extension-pack \
code --install-extension donjayamanne.githistory \
code --install-extension dsznajder.es7-react-js-snippets \
code --install-extension eamodio.gitlens \
code --install-extension eg2.tslint \
code --install-extension eg2.vscode-npm-script \
code --install-extension Equinusocio.vsc-material-theme \
code --install-extension esbenp.prettier-vscode \
code --install-extension formulahendry.auto-close-tag \
code --install-extension jasonnutter.search-node-modules \
code --install-extension jpoissonnier.vscode-styled-components \
code --install-extension kumar-harsh.graphql-for-vscode \
code --install-extension mikestead.dotenv \
code --install-extension OfHumanBondage.react-proptypes-intellisense \
code --install-extension planbcoding.vscode-react-refactor \
code --install-extension redhat.vscode-yaml \
code --install-extension robinbentley.sass-indented \
code --install-extension Shan.code-settings-sync \
code --install-extension shardulm94.trailing-spaces \
code --install-extension suming.react-proptypes-generate \
code --install-extension whatwedo.twig \
code --install-extension wix.vscode-import-cost \
code --install-extension ziyasal.vscode-open-in-github

3. Open up VS Code and hit CMD + SHIFT + P and then type in “Open Settings” and select the one that has (JSON) in the end.
4. Replace the contents of that file with these settings:

{
    "workbench.startupEditor": "none",
    "editor.insertSpaces": false,
    "editor.scrollBeyondLastLine": false,
    "editor.cursorBlinking": "solid",
    "workbench.editor.labelFormat": "medium",
    "workbench.editor.openPositioning": "last",
    "workbench.editor.closeOnFileDelete": false,
    "workbench.iconTheme": "eq-material-theme-icons-palenight",
    "window.restoreWindows": "all",
    "files.trimTrailingWhitespace": true,
    "files.insertFinalNewline": true,
    "files.trimFinalNewlines": true,
    "files.hotExit": "onExitAndWindowClose",
    "explorer.sortOrder": "default",
    "explorer.decorations.colors": true,
    "explorer.decorations.badges": true,
    "terminal.external.osxExec": "hyper.app",
    "npm.packageManager": "yarn",
    "workbench.colorTheme": "Material Theme Palenight High Contrast",
    "gulp.autoDetect": "off",
    "window.zoomLevel": 0,
    "editor.fontFamily": "Dank Mono, Menlo, Monaco, 'Courier New', monospace",
    "editor.fontWeight": "400",
    "editor.cursorStyle": "underline-thin",
    "editor.renderWhitespace": "all",
    "workbench.commandPalette.history": 200,
    "gitlens.advanced.messages": {
        "suppressShowKeyBindingsNotice": true,
        "suppressResultsExplorerNotice": true,
        "suppressWelcomeNotice": true
    },
    "gitlens.blame.avatars": false,
    "gitlens.blame.format": "${author} - ${message|40?} ${ago|14-}",
    "sync.removeExtensions": true,
    "sync.syncExtensions": true,
    "gitlens.keymap": "none",
    "editor.fontLigatures": true,
    "editor.fontSize": 13,
    "workbench.fontAliasing": "antialiased",
    "eslint.packageManager": "yarn",
    "eslint.run": "onSave",
    "eslint.alwaysShowStatus": true,
    "bracketPairColorizer.colorMode": "Independent",
    "bracketPairColorizer.forceUniqueOpeningColor": true,
    "editor.matchBrackets": false,
    "bracketPairColorizer.highlightActiveScope": true,
    "bracketPairColorizer.showBracketsInGutter": true,
    "gitlens.views.repositories.files.layout": "auto",
    "terminal.integrated.rendererType": "dom",
    "eslint.autoFixOnSave": true,
    "javascript.updateImportsOnFileMove.enabled": "always",
    "projectManager.openInNewWindowWhenClickingInStatusBar": true,
    "workbench.sideBar.location": "right",
    "extensions.ignoreRecommendations": false,
}

7. Save that file and restart VScode

8. Please install Antibody, this is used to manage zsh plugins: brew install getantibody/tap/antibody

9. Copy and paste this into your terminal:

echo "robbyrussell/oh-my-zsh path:plugins/git
robbyrussell/oh-my-zsh path:plugins/colored-man-pages
robbyrussell/oh-my-zsh path:plugins/colorize
robbyrussell/oh-my-zsh path:plugins/github
robbyrussell/oh-my-zsh path:plugins/pip
robbyrussell/oh-my-zsh path:plugins/brew
robbyrussell/oh-my-zsh path:plugins/osx

gerges/oh-my-zsh-jira-plus

zsh-users/zsh-syntax-highlighting
zsh-users/zsh-autosuggestions
zsh-users/zsh-completions

# Theme
mafredri/zsh-async
sindresorhus/pure" >> ~/.zsh_plugins.txt

11. Open up your .zshrc settings by typing code ~/.zshrc
12. Replace the contents of the file with:

ZSH_THEME=""
DEFAULT_USER="artemartemov"

###################################################
# Please refer to the FRE local dev setup on how to
# obtain a GITHUB_TOKEN number
# export GITHUB_TOKEN=token-number
###################################################

export ZSH=/Users/artemartemov/.oh-my-zsh

source <(antibody init)
source ~/.zsh_plugins.sh
source $ZSH/oh-my-zsh.sh

antibody bundle < ~/.zsh_plugins.txt > ~/.zsh_plugins.sh

export PATH="/usr/local/sbin:$PATH"
export PATH="/usr/local/opt/node@10/bin:$PATH"

# Completion
setopt auto_menu
setopt always_to_end
setopt complete_in_word
unsetopt flow_control
unsetopt menu_complete
zstyle ':completion:*:*:*:*:*' menu select
zstyle ':completion:*' matcher-list 'm:{a-zA-Z-_}={A-Za-z_-}' 'r:|=*' 'l:|=* r:|=*'
zstyle ':completion::complete:*' use-cache 1
zstyle ':completion::complete:*' cache-path $ZSH_CACHE_DIR
zstyle ':completion:*' list-colors ''
zstyle ':completion:*:*:kill:*:processes' list-colors '=(#b) #([0-9]#) ([0-9a-z-]#)*=01;34=0=01'

fpath=(/usr/local/share/zsh-completions $fpath)

######### ALIAS #########

# Bash Reload
alias sourcez="source ~/.zshrc"

# Docker, Dinghy, DM Shortnames
alias doc="docker"
alias dm="docker-machine"
alias dc="docker-compose"

# IP, VM Status & Containers
alias dmls="dm ls"
alias dps="doc ps"
alias dpsa='doc ps -a'

### HISTORY ###
[ -z "$HISTFILE" ] && HISTFILE="$HOME/.zsh_history"
HISTSIZE=50000
SAVEHIST=10000
setopt extended_history
setopt hist_expire_dups_first
setopt hist_ignore_dups
setopt hist_ignore_space
setopt inc_append_history
setopt share_history

NOTE Please make sure to replace all of the instances of artemartemov with your computers username!!! You can check to see what your username is by typing in your terminal: whoami

13. Change your default shell:

chsh -s $(which zsh)

14. Make sure that you change your default shell in vscode as well,
    • COMMAND + SHIFT + P and type in Select Default Shell
    • Using your keyboard arrow keys, scroll down to zsh and hit Enter/Return
    • Restart VSCode
    • Run Antigen Bundle: antibody bundle < ~/.zsh_plugins.txt > ~/.zsh_plugins.sh
    • You may need to restart VSCode one more time to see the changes take effect.
15. You should now see your terminal have a slightly nicer style than before :)
16. I am using Dank Mono as my font in Vscode, I purchased it a while back but I will send the file so you have it also. Please install that for the font in vscode to look nice — ping me if I haven’t sent it over!