Cara Merapikan Codingan di VSCode: Shortcut, Otomatis & Ekstensi

Codingan berantakan? Bosan merapikan spasi dan indentasi satu per satu? Tenang, ada cara merapikan codingan di VSCode yang bisa dilakukan otomatis hanya dengan satu shortcut atau bahkan tanpa klik sama sekali.

Artikel ini akan membahas semua cara: pakai shortcut keyboard, aktifkan format on save, hingga ekstensi terbaik untuk merapikan kode di Visual Studio Code.

Tabel Shortcut Merapikan Kode di VSCode

Shortcut utama yang paling dicari: Shift + Alt + F — cukup tekan, seluruh codingan langsung rapi.

Cara Merapikan Codingan di VSCode Otomatis

Cara paling efisien? Atur VSCode agar merapikan codingan otomatis setiap kali menyimpan file. Begini caranya:

Via GUI Settings

1. Buka Settings (Ctrl + ,)
2. Ketik format on save di kolom pencarian
3. Centang Editor: Format On Save
4. Cari default formatter dan pilih Prettier - Code formatter

Via settings.json (Langsung)

Buka Command Palette (Ctrl + Shift + P), cari Preferences: Open Settings (JSON), lalu tambahkan:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

Setelah ini, setiap Ctrl + S akan otomatis merapikan codingan — tanpa perlu shortcut terpisah.

5 Ekstensi VSCode untuk Merapikan Code

1. Prettier — Sang Juara

Prettier adalah ekstensi vscode untuk merapikan code paling populer. Mendukung JavaScript, TypeScript, HTML, CSS, JSON, Markdown, YAML, dan masih banyak lagi. Lihat daftar lengkap ekstensi lainnya di Ekstensi VS Code Terbaik 2026.

Cara install:

1. Buka tab Extensions (Ctrl + Shift + X)
2. Cari Prettier - Code formatter
3. Klik Install

Cara pakai:

• Klik kanan → Format Document (Shift + Alt + F)
• Atau biarkan otomatis via format on save

2. ESLint — Detect Error Otomatis

ESLint bukan sekadar formatter — ia akan memeriksa kode JavaScript/TypeScript saat Anda mengetik dan memberi peringatan jika ada kesalahan. Cocok dipasangkan dengan Prettier.

Konfigurasi agar tidak bentrok dengan Prettier:

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

3. Black Formatter — Khusus Python

Untuk pengguna Python, gunakan Black Formatter dari Microsoft — formatter bawaan Python yang tidak bisa dikonfigurasi (sengaja, biar kode semua orang seragam).

4. Prettier PHP Plugin

Jika Anda coding PHP di VSCode, tambahkan plugin PHP untuk Prettier:

npm install --global @prettier/plugin-php

Setelah itu Prettier bisa merapikan kode PHP secara otomatis.

5. clang-format — C / C++ / C#

Ekstensi clang-format untuk bahasa C, C++, dan C#. Bisa diintegrasikan dengan format on save seperti Prettier.

Cara Merapikan Codingan di VSCode: Panduan Lengkap

Step-by-Step untuk Pemula

1. Install VSCode dari code.visualstudio.com
2. Install Prettier dari tab Extensions
3. Aktifkan Format on Save (Ctrl + , → cari format on save → centang)
4. Set Prettier sebagai default formatter
5. Coba buka file → tekan Ctrl + S — codingan langsung rapi

Selesai. Hanya 5 langkah.

Tips Pengaturan Tab dan Spasi

Atur preferensi indentasi di settings.json:

{
  "editor.tabSize": 2,
  "editor.insertSpaces": true
}

• Gunakan tabSize: 2 untuk JavaScript/HTML/CSS
• Gunakan tabSize: 4 untuk Python, PHP, Go
• Setel "editor.detectIndentation": true agar VSCode otomatis mendeteksi indentasi file yang sedang dibuka

Tips Komentar yang Efektif

Komentar yang baik menjelaskan “kenapa” bukan “apa”:

// BURUK: ini loop untuk hitung total
for (let i = 0; i < items.length; i++) { total += items[i]; }

// BAIK: fallback harga ke 0 jika API return null
for (let i = 0; i < items.length; i++) { total += items[i].price ?? 0; }

Gunakan Ctrl + / untuk toggle komentar cepat.

Bahasa yang Didukung Prettier

FAQ — Pertanyaan Umum

Apa shortcut merapikan codingan di VSCode?

Shortcut-nya adalah Shift + Alt + F (Windows) atau Shift + Option + F (Mac). Pastikan sudah menginstall formatter seperti Prettier.

Bagaimana cara merapikan kode otomatis di VSCode?

Aktifkan Format on Save di Settings (Ctrl + , → cari "format on save" → centang). Setelah itu setiap Ctrl + S akan otomatis merapikan codingan.

Apa extension vscode untuk merapikan code PHP?

Install Prettier lalu jalankan npm install --global @prettier/plugin-php. Atau gunakan ekstensi PHP Intelephense yang juga punya fitur formatting.

Prettier vs ESLint, bedanya apa?

Prettier merapikan format (spasi, indentasi, tanda kutip). ESLint memeriksa kualitas kode (variable tak dipakai, sintaks error). Sebaiknya pakai keduanya.

Cara merapikan HTML di VSCode?

Install Prettier → buka file .html → tekan Shift + Alt + F. Atau aktifkan format on save agar otomatis.

Shortcut merapikan code di VSCode tidak bekerja?

Penyebabnya: (1) Belum install formatter, (2) File tidak dikenali ekstensinya, (3) Konflik formatter. Solusi: install Prettier, set sebagai default formatter di settings.json.

• 5 Cara Cek Versi Python di CMD, Terminal & VS Code
• Program FizzBuzz Python: Cara Mudah Memahami Looping dan Percabangan
• Query dan Tabel “Not Null MySQL” untuk Memastikan Integritas Data
• Kompleksitas Waktu Algoritma: Pengertian, Analisis, dan Penerapan

Kesimpulan

Cara merapikan codingan di VSCode yang paling cepat: install Prettier → aktifkan format on save → biarkan Ctrl + S yang bekerja. Untuk hasil maksimal, tambahkan ESLint agar kode tidak hanya rapi tapi juga bebas error.

Ringkasan tiga cara utama:

1. Manual — tekan Shift + Alt + F kapan saja
2. Otomatis — aktifkan format on save, biarkan VSCode merapikan sendiri
3. Dengan ekstensi — Prettier + ESLint + formatter spesifik bahasa

Dengan menerapkan ini, codingan Anda akan selalu rapi tanpa perlu bersusah payah merapikan spasi dan indentasi secara manual. Selamat ngoding!