Penerapan standarisasi kode yang lebih baik dengan ESLint
Kenapa (dan bagaimana) kita menggunakannya?
Melalui tulisan ini, saya mau share mengenai code standard untuk javascript dengan menggunakan ESLint. ESLint merupakan salah satu tool javascript yang dapat membantu kita untuk mengidentifikasi kemungkinan kesalahan dalam kode javascript. Kalau dilihat dari situs resminya, ESLint menyebutkan tiga hal penting yang mereka berikan, yaitu identifikasi masalah, perbaikan kode secara otomatis, dan custom rules yang dapat dibuat sendiri sesuai dengan standar yang kita inginkan.
Pada artikel ini saya akan lebih banyak mengulas konfigurasi ESLint dari sisi frontend. Namun perlu diketahui tool ini juga dapat digunakan di sisi backend dengan Nodejs atau apapun yang menggunakan javascript. Dengan ESLint, kita dapat meminimalisasi error sekaligus merapikan codebase kita.
Jika kalian mengerjakan sebuah project dengan codebase yang sudah besar dan tim yang besar, maka tool ini cocok untuk kalian. Karena dengan banyaknya orang yang berkontribusi di tim, mereka pasti memiliki standard code yang berbeda-beda, walaupun (mungkin) tidak ada yang salah dengan standard code mereka. Namun akan lebih baik jika sebuah tim memiliki standard code yang seragam, agar codebase kalian memiliki kesamaan penulisan, sehingga bisa meminimalisasi kesalahan nantinya.
Sebelum mulai menggunakan ESLint, kalian sudah harus mempunyai package manager dengan npm (https://nodejs.org/en/) atau Yarn (https://yarnpkg.com/). Lalu ESLint dapat kalian install secara global supaya dapat menjalankan CLI (Command Line Interface) melalui terminal dari directory atau folder manapun. Teman-teman juga dapat meng-install ESLint secara manual dalam sebuah project di package.json sebagai dev dependency karena kalian hanya membutuhkan ESLint pada saat tahapan development, bukan untuk production. Namun untuk permulaan, saya lebih menyarankan untuk menggunakan instalasi secara global dengan command [sudo npm i -g eslint] atau [sudo yarn global add eslint]. Saya menggunakan visual studio code (https://code.visualstudio.com/) untuk code editornya.
Setelah ESLint terinstall secara global, kalian dapat membuat project baru dan menjalankan command [yarn init] untuk membuat file package.json dan kemudian [eslint –init], di mana command ini akan membuat konfigurasi eslint secara otomatis. Kalian hanya tinggal mengikuti petunjuk dari CLI setelahnya. setelah command [eslint –init] selesai proses instalasi akan dimulai dan menambahkan beberapa dev dependency yang dibutuhkan untuk menjalankan linter di project kalian. Pada saat inisialisasi ESLint, kalian akan ditanyakan beberapa pertanyaan untuk setup linter kalian.
- How would you like to use eslint?
● Check syntax only => membantu kalian untuk cek kode sesuai dengan standard eslint
● To check syntax and find problems => membantu cek syntax dan mencari masalah atau error yang ada dalam kode kalian
● To check syntax, find problems, and enforce code style => membantu cek syntax, mencari masalah atau error yang ada dalam kode, dan mengikuti style code yang populer seperti yang dimiliki oleh Airbnb, Google, dan standar kode populer lainnya. Biasanya saya memilih opsi yang ini
2. What type of modules does your project use?
● Javascript Module (import/export) => jika project kalian mempunyai babel (javascript transpiler to es5) maka kalian harus memilih opsi ini. React, Vue, dan Angular juga menggunakan babel.
● CommonJS (require/exports) => opsi ini digunakan untuk kalian yang tidak menggunakan babel. Opsi ini dapat kalian gunakan ketika kalian menggunakan nodejs atau project javascript lainnya.
3. Which framework does your project use?
● React => jika kalian menggunakan React, pilih opsi ini untuk cek code error di dalam jsx kalian
● Vue => pilih opsi ini jika kalian menggunakan Vue
● None of these => pilih opsi ini jika kalian tidak menggunakan React atau Vue
4. Does your project use TypeScript?
● Jika kalian menggunakan TypeScript (https://www.typescriptlang.org/) ketik “y”, jika tidak ketik “n” lalu enter
5. Where does your code run?
● Browser => pilih opsi ini jika project kalian berjalan di browser, atau jika menggunakan React, Angular, atau Vue
● Project yang berjalan di browser pilih opsi ini jika menggunakan NodeJS atau lainnya tidak menggunakan browser pilih opsi berikutnya. React, Angular, dan Vue pilih opsi ini
● Node => pilih opsi ini jika kalian project kalian berbasis node, seperti NodeJS
6. How would you like to define a style for your project?
● Use a popular style guide => opsi ini memberikan kalian pilihan untuk menggunakan code standard yang dibuat oleh Airbnb dan Google. Saya menyarankan untuk memilih opsi ini karena sudah digunakan oleh banyak orang dan mereka sudah mempunyai standar yang baik.
● Answer questions about your style => pilih opsi ini untuk menggunakan custom style guide
● Inspect your Javascript file(s) => pilih file javascript yang ingin dicek
7. What format do you want your config file to be in?
● Javascript => jika kalian ingin setting config dengan .js file
● YAML => jika kalian ingin setting config dengan .yaml file
● JSON => jika kalian ingin setting config dengan .json file biasanya saya pilih opsi ini
Setelah kalian sudah memilih semua opsi konfigurasi ESLint, kalian akan ditanyakan untuk menginstall semua dependency yang dibutuhkan. Setelah terinstall kalian akan masuk sebagai dev dependency dan otomatis kalian mendapatkan file .eslintrc .js/yaml/json. Jika kalian sudah sudah selesai melakukan konfigurasi dan instalasi ESLint di dalam package.json, berarti kalian sudah bisa langsung melakukan cek syntax error atau warning di dalam semua file js kalian. Jangan lupa untuk menginstall plugin ESLint di vscode supaya kalian bisa melihat langsung error yang ada di file javascript kalian. Kode yang bermasalah atau error akan di highlight secara otomatis oleh ESLint.
Tambahkan juga script di package.json “lint” dengan value “eslint .” untuk melihat code error dan warning begitu juga “lint:fix” dengan value “eslint –fix” untuk memperbaiki kode kalian secara otomatis. Kalian juga dapat memperbaiki code error secara otomatis setiap kali melakukan save dengan cara masuk ke dalam “settings vs code” dan masukkan ke dalam JSON setting “editor.codeActionsOnSave” dengan value “{‘source.fixAll.eslint’: true}”. Jangan lupa kalian juga bisa update rules untuk ESLint jika ada yang tidak sesuai dengan standard code kalian dengan cara setting melalui eslintrc pada bagian rules. Kalian juga bisa cek rules apa saja yang dapat digunakan melalui dokumentasi ESLint (https://eslint.org/docs/rules/).
Di Qlue, saya merasa terbantu dengan adanya ESLint karena pengerjaan product long term membutuhkan stabilisasi kode untuk mengurangi error. Di sisi lain, ESLint juga membantu dalam penyeragaman penulisan syntax yang berbeda-beda dari banyaknya developer yang ada dalam sebuah tim.
Sekian penjelasan singkat mengenai penerapan standar coding Javascript dengan menggunakan ESLint. Semoga informasi tersebut berguna dan bisa kalian terapkan di project kalian sehingga bisa meminimalisasi terjadinya error dan merapikan kode Javascript kalian.
