Prettier config for nextjs application

prettier.config.js.md

Prettier config for nextjs applciation

install dev dependencies

pnpm add -D prettier@latest prettier-plugin-tailwindcss@latest @ianvs/prettier-plugin-sort-imports@latest

create file prettier.config.js in root dir

prettier.config.js

// prettier.config.js
/** @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/(.*)$",
    "^@/registry/(.*)$",
    "^@/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",
  ],
};

add prettier ignore file .prettierignore

.prettierignore

# Build artifacts
.next/
.turbo/
_next/
__tmp__/
dist/
node_modules/
target/
compiled/

# Igonore formatting the shadcn ui codes
components/ui/


lerna.json
test-timings.json
pnpm-lock.yaml

packages/next/src/bundles/webpack/packages/*.runtime.js
packages/next/src/bundles/webpack/packages/lazy-compilation-*.js

.github/actions/next-stats-action/.work
.github/actions/validate-docs-links/lib/index.js
.github/actions/needs-triage/index.js
.github/actions/*/index.mjs

packages/next-swc/crates/**/tests/**/output*
packages/next-swc/crates/core/tests/loader/issue-32553/input.js
packages/next-swc/native/**/*

packages/next-codemod/transforms/__testfixtures__/**
packages/next-codemod/transforms/__tests__/**
packages/next-codemod/**/*.js
packages/next-codemod/**/*.d.ts

packages/next-env/**/*.d.ts

test/**/out/**
test/development/basic/hmr/components/parse-error.js

bench/nested-deps/pages/**/*
bench/nested-deps/components/**/*

**/convex/_generated/**
**/.tina/__generated__/**