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