Install eslint and prettier

install eslint

npm install eslint -D

setelah selesai jalankan perintah

eslint --init

kemudian akan muncul prompt untuk konfigurasi lainya seperti ini. sesuaikan dengan kebutuhan atau ikutin sesuai dengan langkah dibawah

You can also run this command directly using 'npm init @eslint/config'.
✔ How would you like to use ESLint? · problems
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · react
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · browser
✔ What format do you want your config file to be in? · JSON
The config that you've selected requires the following dependencies:

eslint-plugin-react@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest
✔ Would you like to install them now? · No / Yes
✔ Which package manager do you want to use? · npm
Successfully created .eslintrc.json file in ..../path/project

setelah prompt terisi maka dalam folder root terdapat satu file .eslintrc.json yang berisi config dari eslint

instal juga plugin untuk eslint dan prettier

npm install eslint-config-prettier eslint-plugin-prettier prettier

fungsi plugin ini agar eslint dan prettier tidak mengalami konflik, karena eslint dan prettier ketika diinstall disatu project yang sama, maka kedua ini seperti irisan

hasil akhir file .eslintrc.json

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "overrides": [],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": ["react", "@typescript-eslint"],
  "rules": {}
}

langkah terakhir, buat file prettierrc.json. Masukan kode berikut

{
  "semi": false,
  "singleQuote": true,
  "trailingComma": "es5",
  "bracketSpacing": false,
  "tabWidth": 2
}

buat satu file lagi, beri nama .prettierignore. file ini berfungsi untuk mengabaikan file file yang tidak akan diformat oleh prettier

Beberapa plugin untuk typescript

npm install eslint-plugin-react@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest