TWIL 2023-07-28

Welcome to TWIL, our weekly tech scribe that encapsulates the essence of continuous learning in the software domain. This installment sees Katie enhancing our command-line efficiency with her Prettified Prettier Alias, where the tidying of code across various file types is a single command. She elevates the use of tools like Prettier, paving the way for a smoother development workflow that's both productive and precise.

Prettified prettier alias

prettify()
{
    if [ "$#" -eq 0 ]; then
        prettier -l '**/*.{vue,js,css,html}' | xargs prettier -w
    else
        prettier -l '**/*.{vue,js,css,html}' | grep "$1" | xargs prettier -w
    fi
}

Instead of a flow something like:

$ prettier --check '**/*.{vue,js,css,html}'
> Checking formatting...
> [warn] src/components/WhateverFile.vue
> [warn] src/views/AnotherFile.vue
> [warn] Code style issues found in the above file. Forgot to run Prettier?

$ prettier -w src/components/WhateverFile.vue
> src/components/WhateverFile.vue 367ms
$ prettier -w src/views/AnotherFile.vue
> src/views/AnotherFile.vue 340ms

…which can be tedious for multiple files (but I still prefer over blanket updating all possible files with unregulated -w usage), now I can:

$ prettify
> src/components/WhateverFile.vue 367ms
> src/views/AnotherFile.vue 340ms

…or even just target specific directories/files(/whatever grep-able condition I want):

$ prettify src/components
> src/components/WhateverFile.vue 367ms

I prefer this approach because it allows me to see which files are changing, and/or to only target specific files or directories (e.g., if I’m committing a bunch of changes in smaller batches but still want to review the prettier diffs for learning purposes).

Katie Linero

Senior Software Engineer