Cara Setup ESLint dan Prettier untuk Project TypeScript

Pernah nggak sih kerja bareng tim terus code style-nya beda-beda? Ada yang pake single quote, ada yang double quote. Ada yang indent pake 2 space, ada yang 4. Belum lagi masalah unused variables yang bikin code review jadi panjang.

Nah, di artikel ini gue bakal bahas cara setup ESLint dan Prettier buat project TypeScript lo. Dijamin setelah ini, code lo bakal lebih konsisten dan clean.

Kenapa Butuh ESLint dan Prettier?

Sebelum masuk ke teknis, kita pahami dulu kenapa dua tools ini penting:

ESLint adalah linter — tool yang ngecek code lo ada bug atau nggak, ngikutin best practice atau nggak, dan ada potential error atau nggak. Contohnya: unused variables, unreachable code, atau pake == instead of ===.

Prettier adalah formatter — tool yang nge-format code lo biar konsisten. Contohnya: indent, quotes, semicolons, line length, dan lain-lain.

Intinya:

• ESLint → Cari masalah di code (code quality)
• Prettier → Bikin code rapi (code formatting)

Dua-duanya penting dan saling melengkapi. ESLint fokus ke what, Prettier fokus ke how.

Perbedaan ESLint vs Prettier

Aspek	ESLint	Prettier
Fungsi	Linting (cari bug & enforce rules)	Formatting (rapiin code)
Focus	Code quality	Code style
Customizable	Sangat customizable	Opinionated (sedikit opsi)
Auto-fix	Bisa fix beberapa issue	Auto-fix semua formatting

Step-by-Step Instalasi

Oke, sekarang kita mulai setup. Pastiin lo udah punya project TypeScript yang ready.

1. Install Dependencies

Pertama, install semua package yang dibutuhin:

npm install -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin
npm install -D prettier eslint-config-prettier eslint-plugin-prettier

Penjelasan singkat:

• eslint — Core ESLint
• @typescript-eslint/parser — Parser buat TypeScript
• @typescript-eslint/eslint-plugin — Rules khusus TypeScript
• prettier — Core Prettier
• eslint-config-prettier — Disable ESLint rules yang conflict sama Prettier
• eslint-plugin-prettier — Jalanin Prettier sebagai ESLint rule

2. Konfigurasi ESLint (.eslintrc.js)

Buat file .eslintrc.js di root project:

module.exports = {
  root: true,
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 2021,
    sourceType: 'module',
    project: './tsconfig.json',
  },
  plugins: ['@typescript-eslint', 'prettier'],
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:@typescript-eslint/recommended-requiring-type-checking',
    'plugin:prettier/recommended',
  ],
  rules: {
    // TypeScript rules
    '@typescript-eslint/explicit-function-return-type': 'warn',
    '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
    '@typescript-eslint/no-explicit-any': 'warn',
    
    // General rules
    'no-console': 'warn',
    'prefer-const': 'error',
    
    // Prettier
    'prettier/prettier': 'error',
  },
  ignorePatterns: ['node_modules/', 'dist/', 'build/'],
};

Tips: Pake .eslintrc.js (JavaScript) instead of .eslintrc.json biar bisa tambahin comments dan logic kalau perlu.

3. Konfigurasi Prettier (.prettierrc)

Buat file .prettierrc di root project:

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "useTabs": false,
  "trailingComma": "es5",
  "printWidth": 100,
  "bracketSpacing": true,
  "arrowParens": "always",
  "endOfLine": "lf"
}

Penjelasan opsi:

• semi: true — Pake semicolon
• singleQuote: true — Pake single quote
• tabWidth: 2 — Indent 2 spaces
• trailingComma: "es5" — Trailing comma di arrays dan objects
• printWidth: 100 — Max 100 karakter per line

Lo juga bisa buat file .prettierignore buat exclude files:

node_modules/
dist/
build/
*.min.js

Integrasi dengan VS Code

Biar makin smooth, kita integrasiin sama VS Code.

1. Install Extensions

Install extension berikut di VS Code:

• ESLint (dbaeumer.vscode-eslint)
• Prettier - Code formatter (esbenp.prettier-vscode)

