Iman Sugirman

Iman Sugirman

Fullstack Developer, Software Engineer, Frontend Developer berpengalaman selama lebih dari 6 tahun
Laravel
Nodejs
Docker
Nextjs
React
Mongodb

Setup Nextjs Prettier dan Eslint

23 Maret 2022
Setup Nextjs Prettier dan Eslint
Cloud Server Untuk Nextjs
Dapatkan Gratis $200 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 $200 Untuk Deploy Nextjs Sekarang
Deploy Now