
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**

```bash
**/node_modules/*
**/out/*
**/.next/*
```

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

```json
{
  "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`:

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

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

```json
{
  "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 :

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

Terakhir kita buat file `.prettierrc` :

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

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


Dalam tahap development adakalanya kita merapihkan code kita ketika akan di deploy, karena kita atau team lainnya akan merasa kesulitan memahami