Cara Install Eslint di Sublime Text

Bagi yang belum tau apa itu eslint, gampang nya eslint adalah tools untuk membantu kita agar kodingan menjadi rapi sesuai rules tertentu. Kodingan rapi yang rapi adalah yang readable (gampang dibaca) oleh manusia.

Bila kodingan tidak readable, maka hasilnya akan seperti gambar di atas. Orang lain atau bahkan kamu sendiri akan selalu ngomong wtf.

Bila kodingan kamu rapi, kualitas aplikasi/software yang dibuatpun akan meningkat. dan yang paling penting tidak membuat emosi anggota tim kamu saat membaca kodingan mu.

Front End Project (React)

1. Install eslint global

npm install -g eslint

2. Install Package Control: Buka https://packagecontrol.io/installation lalu ikuti langkah-langkahnya

3. Install eslint configuration

npm install --save-dev eslint-config-rallycoding

4. Definisikan rules eslint dengan cara buat file .eslintrc di root folder project. Isinya:

{
 "extends": "rallycoding",
 "rules": {
     "semi": 0,
     "react/require-extension": "off",
     "arrow-body-style": 0,
     "no-undef": 0,
     "no-unused-vars": 1,
     "object-curly-spacing": 0,
     "brace-style": 0,
     global-require: 0,
     "prefer-const": 0,
     "prefer-template": 0,
     "jsx-a11y/img-has-alt": [0],
     "jsx-a11y/no-marquee": [0],
     "import/no-extraneous-dependencies": [0],
     "max-len": [2, {"code": 150, "tabWidth": 2, "ignoreUrls": true}]
 }
}

5. Install linter di sublime: klik ctrl+shift+p (untuk windows), pilih Package Control: Install Package lalu pilih Sublimelinter

6. Install eslint di sublime: klik ctrl+shift+p (untuk windows), pilih Package Control: Install Package lalu pilih SublimeLinter-contrib-eslint atau SublimeLinter-eslint

7. Quit sublime, lalu buka lagi. Coba kasih ;di akhir line, pasti ada error merah-merah

8. Kalau merah-merahnya belum muncul, coba ke menu viewlalu pilih showconsolemaka akan kelihatan yang bikin errornya di file mana, line berapa. Buka file nya, lalu dicomment bagian line itu. Lalu coba lagi berulang-ulang sampai merah-merahnya muncul seperti gambar di bawah ini

Backend Project (NodeJs/Express)

Install eslint di backend sebenarnya mirip dengan frontend, hanya beda di bagian file .eslintrc nya saja. Kalau kamu sudah melakukan langkah di atas untuk install eslint di frontend, maka kamu tidak perlu lagi melaukan langkah-langkah di bawah ini, hanya perlu mengganti file .eslintrc dengan langkah nomor 3 di bawah

1. Install eslint global

npm install -g eslint

2. Install Package Control: Buka https://packagecontrol.io/installation lalu ikuti langkah-langkahnya

3. Definisikan rules eslint dengan cara buat file .eslintrc di root folder project. Isinya:

{
  "env": {
    "es6": true,
    "node": true
  },
  "extends": "eslint:recommended",
  "parserOptions": {
    "sourceType": "module",
    "ecmaVersion": 8
  },
  "rules": {
    "indent": ["error", "tab"],
    "linebreak-style": ["error", "unix"],
    "quotes": ["error", "single"],
    "semi": ["error","never"],
    "no-console": 0
  }
}

4. Install linter di sublime: klik ctrl+shift+p (untuk windows), pilih Package Control: Install Package lalu pilih Sublimelinter

5. Install eslint di sublime: klik ctrl+shift+p (untuk windows), pilih Package Control: Install Package lalu pilih SublimeLinter-contrib-eslint atau SublimeLinter-eslint

6. Quit sublime, lalu buka lagi. Coba kasih ;di akhir line, pasti ada error merah-merah

7. Kalau merah-merahnya belum muncul, coba ke menu viewlalu pilih showconsolemaka akan kelihatan yang bikin errornya di file mana, line berapa. Buka file nya, lalu dicomment bagian line itu. Lalu coba lagi berulang-ulang sampai merah-merahnya muncul seperti gambar di bawah ini