Editor & Lingkungan Kerja

Kenapa ini penting

Kode ditulis sebagai teks polos (plain text). Microsoft Word atau Google Docs menyimpan banyak informasi tersembunyi (format huruf, margin, tanda kutip "melengkung") yang akan merusak kode. Notepad dan TextEdit bisa dipakai, tetapi terlalu polos: tidak ada pewarnaan sintaks, tidak ada saran otomatis, tidak ada peringatan kalau kamu lupa menutup tag. Code editor adalah bengkel lengkap untuk developer. Editor yang tertata rapi bisa menghemat jam kerja tiap minggu dan mencegah banyak error kecil sejak awal. Modul ini membahas VS Code, ekstensi yang layak dipasang, alat perapi kode (Prettier) dan pemeriksa kode (ESLint), cara menyusun folder proyek, dan cara melihat hasil kerja dengan server lokal.

Konsep inti

Pilihan editor

Materi ini memakai Visual Studio Code (VS Code), gratis dari Microsoft, tersedia untuk Windows, macOS, dan Linux. Versi saat materi ini ditulis adalah 1.143. VS Code diperbarui sekitar sebulan sekali dan biasanya memperbarui diri sendiri.

Fitur editor yang harus kamu kuasai

• Syntax highlighting: kata kunci, string, dan komentar diberi warna berbeda, sehingga salah ketik mudah terlihat.
• IntelliSense (code completion): saran otomatis saat mengetik. Ketik doc lalu VS Code menawarkan document.
• Emmet (bawaan VS Code): ketik ! lalu Tab di file .html untuk membuat kerangka HTML lengkap. Ketik ul>li*3 lalu Tab untuk membuat list berisi 3 item.
• Find and replace: Ctrl+F / Cmd+F di satu file, Ctrl+Shift+F / Cmd+Shift+F di seluruh proyek.
• Command Palette: Ctrl+Shift+P / Cmd+Shift+P, pintu ke semua perintah VS Code. Kalau lupa letak menu, cari di sini.
• Terminal terintegrasi: Ctrl+` (backtick) membuka terminal di dalam VS Code, langsung di folder proyek.
• Multi-cursor: Alt+Click (Windows/Linux) atau Option+Click (macOS) untuk mengetik di beberapa tempat sekaligus.
• Integrasi Git: panel Source Control (ikon cabang) menampilkan file yang berubah.

Cara membuka satu folder proyek: File > Open Folder, atau dari terminal ketik code . (perintah code perlu diaktifkan sekali lewat Command Palette: "Shell Command: Install 'code' command in PATH" di macOS; di Windows sudah otomatis saat instalasi). Selalu buka folder proyek, bukan file satu per satu, supaya fitur pencarian, Git, dan ekstensi bekerja penuh.

Ekstensi yang layak dipasang

Buka panel Extensions (Ctrl+Shift+X / Cmd+Shift+X), lalu cari:

Ada juga asisten AI seperti GitHub Copilot. Alat ini bisa membantu, tetapi MDN mengingatkan bahwa saran AI sering keliru atau menyesatkan, jadi selalu verifikasi. Untuk pemula, sebaiknya matikan saran otomatis di awal supaya otakmu terlatih (dibahas di modul 9). Jangan memasang puluhan ekstensi sekaligus; setiap ekstensi memperlambat editor. Pasang hanya yang kamu pakai.

Prettier dan ESLint: perapi dan pemeriksa

• Prettier adalah formatter: mengatur spasi, indentasi, tanda kutip, dan panjang baris supaya seragam. Ia tidak peduli apakah kodemu benar, hanya rapi. Versi saat materi ini ditulis: 3.9.
• ESLint adalah linter: membaca JavaScript dan memperingatkan pola yang berpotensi bug, misalnya variabel yang dibuat tapi tidak dipakai. Versi saat ini: 10.13, yang memakai konfigurasi "flat config" dalam file eslint.config.js.

Analogi: Prettier adalah penata letak koran (semua kolom rapi), ESLint adalah editor bahasa (menandai kalimat yang salah makna). Untuk tahap ini, cukup pasang Prettier di VS Code dan aktifkan Format On Save. ESLint akan kamu pakai serius di fase JavaScript, biasanya sudah otomatis disiapkan oleh tool seperti Vite atau Next.js.

Struktur folder proyek

Proyek web statis sederhana yang rapi:

portofolio-budi/
├── index.html          ← halaman utama, WAJIB bernama index.html
├── about.html
├── css/
│   └── style.css
├── js/
│   └── main.js
├── images/
│   ├── foto-profil.jpg
│   └── logo.svg
├── .gitignore
└── README.md           ← penjelasan singkat proyek

Kenapa index.html? Server web otomatis menyajikan index.html ketika seseorang membuka alamat folder. Prinsipnya: satu folder satu proyek, nama huruf kecil dengan tanda hubung, pisahkan jenis file ke subfolder, dan aktifkan opsi tampilkan ekstensi file serta file tersembunyi di sistem operasimu supaya style.css.txt atau .gitignore tidak luput dari pandangan.

Live Server

Membuka file HTML dengan klik ganda memakai alamat file:///.... Untuk halaman sederhana tidak masalah, tetapi beberapa fitur (misalnya fetch() ke file JSON lokal dan JavaScript modules) butuh halaman yang dilayani lewat http://. Live Server menjalankan server kecil di komputermu (alamatnya seperti http://127.0.0.1:5500) dan me-refresh browser otomatis tiap kali kamu menyimpan file. Cara pakai: klik kanan index.html lalu pilih Open with Live Server, atau klik Go Live di status bar bawah. Klik lagi untuk mematikan.

Contoh kode

Pengaturan VS Code yang disarankan untuk pemula. Buka Command Palette, cari "Preferences: Open User Settings (JSON)", lalu tambahkan:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.tabSize": 2,
  "editor.wordWrap": "on",
  "files.autoSave": "onFocusChange",
  "editor.minimap.enabled": false
}

Penjelasan: kode otomatis dirapikan Prettier saat disimpan, indentasi 2 spasi (standar komunitas web), baris panjang dibungkus supaya tidak perlu scroll ke samping, file tersimpan otomatis saat pindah jendela.

Kerangka halaman pertama. Di VS Code cukup ketik ! lalu Tab untuk mendapatkan sebagian besar kode ini:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Portofolio Budi</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <h1>Halo, saya Budi</h1>
  <p>Saya sedang belajar web development.</p>
  <script src="js/main.js"></script>
</body>
</html>

/* css/style.css */
body {
  font-family: system-ui, sans-serif;
  max-width: 40rem;
  margin: 2rem auto;
  padding: 0 1rem;
  line-height: 1.6;
}

// js/main.js
console.log("Halaman siap!");
// → Halaman siap!  (lihat di tab Console DevTools)

Menyiapkan Prettier per proyek dari terminal, supaya semua anggota tim memakai aturan yang sama:

cd portofolio-budi
npm init -y
npm install -D prettier
echo '{ "singleQuote": false, "semi": true }' > .prettierrc
npx prettier --check .
# → Checking formatting... lalu daftar file yang belum rapi
npx prettier --write .
# → file-file dirapikan

Kesalahan umum

• Membuka file satu per satu, bukan folder. Fitur pencarian proyek, Git, dan path relatif jadi kacau. Selalu Open Folder.
• Lupa menyimpan. Titik putih di tab file berarti belum disimpan. Browser hanya membaca versi yang sudah tersimpan. Aktifkan auto save.
• Nama file index.HTML atau Index.html. Di server Linux, ini berbeda dengan index.html. Pakai huruf kecil semua.
• Path CSS salah. href="style.css" padahal file ada di css/style.css. Path relatif dihitung dari lokasi file HTML.
• Format On Save tidak jalan. Biasanya formatter default belum dipilih. Cek setting editor.defaultFormatter.

Latihan

1. Mudah, Pasang VS Code dan ekstensi Prettier serta Live Server. Aktifkan Format On Save.
2. Sedang, Buat struktur folder portofolio-kamu seperti contoh di atas (index.html, css/style.css, js/main.js, images/). Isi halaman dengan nama dan satu paragraf, lalu buka dengan Live Server. Ubah teks dan perhatikan browser me-refresh sendiri.
3. Menantang, Tulis HTML yang sengaja berantakan (indentasi acak, semua di satu baris), lalu jalankan npx prettier --write index.html. Bandingkan sebelum dan sesudah. Tambahkan juga halaman about.html dan link bolak-balik antara kedua halaman.

mkdir -p portofolio-kamu/css portofolio-kamu/js portofolio-kamu/images
cd portofolio-kamu
touch index.html css/style.css js/main.js
code .

<!DOCTYPE html><html lang="id"><head><meta charset="UTF-8"><title>Tentang</title></head><body><h1>Tentang saya</h1><a href="index.html">Kembali ke beranda</a></body></html>

Ringkasan

• Tulis kode di code editor (VS Code), bukan pengolah kata.
• Kuasai Command Palette, Emmet, find in files, terminal terintegrasi, dan multi-cursor.
• Prettier merapikan format, ESLint menangkap pola bug di JavaScript.
• Aktifkan Format On Save dan auto save.
• Susun proyek dalam satu folder dengan index.html dan subfolder css, js, images; nama file huruf kecil tanpa spasi.
• Live Server melayani halaman lewat http:// dan me-refresh otomatis.