Effortless Code Formatting: Setting Up Prettier with Next.js 13

In the ever-evolving world of web development, maintaining clean and consistent code is paramount.

If you’re diving into Next.js 13, you’re in for a treat. This article will guide you through the process of setting up Prettier, the popular code formatter, to streamline your coding experience.

Say goodbye to manual formatting hassles and hello to code that’s not just functional but also beautifully organized. Let’s dive into the world of code elegance with Next.js 13 and Prettier.

Table of Contents

• Setup Next.js 13 Project Environment
• Dependencies Installation
• Prettier Visual Studio Code Setup
• Configuring Prettier Settings And Plugins
• Avoid Prettier Formatting For Certain Directories

Setup Next.js 13 Project Environment

To setup a Next.js project, please check out the instructions here. The installation process generally consists of running the following command in the terminal.

npx create-next-app@latest

Dependencies Installation

Open a terminal within your project directory, and execute one of the following commands to get started:

npm install prettier prettier-plugin-tailwindcss @ianvs/prettier-plugin-sort-imports -D
yarn add prettier prettier-plugin-tailwindcss @ianvs/prettier-plugin-sort-imports -D
pnpm add prettier prettier-plugin-tailwindcss @ianvs/prettier-plugin-sort-imports -D

• prettier is the core package.
• prettier-plugin-tailwindcss organizes tailwind classes automatically.
• @ianvs/prettier-plugin-sort-imports organizes imports based on configuration you provide.

Prettier Visual Studio Code Setup

Prettier is best suited for visual studio code; if you happen to use an alternative editor, I suggest visiting this page to install the relevant extension.

1. Inside your vs-code editor, press Ctrl-Shift-X to open up the extensions marketplace, and search Prettier.
2. Install the extension and restart vs-code to save the changes.

Your extensions page should look something like this:

3. Click Ctrl+, and search default formatter; select Prettier.

4. Additionally, search format on save and enable it so Prettier runs on file save for added convenience.

Configuring Prettier Settings And Plugins

1. Create a new file called prettier.config.cjs at the root of your project. Note that we’re using the .cjs file extension because Prettier fully supports CommonJS configurations within a default Next.js 13 environment.
2. Copy the following code within your configuration file:

/** @type {import('prettier').Config} */
module.exports = {
  endOfLine: "lf",
  semi: false,
  singleQuote: false,
  tabWidth: 2,
  trailingComma: "es5",
  importOrder: [
    "^(react/(.*)$)|^(react$)",
    "^(next/(.*)$)|^(next$)",
    "<THIRD_PARTY_MODULES>",
    "",
    "^types$",
    "^@/types/(.*)$",
    "^@/config/(.*)$",
    "^@/lib/(.*)$",
    "^@/hooks/(.*)$",
    "^@/components/ui/(.*)$",
    "^@/components/(.*)$",
    "^@/styles/(.*)$",
    "^@/app/(.*)$",
    "",
    "^[./]",
  ],
  importOrderSeparation: false,
  importOrderSortSpecifiers: true,
  importOrderBuiltinModulesToTop: true,
  importOrderParserPlugins: ["typescript", "jsx", "decorators-legacy"],
  importOrderMergeDuplicateImports: true,
  importOrderCombineTypeAndValueImports: true,
  plugins: [
    "@ianvs/prettier-plugin-sort-imports",
    "prettier-plugin-tailwindcss",
  ],
}

• These are my personal settings, feel free to visit this page and incorporate other configurations to personalize your experience.
• The importOrder option is specific to this package, I recommend reading through the README.md for help on further configuration.
• The @/ folder alias can be configured inside your tsconfig.json file as follows:

"compilerOptions": {
    // ...
    "paths": {
      "@/*": ["./src/*"],
      // "@/*: ["./*"] <<< if not using the src/ directory
    }
    // ...
  },

Avoid Prettier Formatting For Certain Directories

Before we harness the power of Prettier formatting, we must ensure files that don’t require formatting, such as the node_modules files, are ignored by Prettier.

1. We achieve this by creating a file called .prettierignore at the root of our Next.js project.
2. Inside this file, I recommend you add the following code:

dist
node_modules
.next
build

These directories contain code that shouldn’t be touched by Prettier since this may introduce bugs as well as increase formatting time.

3. To format all your files at once, run this command in the terminal:

npm prettier -w .
pnpm prettier -w .
yarn prettier -w .

Conclusion

And that’s about it!

If you enjoyed this article, check out my profile for many more stories like this, and stay tuned for future articles! 👍

Further Reading 📖