Iman Sugirman

Fullstack Developer Experience 6 years, using Laravel and ReactJs

Setup Nextjs Prettier dan Eslint

23 March 2022
Setup Nextjs Prettier dan Eslint
Cloud Server Untuk Nextjs
Dapatkan Gratis $100 Untuk Deploy Nextjs Sekarang
Deploy Now

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

Cloud Server Untuk Nextjs
Dapatkan Gratis $100 Untuk Deploy Nextjs Sekarang
Deploy Now
Subscribe to our newsletter!
Dapatkan Tutorial terbaru dari saya dikirim ke email anda...