Prettier is a JavaScript-based code formatter with
support for many languages.

dprint is a Rust-based code formatting platform that
formats code with formatting plugins including a Prettier plugin.

Overview

Many developers often run a step to verify their code has been formatted with an
automated code formatter like Prettier.

In this post, we’ll speed up Prettier’s format checking of a TypeScript codebase
from ~40s to under 1s on the second run.

Previous Prettier setup

Say we have a Node-based repo with about 520 TypScript files in the src folder
for a total size of 16MB. This repo has a package.json with Prettier installed
that verifies formatting. It looks similar to the following:

{
  
  "scripts": {
    "fmt-check": "prettier --check --end-of-line lf "src/**/*.ts""
  },
  "devDependencies": {
    "prettier": "^2.6.2"
  }
}

Verification is run by executing the fmt-check script:

npm run fmt-check

Our GitHub actions CI executes the following steps:

steps:
  
- uses: actions/checkout@v3
  
- uses: actions/setup-node@v3
  with:
    node-version: '16'
  
- name: Cache
  uses: actions/cache@v3
  with:
    path: |
      ~/.npm
    key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
  
- run: npm ci
  
- name: prettier
  run: npm run fmt-check

When running this on our CI, the “prettier” step takes about 41s.

Switching to dprint

We can speed this up by using dprint as our code formatting CLI with the
dprint-plugin-prettier
plugin.

CLI setup

To begin, run the following commands in the root directory of the project:

npm install --save-dev dprint

npx dprint init 

npx dprint config add dprint/dprint-plugin-prettier

A dprint.json file will have been created with the Prettier plugin specified:

{
  "includes": ["**/*.*"],
  "excludes": [],
  "plugins": [
    "https://plugins.dprint.dev/prettier-0.7.0.json@4e846f43b32981258cef5095b3d732522947592e090ef52333801f9d6e8adb33"
  ]
}

For this example, update the includes glob to only have the src directory
and match the extensions Prettier supports that you use in your project. In this
case, I’m only interested in formatting ts files, but in your case you may
specify any of the file extensions Prettier supp