Install Prettier

Prettier is a popular code formatter that enforces a consistent style across your codebase by parsing it and reprinting it with its own rules. It supports many programming languages and integrates seamlessly with editors, linting tools, and version control systems. Prettier helps reduce debates over code style and improves code readability and maintainability.

1. Quick start

1.1 Install Prettier for Next.js project

Use Yarn

bash
yarn add --dev prettier

or use NPM

bash
npm install --save-dev prettier

After install prettier, we need create some config files:

Create a new file .prettierrc.js

js
module.exports = {
  trailingComma: "all",
  tabWidth: 2,
  printWidth: 80,
  semi: true,
  singleQuote: false,
  endOfLine: "auto",
  bracketSameLine: false,
  bracketSpacing: true,
  useTabs: false,
};

Create a new file .prettierignore

markup
/node*modules
/coverage
/.netlify/
/.next/
/.vscode/
/out/
/build
*.pem
npm-debug.log\_
yarn-debug.log*
yarn-error.log*
.cache
.env.local
.env.development.local
.env.test.local
.env.production.local
.vercel
package-lock.json
.eslintcache
\*.md
.generators

1.2 Install the Prettier extension in VS Code

Next, we need to install the Prettier extension in VS Code to recognize the two files above and format the source code based on them.

Click on the Extension button on left navigation on the VS code, after that search "prettier", then install Pretiter:

Now you just setup some config on the VS code settings:

Open the VS code settings by short key:

• On Window/Linux: ctrl + ,
• On macOS: Cmd + ,

After that, search "format":

Ensure you choose Default formatter is Prettier, and you can choose the Format on save, I feel this feature is very convenient.

After 2 steps above, please close and reopent the VS Code. After that, open any files in source, you can use the VS Code format short key or can save this file, the file will be formatted base on the Prettier config files.

2. Show error when Prettier format invalid

After quick start steps, we can format source code by VS Code short key, but we want show all Prettier format error in code file, it is very useful for coder see the format invalid.

For to do that, add the eslint prettier config and plugin:

Use Yarn:

bash
yarn add --dev eslint-plugin-prettier eslint-config-prettier

or use NPM:

bash
npm install --save-dev eslint-plugin-prettier eslint-config-prettier

Update the eslint config eslint.config.mjs:

js
import prettierConfig from "eslint-config-prettier";
import eslintPluginPrettier from "eslint-plugin-prettier";

const eslintConfig = [
  {
    plugins: {
      prettier: eslintPluginPrettier,
    },
    rules: {
      "prettier/prettier": ["error", { endOfLine: "auto" }],
    },
  },
  prettierConfig,
];

Now, you need close and reopen the VS Code. After that, we can see all the invalid format in each of source code files.

3. Format all source code automatically

After install prettier, create the command to format all your source. Please add this line below into scrips section in package.json:

json
"scripts": {
  "format": "prettier --write . --config ./.prettierrc.js",
  "format-check": "prettier --check .",
}

• yarn format: is used for forming, Prettier will check and auto fix all format issues
• yarn format-check: is used only for checking, not auto fix

Now we can run this command (on terminal) for formatting all source codes:

bash
yarn format

The outputs:

You can use 2 commands to check code formatting before pushing changes or integrate it into your pipelines for PR reviews.

• Used for pre-commit
• Used for pipelines