VSCode & Extensions
Konfigurasi Visual Studio Code, extensions, settings, profiles, dan keyboard shortcuts untuk development workflow yang optimal.
Phase 2: IDE & Editor
"Editor yang dikonfigurasi dengan benar adalah multiplier untuk produktivitas."
📥 Install Visual Studio Code
brew install --cask visual-studio-codeDownload dari code.visualstudio.com dan drag ke Applications.
🔧 Enable CLI Command
Pastikan code command tersedia di terminal:
# Buka VSCode > Cmd+Shift+P > "Shell Command: Install 'code' command in PATH"
# Atau verifikasi:
code --version🧩 Extensions
✅ Required Extensions
Extensions ini wajib ada untuk development project ini:
| Extension | ID | Fungsi |
|---|---|---|
| ESLint | dbaeumer.vscode-eslint | Linting JavaScript/TS |
| Prettier | esbenp.prettier-vscode | Code formatting |
| Tailwind CSS IntelliSense | bradlc.vscode-tailwindcss | Tailwind autocomplete |
| TypeScript Importer | pmneo.tsimporter | Auto import |
| MDX | unifiedjs.vscode-mdx | MDX syntax & IntelliSense |
| PostCSS Language Support | csstools.postcss | PostCSS syntax |
💡 Recommended Extensions
Extensions yang meningkatkan DX tapi opsional:
| Extension | ID | Fungsi |
|---|---|---|
| GitLens | eamodio.gitlens | Git history & blame |
| Error Lens | usernamehw.errorlens | Inline error display |
| Pretty TypeScript Errors | yoavbls.pretty-ts-errors | Readable TS errors |
| Auto Rename Tag | formulahendry.auto-rename-tag | HTML/JSX tag rename |
| Path Intellisense | christian-kohler.path-intellisense | Path autocomplete |
| Material Icon Theme | pkief.material-icon-theme | File icons |
| Docker | ms-azuretools.vscode-docker | Docker support |
📥 Install Semua Extensions Otomatis
Ketika membuka project ini di VSCode, akan muncul prompt untuk install recommended extensions (dari .vscode/extensions.json).
Atau install manual via CLI:
code --install-extension dbaeumer.vscode-eslint
code --install-extension esbenp.prettier-vscode
code --install-extension bradlc.vscode-tailwindcss
code --install-extension pmneo.tsimporter
code --install-extension unifiedjs.vscode-mdx
code --install-extension csstools.postcss
code --install-extension eamodio.gitlens
code --install-extension usernamehw.errorlens
code --install-extension yoavbls.pretty-ts-errors
code --install-extension formulahendry.auto-rename-tag
code --install-extension christian-kohler.path-intellisense
code --install-extension pkief.material-icon-theme
code --install-extension ms-azuretools.vscode-docker⚙️ Settings
Project settings tersimpan di .vscode/settings.json dan otomatis aktif saat buka project:
Key Settings
Prop
Type
Search Exclusions
Folder berikut di-exclude dari search agar tidak mengganggu:
**/node_modules- Dependencies (718MB+)**/.next- Build output**/.source- Generated content**/pnpm-lock.yaml- Lockfile
VSCode Profiles (On-Demand)
Untuk menghindari install semua extensions di default profile, bisa buat Profiles khusus:
Buat Profile Baru
Cmd+Shift+P > "Profiles: Create Profile" > Beri nama "News Faisal"
Assign Extensions ke Profile
Aktifkan hanya extensions yang dibutuhkan project ini di profile tersebut.
Switch Antar Profile
Cmd+Shift+P > "Profiles: Switch Profile"
Hapus Profile
Ketika project selesai, hapus profile untuk membersihkan extensions:
Cmd+Shift+P > "Profiles: Delete Profile"
Profiles berguna jika kamu bekerja di multiple project dengan stack berbeda (misal: Go Backend vs React Frontend). Setiap profile punya set extensions sendiri.
Keyboard Shortcuts
Shortcuts yang sering dipakai di project ini:
| Shortcut | Action |
|---|---|
Cmd+Shift+P | Command Palette |
Cmd+P | Quick Open file |
Cmd+Shift+F | Search across files |
Cmd+B | Toggle sidebar |
Cmd+J | Toggle terminal |
Cmd+Shift+E | Explorer |
Cmd+Shift+G | Source Control (Git) |
Cmd+K Cmd+S | Open Keyboard Shortcuts |
| `Ctrl+`` | Toggle integrated terminal |
Cmd+D | Select next occurrence |
Cmd+Shift+L | Select all occurrences |
Alt+Up/Down | Move line up/down |
Cara Uninstall
Last updated on