Konfigurasi dan Setup EsLint & Prettier untuk project React

Artikel ini akan menjelaskan cara setup dan konfigurasi linter dan prettier pada sebuah project react yang diinisialisasi menggunakan create-react-app.

Requirement :

• Project React yang diinisialisasi menggunakan cra
• Koneksi internet yang memadai
• Pengetahuan dasar javascript, JSON, dan react

Apa itu EsLint ?

EsLint adalah sebuah modul yang bisa kita gunakan sebagai linter pada kode javascript yang kita tulis. Linter adalah alat yang kita gunakan untuk membantu kita menulis kode yang tepat dengan melakukan analisis kode statis yang digunakan untuk menandai kesalahan pemrograman, bug, dan kesalahan gaya penulisan.

Apa itu Prettier ?

Prettier adalah sebuah code formatter. Prettier akan membantu kita untuk menerapkan aturan pada gaya penulisan kode kita.

Sebenarnya EsLint sendiri juga bisa bertindak sebagai code formatter namun tidak jarang ditemui digunakannya esLint dan Prettier secara bersamaan.

Memulai Konfigurasi Eslint

• Lakukan inisialisasi proyek react menggunakan cra npx create-react-app learn-linter (lewati langkah ini jika sudah memiliki proyek react)
• Lakukan cd ke project React yang sudah kita miliki, cd learn-linter
• Jalankan npm install eslint --save-dev atau yarn add eslint --dev jika menggunakan yarn.
• Jalankan npm init @eslint/config atau yarn create @eslint/config
• Pilih To check syntax, find problems, and enforce code style
• Pilih JavaScript modules (import/export)
• Pilih React
• Pilih No jika tidak menggunakan Typescript
• Pilih Browser
• Pilih Use a Popular Style Guide (bebas untuk style guide yang dipilih, saya akan menggunakan AirBnB)
• Pilih JSON untuk tempat menyimpan konfigurasi EsLint kita

Full Doc: https://eslint.org/docs/user-guide/getting-started

• Tambahkan “lint”: “eslint ./ — ignore-path .gitignore” pada bagian scripts pada package.json
• Jalankan npm run lint , linter akan melakukan pengecekan kode yang kita tulis dengan rules AirBnB yang sudah kita terapkan pada semua file javascript yang tidak di gitignore

Melakukan pengecualian pada beberapa file tertentu

Dengan opsi — ignore-path esLint tidak akan melakukan pengecekan linter pada file yang kita gitignore. Alternatif cara lain untuk melakukan pengecualian pada file tertentu dengan menambahkan key “ignorePatterns” pada file .eslintrc.json yang sudah terbuat. Contoh:

”ignorePatterns”: [“reportWebVitals.js”]

Dengan menulis hal tersebut file reportWebVitals akan dilewatkan dalam pemeriksaan linter.

Menonaktifkan beberapa rules tertentu

Untuk menonaktifkan beberapa rules yang tidak diinginkan kita dapat melakukannya dengan cara menulis contoh berikut pada file .eslintrc.json

“rules”: {

“react/prop-types”: “off”

}

Dengan menulis hal diatas rules react/prop-types akan di nonaktifkan

Memulai Konfigurasi Prettier

Kita dapat melakukan konfigurasi tambahan pada gaya penulisan kode kita menggunakan prettier.

• Lakukan installasi prettier npm install -D prettier
• Untuk konfigurasi prettier dengan eslint install npm install --save-dev eslint-config-prettier
• Install ekstensi prettier pada code editor yang digunakan https://prettier.io/docs/en/editors.html
• Buat file .prettierrc.json lakukan config sesuai dengan style penulisan yg diinginkan contoh:

{
"trailingComma": "es5",
"useTabs": false,
"tabWidth": 4,
"semi": false,
"singleQuote": true,
"bracketSpacing": true,
"bracketSameLine": true,
"arrowParens": "avoid",
"printWidth": 80
}

• Buat file .prettierignore dan tuliskan folder yang tidak ingin dilakukan code formating (seperti folder build)
• Tambahkan “prettier” pada key extends di file .eslintrc.

"extends": ["plugin:react/recommended", "airbnb", "prettier"]

• jalankan npx prettier — write . untuk melakukan formating sesuai rules prettier.

Demikian cara setup linter dan prettier pada react project, semoga bermanfaat.