2. Settings VS Code

Buat atau update file .vscode/settings.json di project lo:

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],
  "typescript.tsdk": "node_modules/typescript/lib"
}

Dengan config ini:

• Code bakal ke-format otomatis pas save
• ESLint auto-fix juga jalan pas save
• Bye-bye manual formatting!

Pre-commit Hooks dengan Husky + lint-staged

Biar nggak ada code jelek yang ke-commit, kita pasang git hooks.

1. Install Husky dan lint-staged

npm install -D husky lint-staged
npx husky init

2. Setup lint-staged

Tambah config di package.json:

{
  "lint-staged": {
    "*.{ts,tsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.{json,md}": [
      "prettier --write"
    ]
  }
}

3. Update Husky Hook

Edit file .husky/pre-commit:

npx lint-staged

Sekarang, setiap kali lo commit, lint-staged bakal jalanin ESLint dan Prettier cuma buat files yang di-stage. Efficient!

Script npm untuk Lint dan Format

Tambah scripts ini di package.json:

{
  "scripts": {
    "lint": "eslint . --ext .ts,.tsx",
    "lint:fix": "eslint . --ext .ts,.tsx --fix",
    "format": "prettier --write \"src/**/*.{ts,tsx,json,md}\"",
    "format:check": "prettier --check \"src/**/*.{ts,tsx,json,md}\"",
    "check": "npm run lint && npm run format:check"
  }
}

Cara pake:

• npm run lint — Cek ESLint errors
• npm run lint:fix — Auto-fix ESLint errors
• npm run format — Format semua files
• npm run format:check — Cek formatting tanpa modify
• npm run check — Run semua checks (bagus buat CI/CD)

Troubleshooting: Conflict ESLint vs Prettier

Kadang ESLint dan Prettier bisa conflict. Berikut tips ngatasinnya:

1. Pastiin eslint-config-prettier Terinstall

Package ini bakal disable semua ESLint rules yang conflict sama Prettier. Make sure udah diinstall dan ada di extends:

extends: [
  // ... rules lain
  'plugin:prettier/recommended', // HARUS DI PALING BAWAH!
],

2. Cek Conflict Rules

Jalanin command ini buat cek rules yang conflict:

npx eslint-config-prettier src/index.ts

3. Error “Delete ␍” di Windows

Ini masalah line endings. Tambahin rule ini di .eslintrc.js:

rules: {
  'prettier/prettier': ['error', { endOfLine: 'auto' }],
}

4. ESLint Nggak Jalan di VS Code

Coba langkah ini:

1. Restart VS Code
2. Cek Output panel (View → Output → ESLint)
3. Pastiin node_modules udah terinstall
4. Check path di .eslintrc.js bener

Bonus: Config untuk React + TypeScript

Kalau project lo pake React, tambahin ini:

npm install -D eslint-plugin-react eslint-plugin-react-hooks

Update .eslintrc.js:

module.exports = {
  // ... config sebelumnya
  plugins: ['@typescript-eslint', 'prettier', 'react', 'react-hooks'],
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:react/recommended',
    'plugin:react-hooks/recommended',
    'plugin:prettier/recommended',
  ],
  settings: {
    react: {
      version: 'detect',
    },
  },
  rules: {
    'react/react-in-jsx-scope': 'off', // Nggak perlu di React 17+
    'react-hooks/rules-of-hooks': 'error',
    'react-hooks/exhaustive-deps': 'warn',
  },
};

Kesimpulan

Setup ESLint dan Prettier emang butuh effort di awal, tapi trust me, ini worth it banget. Benefits yang lo dapet:

1. Code consistency — Semua developer nulis code dengan style yang sama
2. Catch bugs early — ESLint bisa detect potential bugs sebelum runtime
3. Faster code review — Nggak perlu debat soal code style lagi
4. Better DX — Auto-format on save bikin coding lebih smooth

Gue rekomen setup ini di setiap project baru dari awal. Kalau project existing, mulai pelan-pelan — enable rules satu-satu biar nggak overwhelming.

Happy coding! 🚀