ESLint & Prettier: Code Quality

# Inisialisasi ESLint di proyek baru
npm init @eslint@latest

# Wizard akan menanyakan:
# ✔ How would you like to use ESLint? → To check syntax and find problems
# ✔ What type of modules does your project use? → ES Modules
# ✔ Which framework does your project use? → React / None
# ✔ Does your project use TypeScript? → Yes / No
# ✔ Where does your code run? → Browser / Node
# ✔ What format do you want your config file to be in? → ESM (eslint.config.mjs)
# ✔ Would you like to install them now? → Yes

# Atau instal manual:
npm install -D eslint @eslint/js

# Untuk TypeScript:
npm install -D @typescript-eslint/parser @typescript-eslint/eslint-plugin

# Untuk React:
npm install -D eslint-plugin-react eslint-plugin-react-hooks

# Lint satu file
npx eslint src/app.js

# Lint seluruh direktori
npx eslint src/

# Lint dengan pattern
npx eslint "src/**/*.{js,ts,jsx,tsx}"

# Auto-fix masalah yang bisa diperbaiki
npx eslint --fix src/

# Cek tanpa memperbaiki (untuk CI)
npx eslint src/ --no-fix

# Output format untuk CI tools
npx eslint src/ --format json
npx eslint src/ --format junit

// eslint.config.mjs — Konfigurasi ESLint modern (v9+)
import js from '@eslint/js';
import tsPlugin from '@typescript-eslint/eslint-plugin';
import tsParser from '@typescript-eslint/parser';
import reactPlugin from 'eslint-plugin-react';
import reactHooksPlugin from 'eslint-plugin-react-hooks';

export default [
  // === Global ignores ===
  {
    ignores: ['dist/**', 'build/**', 'node_modules/**', '*.min.js', 'coverage/**']
  },

  // === Base config untuk semua file ===
  js.configs.recommended,

  // === TypeScript config ===
  {
    files: ['**/*.{ts,tsx}'],
    languageOptions: {
      parser: tsParser,
      parserOptions: {
        ecmaVersion: 'latest',
        sourceType: 'module',
        ecmaFeatures: { jsx: true },
        project: './tsconfig.json'
      }
    },
    plugins: {
      '@typescript-eslint': tsPlugin
    },
    rules: {
      // TypeScript specific rules
      '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
      '@typescript-eslint/no-explicit-any': 'warn',
      '@typescript-eslint/explicit-function-return-type': 'off',
      '@typescript-eslint/consistent-type-imports': ['error', { prefer: 'type-imports' }],
      '@typescript-eslint/no-non-null-assertion': 'warn',
      '@typescript-eslint/no-floating-promises': 'error',
      '@typescript-eslint/await-thenable': 'error'
    }
  },

  // === React config ===
  {
    files: ['**/*.{jsx,tsx}'],
    plugins: {
      'react': reactPlugin,
      'react-hooks': reactHooksPlugin
    },
    settings: {
      react: { version: 'detect' }
    },
    rules: {
      'react/react-in-jsx-scope': 'off',         // React 17+ tidak perlu import React
      'react/prop-types': 'off',                   // Gunakan TypeScript
      'react/jsx-uses-react': 'off',
      'react/jsx-uses-vars': 'error',
      'react/self-closing-comp': 'error',
      'react/jsx-no-duplicate-props': 'error',
      'react/jsx-key': 'error',
      'react/no-array-index-key': 'warn',
      'react/no-danger': 'warn',
      'react-hooks/rules-of-hooks': 'error',
      'react-hooks/exhaustive-deps': 'warn'
    }
  },

  // === Custom rules untuk proyek ===
  {
    rules: {
      // Best practices
      'no-console': ['warn', { allow: ['warn', 'error'] }],
      'no-debugger': 'error',
      'no-alert': 'error',
      'no-var': 'error',
      'prefer-const': 'error',
      'prefer-template': 'error',
      'no-duplicate-imports': 'error',
      'eqeqeq': ['error', 'always'],
      'curly': ['error', 'multi-line'],

      // Style (yang tidak ditangani Prettier)
      'no-multiple-empty-lines': ['error', { max: 1 }],
      'no-trailing-spaces': 'error',
      'padding-line-between-statements': [
        'error',
        { blankLine: 'always', prev: '*', next: 'return' }
      ]
    }
  }
];

