0Pricing
JavaScript Academy · Pelajaran

Linting dengan ESLint; Pemformatan Prettier

Temukan masalah umum dengan ESLint dan format otomatis dengan Prettier. Buat konfigurasi tetap kecil dan jalankan melalui skrip npm

Linting dengan ESLint; Pemformatan Prettier adalah pelajaran JavaScript Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 3. 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 JavaScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus JavaScript Academy mencakup 3 pelajaran total.

Mengapa pemeriksaan gaya dan pemformatan?

Tujuan: Menjaga kode tetap bersih dan konsisten.

  • ESLint → menemukan masalah
  • Prettier → memformat kode
  • Konfigurasi kecil; jalankan melalui npm scripts
  • Bawaan yang ramah pemula
Linting dengan ESLint; Pemformatan Prettier — ilustrasi 1

ESLint: menemukan masalah

ESLint menerapkan aturan untuk menemukan kesalahan dan memperbaiki gaya; di sini kita meniru beberapa pemeriksaan sederhana.

// Tiny "lint" demo: simple checks on a string of code
const sample = "const x=1; console.log(x)";

function lint(code) {
  const issues = [];
  if (code.includes("console.log")) {
    issues.push("no-console: avoid console.log in production code");
  }
  if (code.includes("=1;")) {
    issues.push("spacing: add spaces around = for readability");
  }
  if (!code.trim().endsWith(";")) {
    issues.push("semi: missing semicolon");
  }
  return issues;
}

console.log("lint issues:", lint(sample));
Linting dengan ESLint; Pemformatan Prettier — ilustrasi 2

Prettier: tata letak konsisten

Prettier berfokus pada pemformatan otomatis, sehingga semua orang menggunakan tata letak yang sama tanpa perdebatan.

// Tiny "format" demo: normalize spaces and add semicolon
function format(code) {
  // Very naive formatting just for demo
  const spaced = code.replaceAll("=1;", " = 1;");
  const withSemi = spaced.trim().endsWith(";") ? spaced.trim() : spaced.trim() + ";";
  return withSemi;
}

const ugly = "const x=1\nconsole.log( x )";
console.log("formatted:", format(ugly));
Linting dengan ESLint; Pemformatan Prettier — ilustrasi 3

Konfigurasi ESLint kecil

Mulailah dengan eslint:recommended, lalu tambahkan satu atau dua aturan. Buat tetap kecil agar mudah dipahami pemula.

// Example .eslintrc.json (printed lines)
const eslintrc = [
  "{",
  "  \"env\": { \"es2022\": true, \"node\": true },",
  "  \"extends\": [\"eslint:recommended\"],",
  "  \"rules\": {",
  "    \"no-console\": \"warn\",",
  "    \"semi\": [\"error\", \"always\"]",
  "  }",
  "}"
];

for (const l of eslintrc) console.log(l);
Linting dengan ESLint; Pemformatan Prettier — ilustrasi 4

Prettier kecil + scripts

Tambahkan scripts format dan lint sederhana agar tim dapat menjalankannya dengan mudah.

// Example .prettierrc (printed lines)
const prettierrc = [
  "{",
  "  \"semi\": true,",
  "  \"singleQuote\": true,",
  "  \"tabWidth\": 2",
  "}"
];

for (const l of prettierrc) console.log(l);

// Example npm scripts (printed)
const scripts = [
  "\"scripts\": {",
  "  \"lint\": \"eslint .\",",
  "  \"format\": \"prettier --write .\"",
  "}"
];

for (const l of scripts) console.log(l);
Linting dengan ESLint; Pemformatan Prettier — ilustrasi 5

Alur kerja sehari-hari

Kiat:

  • Jalankan format sebelum membuat commit.
  • Jaga aturan ESLint tetap sedikit dan jelas.
  • Gunakan eslint:recommended dan .prettierrc yang kecil.
  • Tambahkan skrip pintasan seperti npm run fix untuk perbaikan otomatis.
Linting dengan ESLint; Pemformatan Prettier — ilustrasi 6

Kuis Prettier vs ESLint

Cek cepat: Alat pemformatan.

Linting dengan ESLint; Pemformatan Prettier — ilustrasi 7

Ringkasan

Ringkasan: Gunakan ESLint untuk menemukan masalah dan Prettier untuk memformat kode. Buat konfigurasi tetap kecil dan jalankan keduanya melalui npm scripts agar alur kerja tim berjalan lancar.

Linting dengan ESLint; Pemformatan Prettier — ilustrasi 8

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Linting dengan ESLint; Pemformatan Prettier” gratis?

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

Apa yang akan aku pelajari di “Linting dengan ESLint; Pemformatan Prettier”?

Temukan masalah umum dengan ESLint dan format otomatis dengan Prettier. Buat konfigurasi tetap kecil dan jalankan melalui skrip npm Kamu berlatih JavaScript 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 JavaScript Academy?

Tidak diperlukan pengalaman sebelumnya. JavaScript 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 2 dari 3.

Berapa lama pelajaran “Linting dengan ESLint; Pemformatan Prettier” 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 JavaScript Academy ini?

Ya. Setiap pelajaran JavaScript 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

  1. Pola Pikir Pengujian — Pernyataan Kecil, AAA, merah→hijau→refaktor
  2. Linting dengan ESLint; Pemformatan Prettier
  3. Dasar CI — Jalankan Lint/Pengujian pada Setiap Push
← Kembali ke JavaScript Academy