How To Install Prettier

Prerequisites

install Prettier as a development dependency:

pnpm install --save-dev prettier

You'll see the following output:

+ prettier@2.x.x
added 1 package from 1 contributor and audited 1 package in 2s
found 0 vulnerabilities

touch .prettierignore

Create a prettier.config.js file in the root of your project:

touch prettier.config.js

Open prettier.config.js in your code editor and add the following configuration:

module.exports = require.resolve('@kurocado-studio/style-guide/prettier');

To simplify the formatting process, add a script to your package.json. Open package.json and add the following under the "scripts" section:

"scripts": {
  "prettier-check": "prettier --check .",
  "prettier-fix": "prettier --check . --write",
}

This script tells Prettier to format all files within the src directory.

Run the format script to automatically format your code:

pnpm run prettier-fix

You'll see output similar to:

src/index.js 50ms
src/components/App.jsx 30ms
✨  Done in 1.50s.

To enhance your workflow, integrate Prettier with your code editor to format code on save.

Install the Prettier Extension:
- Open VS Code.
- Go to the Extensions view by clicking the square icon in the sidebar or pressing CTRL+SHIFT+X.
- Search for "Prettier - Code formatter" and install it.
Configure VS Code to Use Prettier:
- Open your VS Code settings (CTRL+,).
- Search for "Format On Save" and enable it by checking the box.
- Set Prettier as the default formatter by adding the following to your settings.json:
  { "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.formatOnSave": true }

Last modified: 23 October 2024