Home

Front end developer set up

Visual Code extensions

From a command window, run the following

code --install-extension dbaeumer.vscode-eslint
code --install-extension streetsidesoftware.code-spell-checker
code --install-extension esbenp.prettier-vscode
code --install-extension wayou.vscode-todo-highlight
code --install-extension eamodio.gitlens
code --install-extension paulmolluzzo.convert-css-in-js
code --install-extension mikestead.dotenv
code --install-extension ritwickdey.LiveServer
code --list-extensions

Chrome extensions

React

• React DevTools
• Redux DevTools

Angular

• Angular DevTools

Security

• CSP Evaluator

Accessibility

• WAVE Evaluation Tool
• axe DevTools
• Taba11y

Misc

• webhint - includes cross browser compatibility check
• locale switcher
• Dimensions
• Source Map Explorer

Accessibility tools

• NVDA
• JAWS
• Colour Contrast Analyser

Developer Tools

• Fiddler Everywhere

Performance

• webpack-bundle-analyzer
• source-map-explorer

Terminal configuration

• Bash: Oh My Bash
• Zsh: Oh my Zsh
• Windows: Windows terminal + Oh My Posh

Git config

# create git aliases
git config --global alias.pushf   'push --force-with-lease'
git config --global alias.logp    'log --pretty="%h   %cn   %s"'
git config --global alias.last    'log -1 HEAD --stat'
git config --global alias.cherryp 'cherry-pick --no-commit'
git config --global alias.logpd   'log --pretty=format:"%h %ad %s" --date=format:"%Y-%m-%d"'

# list all aliases
git config --get-regexp alias