team-dang-productivity

A little repo with some handy productivity saving configuration and tools for working on Lob's Vue repos.

Mac apps

• Rectangle - Move and resize windows in macOS using keyboard shortcuts or snap areas. Makes putting windows side by side on your screen so easy! The recommended settings are great.

Editor

VSCode is my personal IDE of choice. This repo assumes that you are using that IDE. If you're not, that's cool! All IDEs are welcome, I just know VSCode best and can offer tips and tricks for it 🤗

I also recommend, installing the shell command for VSCode so that you can use code in your shell to open a directory.

Extensions

General

• Vetur: Vue tooling for VS Code.
• Bracket Pair Colorizer 2: This extension allows matching brackets to be identified with colours. The user can define which tokens to match, and which colours to use.
• Peacock: Subtly change the color of your Visual Studio Code workspace. Ideal when you have multiple VS Code instances, use VS Live Share, or use VS Code's Remote features, and you want to quickly identify your editor.
• Auto Rename Tag: Automatically rename paired HTML/XML tag, same as Visual Studio IDE does.

Testing

• Switch to test: This extension will open the coresponding test file for the opened source file. If the file does not exist, it will create a new one.

Linting

• ESLint: Integrates ESLint into VS Code.

Settings

Please see settings.json for info on how to configure these extensions for productivity.

• Auto save files when you blur or navigate away from them
• Custom colors for matching brackets, parentheses, etc (choose your own colors!)
• Lint and autoformat files on save (this is the bulk of the settings in this file)
• Auto create *.spec.js files in the correct location when you use the createTest command (Cmd + Shift + P > Create test or you can set up a custom keyboard shortcut)

Snippets

Code snippets are templates that make it easier to enter repeating code patterns, such as loops or conditional-statements.

To add new snippets, go to Code > Preferences > User snippets and then choose the language and file type you want this snippet available in.

Below you'll find my most used snippets for DANG projects.

Vue

• Component: boilerplate for a Vue component that is available when you start typing component
• Spec: boilerplate for a spec file for a Vue component that is available when you start typing spec
• Story: boilerplat for a Storybook story for a Vue component that is available when you start typing story

Javascript

• Debugging snippets
  • db will get you a debugger statement
  • log will get you a console log with your cursor ready to start typing your label and output
• Jest snippets
  • describe will get you a jest describe block with your cursor ready to start typing your it blocks
  • it will get you a jest it block with your cursor ready to start typing your assertions
  • before will get you a jest beforeEach block with your cursor ready to start typing your setup code

Aliases

• Delete squash and merged branches to keep git branch clean (name the alias whatever you want)
  • alias gsqclean='git checkout -q main && git for-each-ref refs/heads/ "--format=%(refname:short)" | while read branch; do mergeBase=$(git merge-base main $branch) && [[ $(git cherry main $(git commit-tree $(git rev-parse $branch^{tree}) -p $mergeBase -m _)) == "-"* ]] && git branch -D $branch; done'
• Avoid typing npm run a million times
  • alias nr="npm run"
• Start storybook nice & quick
  • alias sb="npm run storybook"

Terminal

• Install git-completion.bash to get autocomplete for git branches