Setup Nextjs Prettier dan Eslint

Dalam tahap development adakalanya kita merapihkan code kita ketika akan di deploy, karena kita atau team lainnya akan merasa kesulitan memahami kode yang kita buat dari itu lah kita harus benar-benar mensetup dari awal dalam membuat project Nextjs dan kita akan merasa kesulitan juga dalam merapihkannya.

Dalam tahap ini saya akan sharing dalam mempersiapkan project Nextjs untuk lebih rapih dan tertata tidak berantakan. baiklah kita mulai Membuat file .eslintignore agar tidak terbawa ke github

**/node_modules/*
**/out/*
**/.next/*

Lalu kita buat juga file .eslintrc.json seperti ini :

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:react-hooks/recommended",
    "next/core-web-vitals",
    "next",
    "prettier"
  ],
  "parserOptions": {
    "ecmaFeatures": {
      // Disini bisa disesuaikan, karena saya menggunakan jsx maka
      "jsx": true,
      "modules": true
    },
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "plugins": ["react", "@next/eslint-plugin-next", "react-hooks"],
  "rules": {
    "react/prop-types": "off",
    "react/react-in-jsx-scope": "off",
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "off"
  }
}

Pada bagian ini saya menggunakan jsx maka saya setting bagian ecmaFeatures menjadi jsx menjadi true:

...
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true,
      "modules": true
    },
    "ecmaVersion": 12,
    "sourceType": "module"
  }
  ...

Lalu sekarang kita buat file jsconfig.json untuk memudahkan ketika import :

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/lib/*": ["lib/*"],
      "@/components/*": ["components/*"],
      "@/layouts/*": ["layouts/*"]
    }
  },
  "exclude": ["node_modules"]
}

Jangan lupa juga untuk membuat file .prettierignore untuk mendisable file apa saja yang tidak diikut sertakan :

# Ignore :
build
.next
node_modules
yarn.lock
package-lock.json
styles

Terakhir kita buat file .prettierrc :

{
  "endOfLine": "auto",
  "printWidth": 100,
  "tabWidth": 2,
  "trailingComma": "es5",
  "semi": true,
  "singleQuote": true,
  "bracketSpacing": true
}

Demikian pengaturan Eslint dan Prettier versi saya, semoga bermanfaat...