// eslint.config.mjs — Contoh rules dengan opsi detail
{
  rules: {
    // === Error Prevention ===
    'no-unused-vars': 'off',  // Gunakan @typescript-eslint version
    '@typescript-eslint/no-unused-vars': [
      'error',
      {
        argsIgnorePattern: '^_',          // _arg diabaikan
        varsIgnorePattern: '^_',          // _var diabaikan
        caughtErrorsIgnorePattern: '^_',  // catch (_err)
        destructuredArrayIgnorePattern: '^_'
      }
    ],

    // === Best Practices ===
    'no-var': 'error',                    // Gunakan let/const
    'prefer-const': 'error',              // Gunakan const jika tidak berubah
    'prefer-template': 'warn',            // Gunakan template literal
    'no-implicit-coercion': 'error',      // Hindari !!, +, '' untuk konversi
    'no-return-await': 'error',           // Hindari return await yang tidak perlu
    'require-await': 'warn',              // async function harus punya await
    'no-throw-literal': 'error',          // throw new Error(), bukan throw "msg"

    // === Security ===
    'no-eval': 'error',                   // Larang eval()
    'no-implied-eval': 'error',           // Larang setTimeout("code")
    'no-new-func': 'error',               // Larang new Function()

    // === Code Consistency ===
    'arrow-body-style': ['error', 'as-needed'],
    'object-shorthand': ['error', 'always'],
    'prefer-destructuring': ['warn', {
      array: false,
      object: true
    }],
    'no-nested-ternary': 'warn',          // Hindari ternary bersarang
    'max-depth': ['warn', 3],             // Max nesting depth
    'max-lines-per-function': ['warn', {
      max: 100,
      skipBlankLines: true,
      skipComments: true
    }]
  }
}

// ❌ Kode yang melanggar rules
var name = "Budi";                    // Error: no-var
const unused = 10;                    // Error: no-unused-vars
if (value == true) { }                // Error: eqeqeq (harus ===)
console.log("debug");                 // Warn: no-console
const result = "" + value;            // Error: no-implicit-coercion
const name2 = "Hello " + name;        // Warn: prefer-template

// ✅ Kode yang sudah diperbaiki
const name = "Budi";                  // const, bukan var
// (hapus unused variable)
if (value === true) { }              // === bukan ==
console.error("error message");      // console.error diizinkan
const result = String(value);         // eksplisit konversi
const greeting = `Hello ${name}`;     // template literal

# Instal Prettier
npm install -D prettier

# Buat file konfigurasi
echo {} > .prettierrc.json

# Buat file ignore
echo "node_modules
dist
build
coverage" > .prettignore

# Format satu file
npx prettier --write src/app.ts

# Format seluruh direktori
npx prettier --write "src/**/*.{js,ts,jsx,tsx,json,css,md}"

# Cek format tanpa memperbaiki (untuk CI)
npx prettier --check "src/**/*.{js,ts,jsx,tsx}"

# Format semua file di proyek
npx prettier --write .

# Format dan lihat diff
npx prettier --write --list-different src/

// .prettierrc.json — Konfigurasi Prettier
{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "useTabs": false,
  "trailingComma": "all",
  "printWidth": 100,
  "bracketSpacing": true,
  "bracketSameLine": false,
  "arrowParens": "always",
  "endOfLine": "lf",
  "quoteProps": "as-needed",
  "jsxSingleQuote": false,
  "htmlWhitespaceSensitivity": "css",
  "proseWrap": "preserve",
  "embeddedLanguageFormatting": "auto"
}

// ❌ SEBELUM di-format Prettier:
const user={name:"Budi",age:25,email:"budi@mail.com",isActive:true,skills:["JavaScript","TypeScript","React","Node.js"]}
const greeting = "Hello " + user.name + "! Welcome to " + "our platform. We hope you enjoy your stay here with us."
function calculateTotal(items){let total=0;for(let i=0;i<items.length;i++){total+=items[i].price*items[i].quantity}return total}

// ✅ SESUDAH di-format Prettier:
const user = {
  name: 'Budi',
  age: 25,
  email: 'budi@mail.com',
  isActive: true,
  skills: ['JavaScript', 'TypeScript', 'React', 'Node.js'],
};

const greeting =
  "Hello " + user.name + "! Welcome to " +
  "our platform. We hope you enjoy your stay here with us.";

function calculateTotal(items) {
  let total = 0;
  for (let i = 0; i < items.length; i++) {
    total += items[i].price * items[i].quantity;
  }
  return total;
}

# Matikan ESLint rules yang konflik dengan Prettier
npm install -D eslint-config-prettier

# (Opsional) Jalankan Prettier sebagai ESLint rule
# NOTE: Banyak yang TIDAK merekomendasikan ini karena lambat
# Lebih baik jalankan Prettier terpisah
npm install -D eslint-plugin-prettier

// eslint.config.mjs — ESLint + Prettier terintegrasi
import js from '@eslint/js';
import tsPlugin from '@typescript-eslint/eslint-plugin';
import tsParser from '@typescript-eslint/parser';
import prettierConfig from 'eslint-config-prettier';

export default [
  js.configs.recommended,

  {
    files: ['**/*.{ts,tsx}'],
    languageOptions: {
      parser: tsParser,
      parserOptions: {
        ecmaVersion: 'latest',
        sourceType: 'module',
        project: './tsconfig.json'
      }
    },
    plugins: {
      '@typescript-eslint': tsPlugin
    },
    rules: {
      '@typescript-eslint/no-unused-vars': 'error',
      '@typescript-eslint/no-explicit-any': 'warn',
    }
  },

  // HARUS di akhir — mematikan rules yang konflik dengan Prettier
  prettierConfig,

  {
    ignores: ['dist/**', 'node_modules/**']
  }
];

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

// .vscode/settings.json — VS Code workspace settings
{
  // === Prettier sebagai default formatter ===
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.formatOnPaste": false,

  // === ESLint auto-fix on save ===
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.organizeImports": "explicit"
  },

  // === Language-specific settings ===
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[markdown]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.wordWrap": "on"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

  // === ESLint validation ===
  "eslint.validate": [
    "javascript",
    "typescript",
    "javascriptreact",
    "typescriptreact"
  ],

  // === Tambahan ===
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "files.eol": "\n",
  "files.trimTrailingWhitespace": true,
  "files.insertFinalNewline": true,

  // === Exclude dari file explorer ===
  "files.exclude": {
    "**/node_modules": true,
    "**/dist": true,
    "**/.git": true
  }
}

// .vscode/extensions.json — Rekomendasikan extensions ke tim
{
  "recommendations": [
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "EditorConfig.EditorConfig",
    "bradlc.vscode-tailwindcss",
    "csstools.postcss",
    "christian-kohler.path-intellisense",
    "streetsidesoftware.code-spell-checker"
  ]
}

# Instal Husky
npm install -D husky

# Inisialisasi Husky (membuat folder .husky/)
npx husky init

# Instal lint-staged
npm install -D lint-staged

# .husky/pre-commit — Script yang dijalankan sebelum commit
npx lint-staged

// package.json — Konfigurasi lint-staged
{
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.{json,css,md,yml,yaml}": [
      "prettier --write"
    ]
  }
}

# .github/workflows/lint.yml
name: Code Quality

on:
  push:
    branches: [main, develop]
  pull_request:
    branches: [main, develop]

jobs:
  lint-and-format:
    name: Lint & Format Check
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'

      - name: Install dependencies
        run: npm ci

      - name: Run ESLint
        run: npm run lint

      - name: Check Prettier formatting
        run: npm run format:check

      - name: Run TypeScript type check
        run: npx tsc --noEmit

  test:
    name: Unit Tests
    runs-on: ubuntu-latest
    needs: lint-and-format

    steps:
      - name: Checkout code
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'

      - name: Install dependencies
        run: npm ci

      - name: Run tests
        run: npm test -- --coverage

      - name: Upload coverage
        uses: codecov/codecov-action@v3
        with:
          files: ./coverage/lcov.info

# .gitlab-ci.yml
stages:
  - quality
  - test

lint:
  stage: quality
  image: node:20
  cache:
    paths:
      - node_modules/
  script:
    - npm ci
    - npm run lint
    - npm run format:check
  rules:
    - if: $CI_PIPELINE_SOURCE == "merge_request_event"
    - if: $CI_COMMIT_BRANCH == "main"
    - if: $CI_COMMIT_BRANCH == "develop"

typecheck:
  stage: quality
  image: node:20
  cache:
    paths:
      - node_modules/
  script:
    - npm ci
    - npx tsc --noEmit

test:
  stage: test
  image: node:20
  cache:
    paths:
      - node_modules/
  script:
    - npm ci
    - npm test -- --coverage
  coverage: '/Statements\s*:\s*(\d+\.?\d*)%/'
  artifacts:
    reports:
      coverage_report:
        coverage_format: cobertura
        path: coverage/cobertura-coverage.xml

# ================================
# ESLINT CHEAT SHEET
# ================================

# Lint file
npx eslint src/app.ts

# Auto-fix
npx eslint --fix src/app.ts

# Lint dengan debug info
npx eslint --debug src/app.ts

# Inisialisasi ESLint baru
npm init @eslint@latest

# ================================
# PRETTIER CHEAT SHEET
# ================================

# Format file
npx prettier --write src/app.ts

# Cek format (CI)
npx prettier --check "src/**/*.{ts,tsx}"

# Format semua
npx prettier --write .

# Override config via CLI
npx prettier --single-quote --tab-width 4 --write src/app.ts

# ================================
# GABUNGAN
# ================================

# Fix everything (ESLint + Prettier)
npm run lint:fix && npm run format

# Check everything (CI)
npm run lint && npm run format:check

# Type check
npx tsc --noEmit

# Semua sekaligus
npm run lint && npm run format:check && npx tsc --noEmit