DEV Community

Vikas Parmar
Vikas Parmar

Posted on

Prettier Configuration for React/Next.js Projects | 2025

#beginners #tutorial #refactorit #react

Have you ever opened a project where every file follows a different style? Some files use single quotes, others use double quotes. Some have semicolons, others don't. It's a mess, right? This is where Prettier comes in - it automatically formats your code so you and your team can focus on what matters: building great features.

Why Should You Care?

  • Your code looks consistent across all files
  • No more arguments about code style in team reviews
  • Save time - let Prettier handle formatting while you write code
  • Works perfectly with React and Next.js projects

Setting Up Prettier (It's Easy!)

Step 1: Install Prettier 

npm install -D prettier
Enter fullscreen mode Exit fullscreen mode

Step 2: Create Three Important Files

Tell Prettier what to format (.prettierrc):

{
  "singleQuote": true,
  "trailingComma": "es5",
  "arrowParens": "always",
  "tabWidth": 2,
  "useTabs": false,
  "printWidth": 100,
  "bracketSpacing": true,
  "jsxSingleQuote": false,
  "jsxBracketSameLine": false,
  "semi": true,
  "importOrder": [
    "^react$",
    "^next",
    "<THIRD_PARTY_MODULES>",
    "^@/components/(.*)$",
    "^@/utils/(.*)$",
    "^[./]"
  ],
  "importOrderSeparation": true,
  "importOrderSortSpecifiers": true
}
Enter fullscreen mode Exit fullscreen mode

Tell Prettier what to ignore (.prettierignore):


# Don't format these folders
node_modules
.next
build
dist

# Don't format these files
package-lock.json
yarn.lock
.env
.env.local

# Don't format images and icons
public/**/*.svg
public/**/*.png
public/**/*.jpg
Enter fullscreen mode Exit fullscreen mode

Add commands to your package.json:

{
  "scripts": {
    "format": "prettier --write .",
    "format:check": "prettier --check ."
  }
}
Enter fullscreen mode Exit fullscreen mode

How to Use It?

Format Your Code 

# Format all files
npm run format

# Check if files need formatting
npm run format:check
Enter fullscreen mode Exit fullscreen mode

Make It Work with VS Code

Add this to your VS Code settings:


{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}
Enter fullscreen mode Exit fullscreen mode

Now your code will format automatically when you save!

What Will This Fix?

Before Prettier:

const user={name:"John",
age:30,
    email:"[email protected]"
}
Enter fullscreen mode Exit fullscreen mode

After Prettier:

const user = {
  name: 'John',
  age: 30,
  email: '[email protected]',
};
Enter fullscreen mode Exit fullscreen mode

Common Questions

  1. "Will this break my code?" No! Prettier only changes how your code looks, not how it works.
  2. "What if I don't like some formatting?" You can easily change any rule in the .prettierrc file.
  3. "Do I need to run format commands manually?" No - if you set up VS Code as shown above, it happens automatically when you save.

When You Need More

Want to make sure everyone on your team uses Prettier? Add this GitHub Action (.github/workflows/prettier.yml):


name: Check Code Formatting

on:
  pull_request:
    branches: [main]

jobs:
  prettier:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
      - run: npm ci
      - run: npm run format:check
Enter fullscreen mode Exit fullscreen mode

This will check if all code is properly formatted when someone makes a pull request.
Remember: Good code formatting is like good hygiene—it makes everyone's life easier and should be a daily habit!

WebDevelopment #CleanCode #CodingTips

Top comments (0)