Aku, Vim, & ES Lilin (ESLint)
VIM — Vi IMproved merupakan Text-Editor (TUI/Text-Based User Interface) yang telah berumur sekitar 26 Tahun tepatnya dirilis pada tahun 2 November 1991 oleh Bram Moolenaar yang dimana Vim merupakan hasil Clone dan pengembangan sebuah editor yang bernama Vi.
Vim dibuat dengan menggunakan Bahasa C/C++. Sampai saat ini vim telah mengalami banyak perubahan dan masih tetap di kembangkan.
selama saya menggunakan, sejak tahun 2016 oleh pengaruh dari seseorang yang banyak berbagi seputar VIM dan pemrograman yakni Om AdHy Ngurajeka. Seperti pengguna Vim pada umumnya, banyak sekali kesulitan diawal belajar menggunakan editor yang super simple ini, namun karena keinginan dan giat latihan, maka saya bisa simpulkan “Apa sih yang tidak bisa?”.
VIM , Salah satu editor yang menurut saya sangat menarik, Memiliki tantangan, Melatih Focus , Melatih kecepatan tangan, Minim dalam penggunaan Resource (salah satunya penggunaan RAM), Fully Customized, Menggunakan Script/VimL Script untuk membuat setting sesuai keinginan dan kenyamanan pengguna, Banyak plugin , dan banyak lagi hal menarik lainnya. Semoga teman-teman tertarik untuk menggunakan, kita lanjut saja bagaimana menggunakan ESLint untuk Vim.
ES ( EcmaScript) + Lint (Code Lint) = ESLint (EcmaScript Linting)
ES atau Ecmascript merupakan standarisasi penulisan dan penggunaan Javascript.
Lint merupakan Tools atau Utility yang membantu programmer bahwa baris code yang kita tulis akan berpotensi menjadi Bug atau Error (suspicious code) pada bahasa C di Unix.
Jadi ESLint prinsipnya sama dengan Lint, Namun dikhususkan dan dibuat untuk EcmaScript/Javascript serta menambahkan Style-Code agar code yang ditulis lebih konsisten
Prerequisite
sebelum memulai, persiapkan semua perlengkapan yang dibutuhkan
- Vim 8 keatas (Wajib).
- Vim plugin manager (seperti Vundle, VimPlug, NeoBundle, & Pathogen)
bagian ini optional, pilih sesuai keiginan dan kenyamanan. - NodeJs dan NPM.
jika 3 kebutuhan diatas sudah terpenuhi silahkan lanjut pada langkah-langkah dibawah ini :
ALE (Asynchronous Lint Engine)
ALE merupakan plugin yang bekerja pada vim untuk meng-integrasikan Lint Tools dan Vim.
Untuk instalasi silahkan buka tautan ini https://vimawesome.com/plugin/ale
Jika teman-teman terbiasa menggunakan Vundle cukup tambahkan baris berikut pada .vimrc
setelah menambahkan Plugin ‘w0rp/ale’ , maka ketika perintah pada Vim
:source %
:PluginInstall # berlaku jika anda menggunakan Vundle Vimsetelah proses instalasi ALE telah berhasil tambahkan Fitur Ale-Fixer di .vimrc
untuk bahasa pemrograman yang digunakan, pada tulisan ini kita membahas tentang ESLint jadinya kita menambahkan Javascript pada Ale-Fixer dengan Tools linting yakni ESlint.
let g:ale_fixers = {
\ 'javascript': ['eslint']
}kemudian simpan konfigurasi yang di tambahkan pada .vimrc. Setelah itu apakah bisa digunakan ? Iya bisa, jika pada Project javascript sudah tersedia .eslintrc (dotfiles konfigurasi eslint). Jika Tidak, Lanjut ke langkah kedua.
ESLINT
ESLint is an open source project originally created by Nicholas C. Zakas in June 2013. Its goal is to provide a pluggable linting utility for JavaScript.
instalasi eslint ada 2 yakni Local dan Global, local artinya hanya berlaku per project yang sudah di install eslint seperti dibawah ini:
(project)$ npm install eslint babel-eslint --save-dev # local eslint
(project)$ node_modules/.bin/eslint --init # untuk inisialisasi konfigurasi eslint pada project? How would you like to configure ESLint? Use a popular style guide
? Which style guide do you want to follow? Google
? What format do you want your config file to be in? JavaScript
(project)$ node_modules/.bin/eslint src/App.js # target file javascript yang anda buat
jika ingin menggunakan global
$ npm install -g eslint babel-eslint
$ cd project && eslint --init? How would you like to configure ESLint? Use a popular style guide
? Which style guide do you want to follow? Google
? What format do you want your config file to be in? JavaScript
(project)$ eslint src/App.js
atau boleh lihat screen-cast Eslint init dibawah ini
Setelah init eslint berhasil, silahkan mengecheck dan melakukan test dengan membuka code javascript kamu. seperti gambar dibawah ini
atau dengan menggunakan perinta-perintah berikut pada Vim:
- ALEFix — Auto fix code
- ALEFixSuggest — Mengecheck Tools linting apa saja yang perlu untuk Fitur AutoFixer
jika fungsi ALEFix berjalan lancar maka, Selamat Vim dan Eslint kamu telah berkomunikasi dan saling integrasi.
nah untuk setting, rules, dan konfigurasi lain mengenai eslint silahkan diatur sendiri yah , karena style code sudah banyak yang buat , sisa extends , baik itu google style, AirBnb, prettier, & standars.
Berikut hasil akhir dari penggunaan ALE, ESLint, dan Vim.
untuk konfigurasi yang saya gunakan pada ESLint, berikut codenya dengan nama file .eslintrc . untuk konfigurasi tersebut saya menggunakan Code Style Milik Google, ReactJs Eslint Plugin, Babel-Eslint, beberapa rules seperti no-semicolon, dan aturan penggunaan space.
anyway ALE akan mendeteksi semua format dan penulisan nama file eslint, jadi terserah teman-teman mau menggunakan .eslintrc, eslintrc.js, eslint.json, & lain-lain seputar fomat nama file Eslint.
Kesimpulan
Jadi, Tulisan ini bertujuan bagaimana meng-integrasikan atau menghubungkan antara ESLint ke Vim. ESlint dasarnya berjalan pada Nodejs yang tidak ada kaitan dengan vim namun dengan menggunakan ALE (Asynchronous Lint Engine) Plugin Vim yang bekerja untuk menghubungkan konfigurasi dan aturan yang dibuat pada ESLint ke Vim Editor.
Sekian tulisan saya, Ada banyak kekurangan dan jika ada pertanyaan atau hal yang dinilai kurang dari tulisan ini, maka silahkan berikan komentar dibawah.
Referensi & Artikel Menarik:
- https://vimawesome.com/
- https://www.vim.org/
- https://eslint.org/
- https://medium.com/@alfrcr/eslint-sublimetext-3-%EF%B8%8F-%EF%B8%8F-%EF%B8%8F-%EF%B8%8F-%EF%B8%8F-61a240446803 — Oleh Putu Alfred Crosby
- 3 Cara Fetch di ReactJs
jangan lupa bergabung di Group Vim-Indonesia
Terima Kasih !
