DEV Community

Saepul Malik
Saepul Malik

Posted on

1

Setup Prettier Pada Nextjs Tailwind Project

Biasanya ketika saya membuat project saya selalu menggunalan auto formater, untuk membuat code saya terformat dengan baik. formater yang biasa saya gunakan adalah Prettier, dan berikut ini langkah langkah setup Prettier pada Project Nextjs tailwind

  • Install Package

npm install -D prettier eslint-config-prettier eslint-plugin-prettier prettier-plugin-tailwindcss

  • Tambahkan Script ini pada file .eslintrc.json
{
  "extends": ["next/core-web-vitals", "prettier"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier":[ "warn",
    {
      "endOfLine": "auto"
    }]
  }
}
Enter fullscreen mode Exit fullscreen mode
  • tambahkan file .prettierrc.json di root project kemudian tambahkan masukan format prettier yang dibutuhkan, contoh :
{
  "trailingComma": "es5",
  "semi": true,
  "tabWidth": 2,
  "singleQuote": true,
  "jsxSingleQuote": true,
  "plugins": ["prettier-plugin-tailwindcss"]
}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more