Cara Merapikan Code di VSCode: Shortcut 1 Klik, 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.

Pengalaman Saya: Waktu Prettier dan ESLint Bentrok, Codingan Malah Makin Berantakan

ini pengalaman yang cukup sering saya temui waktu kerja di project tim: saya install Prettier dan ESLint barengan, tapi lupa atur codeActionsOnSave-nya dengan benar. hasilnya? setiap kali Ctrl + S, ESLint dan Prettier saling “rebutan” merapikan file yang sama — Prettier mau pakai tanda kutip satu ('), tapi rule ESLint di project itu maunya tanda kutip dua ("). akibatnya file malah ke-format bolak-balik dan kadang muncul error merah di seluruh file padahal kodenya sebenarnya tidak salah.

setelah saya cari tahu, ternyata akar masalahnya karena ESLint punya rule formatting sendiri (seperti quotes, indent, semi) yang tumpang tindih sama Prettier. solusinya, install package eslint-config-prettier supaya rule formatting bawaan ESLint yang bentrok dengan Prettier otomatis dimatikan, dan biarkan Prettier full mengurus formatting, sementara ESLint fokus ke deteksi bug logic saja:

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

lalu tambahkan "prettier" di bagian paling akhir array extends pada file .eslintrc:

{
  "extends": ["eslint:recommended", "prettier"]
}

Urutan ini penting — "prettier" harus di posisi paling akhir, supaya rule-nya “menimpa” rule formatting dari config sebelumnya. Kalau kalian taruh di awal, rule bawaan lain bisa menimpanya balik dan konfliknya muncul lagi. Detail lengkapnya ada di dokumentasi resmi eslint-config-prettier.

Cara Merapikan Kode Go dan Rust di VSCode (Plugin Komunitas)

Prettier memang tidak mendukung Go dan Rust secara native, tapi bukan berarti kalian tidak bisa merapikan kode otomatis di dua bahasa ini — formatter-nya cuma beda ekstensi.

Golang

Install ekstensi resmi Go dari tim Go di VS Code Marketplace. Ekstensi ini otomatis memanggil gofmt (formatter bawaan Go) setiap kali file disimpan — tidak perlu setting tambahan seperti Prettier. Kalau mau format manual, tetap bisa pakai shortcut yang sama: Shift + Alt + F.

Tambahkan ini di settings.json supaya format on save khusus file Go aktif:

{
  "[go]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "golang.go"
  }
}

Rust

Untuk Rust, install ekstensi rust-analyzer — language server resmi yang direkomendasikan komunitas Rust (menggantikan ekstensi lama “Rust” yang sudah tidak aktif dikembangkan). rust-analyzer otomatis menggunakan rustfmt untuk formatting.

{
  "[rust]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "rust-lang.rust-analyzer"
  }
}

Kalau rustfmt belum terpasang di sistem kalian, jalankan dulu:

rustup component add rustfmt

Bedanya dengan Prettier: Go dan Rust punya formatter “resmi” dari bahasanya sendiri (gofmt dan rustfmt) yang sengaja dibuat tidak bisa dikonfigurasi banyak — mirip filosofi Black Formatter di Python. Tujuannya supaya semua kode Go atau Rust di dunia format-nya seragam, tidak peduli siapa yang menulis.

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.

Kenapa Prettier dan ESLint suka bentrok waktu format on save?

Karena ESLint punya rule formatting sendiri (seperti quotes, indent, semi) yang tumpang tindih dengan Prettier. Solusinya install eslint-config-prettier agar rule formatting bawaan ESLint yang bentrok otomatis dimatikan.

Apa ekstensi terbaik untuk merapikan kode Golang di VSCode?

Ekstensi resmi Go dari tim Go, karena otomatis memanggil gofmt sebagai formatter bawaan tanpa perlu setting tambahan seperti Prettier.

Bagaimana cara merapikan kode Rust otomatis di VSCode?

Install ekstensi rust-analyzer, lalu aktifkan format on save. rust-analyzer otomatis menggunakan rustfmt untuk merapikan kode setiap file disimpan.

• 10 Ekstensi VS Code Terbaik 2026
• Cara Mengatur Posisi Gambar di CSS
• Perbedaan Margin dan Padding di CSS
• 5 Cara Cek Versi Python di CMD, Terminal & VS Code

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 (dipadukan dengan eslint-config-prettier supaya tidak bentrok) agar kode tidak hanya rapi tapi juga bebas error. Untuk bahasa di luar ekosistem JavaScript seperti Go dan Rust, andalkan formatter resmi bahasanya masing-masing (gofmt dan rustfmt) lewat ekstensi komunitas yang sudah terintegrasi rapi dengan VSCode.

Untuk dokumentasi resmi, kamu bisa membaca dokumentasi VSCode: Basic Editing dan dokumentasi Prettier untuk konfigurasi lebih lanjut.

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!