Prettier

Daily Standup

October 26, 2018

Today I added Prettier to the value app. Having a defined style for the code in this project simplifies merging code from contributors…either it matches the style or it doesn’t!

Adding Prettier To An Existing Project

I initially started this while reading this freeCodeCamp Medium article—it has a good overview and I’d follow most of the steps listed there again in the future. But looking through the docs, I saw some of the steps could be amended slightly:

  • Add the npm package with npm install --save-dev --save-exact prettier: this uses the new syntax for adding dev dependencies, and locks in the specific version against future stylistic changes made by Prettier.
  • Include single quotes around the path that tells prettier which files to check (i.e. '**/*.js' instead of **/*.js). Without the quotes it only checked files contained in a single parent folder; with the quotes it checked root level files as well as grandchild files (see glob syntax).
  • Add multiple file types for Prettier to check by putting the file extensions inside an object (i.e. '**/*.{js,css}').
  • Use the -l command to see which files will be changed before running Prettier to change any files!! My first script looked like this: "prettier": "prettier -l '**/*.{js,css}'".
  • After running the -l command (or npm run prettier to be precise), if there are any files you don’t want Prettier to change create a .prettierignore file in the root directory and copy/paste those file paths into this file.

IMPORTANT: Commit before running prettier!

Actually Running The Module

Once the setup is done, I edited the prettier script to replace -l with --write, which tells Prettier to actually change the files to match your syntax requirements. This is why committing first is important!

Then I ran npm run prettier…and the magic happened! It outputs a list of files that were changed. You can run git diff path/to/file.js to see what it actually has changed. For me the result was pretty great! It changed a scary number of files but looking through the actual changes, not many lines of code at all were changed. And the changes were great!

Adding Prettier to Workflow

There are some pre-commit hooks available which will run Prettier automatically before committing code. Since I’m still learning (and also have plans to add a linter in future), I decided to keep it manual for now.

So I added an additional script that I can run to check which files will be changed:

"prettier-test": "prettier -l '**/*.{js,css}'",

I also added a dev script that will run Prettier locally when I test changes to the app:

"dev": "prettier --write '**/*.{js,css}' && nodemon app.js",

I know that this isn’t ideal since it adds (probably unnecessary) manual steps for contributors, but one step at a time!

Other Stuff

I’ve been in NY this week and got a warning of gale force winds at the exact time my flight was due to take off! Rather than getting stuck for who knows how long in an airport (and possibly experiencing a scary take off as well!) I’ll leave a day earlier…so this long trip will come to a close sooner than expected!

Tags icon Stacked price tag looking things Tags: