Most of my coding a few years back consisted of the following actions -
- Type slowly
- Type (a lot of) mistakes
- Use spaces and tabs to format. Get confused about loops and add ad-hoc spaces and tabs
- Curse my typing skills and the soul who invented spaces and tabs
While formatting code was also becoming an interim ‘thought provoker’, it was simply too much typing.
Although my typing is only half as bad, I now have far less stuff to worry about.
- Type in any way I want - yes, even type entire program in one line if I am feeling particularly stupid
- Save file
- Prettier formats code to add spaces and tabs
- Prettier adds stuff that I am lazy to type - (e.g. missing semicolons
- Changes stuff that I don’t do myself - e.g. change single quotes to double quotes
- If the formatting does not happen correctly, I look for coding errors (typically a missing/misplaced bracket)
The savings from all the avoided actions (despite my poor typing) amounts to 1.618 hours a day. That is thousands of hours in my life that can be invested in coding ‘hello worlds’ in new programming languages.
Once you start using Prettier ** you will never go back **. Do that first if you have not done that and come back here.
Following are the ‘Prettier’ settings that I find useful in VS Code (Ctrl + Shift + P > Type ‘prettier’ to search for related settings).
- Editor: Format On Save => True
Prettier is not that useful if you don’t see it in action - at.every.save.
- Prettier: Eslint Integration => True
Get ESLint to do its thing. Fall back to prettier if there are no ESLint rules. This is mondo useful in languages that are packed with community ESLint rules. I cannot quite hold everyone accountable for the superior practices that I follow. It is far easier to deploy ESLint (or any supported linting) to the development/deployment workflow to make sure every coder follows the same standards. The above flag takes care of any conflicts by using ESLint first and falling back to Prettier if there are no rules.
- Prettier: Jsx Bracket Same Line => True
JSX has a lot of ‘>’ and it is annoying if that is moved to the next line. Keep JSX clean.
- Prettier: Semi => True
Use semicolons. Don’t believe the evil people who say otherwise.
- Prettier: Tslint Integration => True Similar to the first item on ESLint described earlier, but for TypeScript. Get TSLint to format, and kick into action for stuff that don’t have any TSLint rules.
PS: Yep - the 1.618 is a random number that represents Golden ratio. Did you really think I can ever be so focused on improvements?