Featured image for TWIL blog post showcasing a command-line tip with Prettified Prettier Alias to enhance code formatting efficiency.

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).

  • Bash
  • Shell
  • Tools
Katie Linero's profile picture
Katie Linero

Senior Software Engineer

Related Posts

Featured image for TWIL blog post illustrating dynamic CSS property updates with HTML integration for smarter, JavaScript-free styling.
March 23, 2023 • Frank Valcarcel

TWIL 2023-03-17

Discover micro learning with TWIL: Dive into CSS dynamic values as Katie showcases how HTML and CSS coalesce for smart styling without JavaScript.

A screenshot of Ruby code featuring the #presence method, with text highlighting how it simplifies identifying `nil` values.
November 17, 2022 • Frank Valcarcel

TWIL 2022-11-11

Discover micro learning with TWIL: This week, join Katie’s quick lesson on Ruby’s #presence method — a tool for cleaner code that easily handles nil values.