Jika kalian berada dalam sebuah tim engineering yang beranggotakan banyak programmer, maka akan cukup kesusahan untuk me-maintain codebase yang ditulis agar memiliki styling dan pattern yang sama.

Karena sebuah codebase yang bagus adalah seolah-olah codebase tersebut ditulis oleh satu orang, dalam artian memiliki styling dan pattern yang sama.

Nah, problem ini dapat kita pecahkan dengan menggunakan ESLint & Prettier. Dalam artikel ini kita akan melakukan configurasi ESLint & Prettier untuk project React dengan Typescript.

Install project React Typescript

npx create-react-app example --template typescript

Setelah proses instalasi selesai, maka kita akan memiliki sebuah project React dengan project structure sebagai berikut:

Install dan Configure ESLint

• Install eslint dengan command npm instal eslint --save-dev
• Apabila sudah selesai, ketik command npx eslint --init
• Ikuti configurasi berikut:

? How would you like to use ESLint? …
> To check syntax, find problems, and enforce code style? What type of modules does your project use? …
> JavaScript modules (import/export)? Which framework does your project use? …
> React? Does your project use TypeScript? » Yes? Where does your code run? …
√ Browser? How would you like to define a style for your project? …
> Use a popular style guide? Which style guide do you want to follow? …
> Google: [https://github.com/google/eslint-config-google](https://github.com/google/eslint-config-google)? What format do you want your config file to be in? …
> JavaScripteslint-plugin-react@latest [@typescript](http://twitter.com/typescript)-eslint/eslint-plugin@latest eslint-config-google@latest eslint@>=5.16.0 [@typescript](http://twitter.com/typescript)-eslint/parser@latest
? Would you like to install them now with npm? » Yes

• Setelah proses selesai, maka akan secara otomatis menghasilkan file .eslintrc.js dan apabila setelah instalasi anda mendapatkan error ini, maka kita harus specify react version yang akan kita gunakan di file .eslintrc.js

Install dan Configure Prettier

ESLint berfungsi untuk menganalyze dan menemukan problem pada code kita, sedangkan Prettier berfungsi agar code kita mengikuti format dan standard styling yang sudah kita tentukan. Untuk menginstall prettier cukup ketik command:

npm install prettier --save-dev

Pada saat kita menginstall eslint tadi, sebenarnya sudah ada beberapa rules default dari eslint. Agar rules antara eslint dan prettier tidak conflict, maka kita harus menggunakan eslint-config-prettier.

npm install eslint-config-prettier --save-dev

Selanjutnya, buat file .prettierrc. Kemudian tambahkan settingan prettier ke dalam config .eslintrc.js agar nantinya rules yang kita tulis di .prettierrc dapat terbaca oleh sistem.

Update line extends pada file .eslintrc.js agar menjadi seperti ini:

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

Dengan begitu, rules pada .prettierrc akan secara otomatis terbaca oleh Sistem. Selanjutnya, tambahkan block code berikut pada file .prettierrc.

{
   "endOfLine": "lf",
   "trailingComma": "es5",
   "tabWidth": 2,
   "printWidth": 80,
   "singleQuote": true
}

Configure VSCode

Walaupun sudah melakukan konfigurasi ESLint dan Prettier sebelumnya, akan tetapi kita juga harus melakukan konfigurasi pada VSCode agar ESLint dan Prettier dapat bekerja.

• Install extension ESLint dan Prettier

• Agar ESLint dapat bekerja dengan trigger onSave, maka kita perlu membuat folder dengan nama .vscode dan di dalam folder .vscode buat file dengan nama settings.json

File tersebut akan bersisi configurasi VSCode yang akan memberikan trigger keapda ESLint dan Prettier. File settings.json berisi seperti ini:

{
   "editor.formatOnPaste": true,
   "editor.formatOnSave": true,
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.codeActionsOnSave": {
      "source.fixAll": true
   }
}

• Reload VSCode
• Apabila anda mengalami error Missing JSDoc document pada file .ts dan .tsx maka anda perlu mengupdate line rules pada file .eslintrc.js :

rules: { "require-jsdoc": 0 }

Dengan begitu, selesai sudah konfigurasi ESLint dan Prettier untuk project React dengan Typescript. Gimana gampang kannn ?!?! Jika ada pertanyaan silahkan tulis di kolom komen dan mari berdiskusi.

Thank youuu!