🔧 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"
    }]
  }
}

• 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"]
}