Logo

dev-resources.site

for different kinds of informations.

Setup Prettier Pada Nextjs Tailwind Project

Published at
8/1/2024
Categories
tailwindcss
nextjs
prettier
eslint
Author
saepulmalik27
Author
13 person written this
saepulmalik27
open
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
eslint Article's
30 articles in total
Favicon
Just use this Next.js Eslint Configuration
Favicon
3. How to setup Jest in a Next 15 project (+ eslint for testing)
Favicon
Do me lint! 🙋‍♂️ An easy way to setup ESLint in any project.
Favicon
Restricting some syntax with ESLint
Favicon
Beyond Spellcheck: How Static Analysis Tools Enhance Collaboration in Coding
Favicon
ESlint 9
Favicon
How to Fix Common ESLint Errors: Troubleshooting Unknown or Strange Issues
Favicon
Incrementally fixing lots of ESlint errors in a clean way with ESlint Nibble
Favicon
Setup Eslint Prettier in a TypeScript project with mongoose ODM
Favicon
Vue3 + ESLint 9.13.0 + Prettier +TypeScript and VSCode Autoformat on Save
Favicon
Configurando un proyecto de React para producción
Favicon
Configurando Prettier, ESLint y Husky en Angular
Favicon
Eslint Code Insights from Bitbucket pipelines
Favicon
How to get ESLint 9.11.1 to run in Vue 3
Favicon
Cómo hacer que ESLint 9.11.1 funcione en Vue 3
Favicon
Performing Maintenance Task For A Large Codebase
Favicon
Setup Prettier Pada Nextjs Tailwind Project
Favicon
“Eslint-Summary” — Hack your Eslint Config
Favicon
Regras customizáveis para Prettier + Eslint em React
Favicon
Useful VS Code Extensions for JS
Favicon
ESLint 9 Flat config tutorial
Favicon
ESLint x Prettier: The Right Way To Start A JavaScript Project
Favicon
How to Set Up ESLint and Prettier in a TypeScript Project
Favicon
Customizable rules for Prettier + Eslint in React
Favicon
How to set up Eslint and prettier
Favicon
Configure Eslint, Prettier and show eslint warning into running console vite react typescript project
Favicon
Building Vue3 Component Library from Scratch #11 ESlint + Prettier + Stylelint
Favicon
Setup Eslint + Prettier for code standardization in React
Favicon
Setup Eslint + Prettier para padronização de código em React
Favicon
ESLint Plugin. What was missed in the doc?

Featured ones: