Frontend Academy · Pelajaran

Pengaturan Prettier dan ESLint

Tambahkan Prettier untuk pemformatan otomatis dan ESLint untuk menemukan kesalahan, konfigurasikan kedua alat, lalu integrasikan ke dalam alur pemformatan saat penyimpanan.

Pengaturan Prettier dan ESLint adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.

Mengapa Gaya Kode Perlu Diotomatisasi?

Perdebatan tentang pemformatan kode secara manual membuang waktu tim. Prettier memformat kode secara otomatis dengan gaya yang konsisten. ESLint menemukan bug dan menegakkan praktik terbaik. Bersama-sama, keduanya menghilangkan banyak kategori komentar dalam peninjauan kode.

Memasang Prettier

Pasang Prettier sebagai dependensi pengembangan, buat berkas config, lalu tambahkan skrip pemformatan ke package.json. Prettier tidak memerlukan config agar dapat berfungsi — nilai bawaannya sudah masuk akal — tetapi Anda dapat menyesuaikannya.

npm install --save-dev prettier

# .prettierrc (optional config)
{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 80
}

Integrasi Prettier dengan VSCode

Pasang ekstensi Prettier - Code Formatter. Kemudian tetapkan sebagai pemformat default dan aktifkan formatOnSave di pengaturan. Sekarang Prettier berjalan setiap kali Anda menyimpan berkas.

// .vscode/settings.json
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

Memasang ESLint

Pasang ESLint dan inisialisasikan dengan npm init @eslint/config. Panduan ini membantu Anda memilih lingkungan (peramban/node), sistem modul, dan dukungan TypeScript. Panduan ini menghasilkan berkas eslint.config.js.

npm install --save-dev eslint
npx eslint --init

# Or for a flat config:
npm install --save-dev @eslint/js
# creates eslint.config.js

Contoh Config ESLint

Flat config ESLint sederhana untuk proyek JavaScript di peramban. Aturan dapat berupa 'error', 'warn', atau 'off'. Perluas config bersama seperti @eslint/js recommended untuk dasar yang kuat.

// eslint.config.js
import js from '@eslint/js';
export default [
  js.configs.recommended,
  {
    rules: {
      'no-console': 'warn',
      'no-unused-vars': 'error',
      'eqeqeq': 'error'
    }
  }
];

ESLint untuk TypeScript

Untuk proyek TypeScript, tambahkan typescript-eslint untuk menemukan masalah khusus TypeScript: penggunaan any yang tidak aman, tipe kembalian yang hilang, dan Promise yang digunakan secara keliru.

npm install --save-dev typescript-eslint

// eslint.config.js
import tseslint from 'typescript-eslint';
export default tseslint.config(
  ...tseslint.configs.recommended
);

Prettier dan ESLint Bersama-sama

ESLint memiliki beberapa aturan pemformatan yang bertentangan dengan Prettier. Gunakan eslint-config-prettier untuk menonaktifkannya, sehingga Prettier menangani semua pemformatan dan ESLint hanya menangani kualitas kode.

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

// eslint.config.js — add prettier last:
import prettierConfig from 'eslint-config-prettier';
export default [
  js.configs.recommended,
  prettierConfig  // disables ESLint formatting rules
];

.eslintignore dan .prettierignore

Beri tahu alat tersebut berkas mana yang harus dilewati. Berkas .eslintignore menggunakan sintaks gitignore. Biasanya Anda perlu mengabaikan node_modules, dist, dan berkas yang dibuat secara otomatis.

# .eslintignore
node_modules
dist
.next
coverage

Skrip npm untuk Linting

Tambahkan skrip lint dan format ke package.json agar CI dan rekan satu tim dapat menjalankannya secara konsisten.

{
  "scripts": {
    "lint": "eslint src --ext .js,.ts,.tsx",
    "lint:fix": "eslint src --fix",
    "format": "prettier --write src",
    "format:check": "prettier --check src"
  }
}

lint-staged dan husky untuk Kait Pra-Komit

Gunakan husky + lint-staged untuk melakukan linting dan pemformatan secara otomatis hanya pada berkas yang telah dipentaskan sebelum setiap komit Git. Ini mencegah kode yang belum diformat atau rusak masuk ke repositori.

npm install --save-dev husky lint-staged
npx husky init

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

EditorConfig untuk Konsistensi Dasar

Berkas .editorconfig menerapkan pengaturan dasar editor (gaya indentasi, akhir baris) di semua editor dan IDE, terlepas dari pengaya yang digunakan. Tambahkan berkas ini bersama Prettier.

# .editorconfig
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true

Pemeriksaan Singkat

Mengapa eslint-config-prettier perlu ditambahkan ke config ESLint yang juga menggunakan Prettier?

Rangkuman: Prettier dan ESLint

Prettier memformat kode secara otomatis saat disimpan melalui ekstensi VSCode. ESLint menemukan bug dan pelanggaran gaya. Gunakan eslint-config-prettier untuk menghindari konflik. Tambahkan lint-staged + husky untuk penegakan sebelum komit. Alat yang konsisten menghilangkan perdebatan pemformatan dan menemukan bug sebelum kode dirilis.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Pengaturan Prettier dan ESLint” gratis?

Ya — teks lengkap “Pengaturan Prettier dan ESLint” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Pengaturan Prettier dan ESLint”?

Tambahkan Prettier untuk pemformatan otomatis dan ESLint untuk menemukan kesalahan, konfigurasikan kedua alat, lalu integrasikan ke dalam alur pemformatan saat penyimpanan. Kamu berlatih Frontend Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Frontend Academy?

Tidak diperlukan pengalaman sebelumnya. Frontend Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.

Berapa lama pelajaran “Pengaturan Prettier dan ESLint” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Frontend Academy ini?

Ya. Setiap pelajaran Frontend Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

Chrome DevTools: Elemen, Konsol, Jaringan
VSCode: Ekstensi, Emmet, Pintasan
Pengaturan Prettier dan ESLint
Kompatibilitas Browser dan caniuse.com

← Kembali ke Frontend Academy