K

April 18, 2026

Konfigurasi VSCode.

Kumpulan pengaturan settings.json pribadi untuk VSCode: tema, font, format on save, dan formatter per bahasa.

#vscode #editor #prettier #settings

Catatan pengaturan pribadi untuk Visual Studio Code lewat settings.json. Berguna sebagai referensi cepat saat setup ulang editor di mesin baru — mencakup tema, font, format otomatis saat menyimpan, dan formatter khusus per bahasa (HTML, JavaScript, JSON, CSS, PHP, Python, Dart, YAML).

Cara membuka settings.json

  1. Tekan Ctrl + Shift + P untuk membuka Command Palette.
  2. Ketik Preferences: Open User Settings (JSON) (atau cari settings.json), lalu pilih.
  3. Tempel konfigurasi di bawah ini.

Beberapa pengaturan merujuk pada extension tertentu (misalnya vscode-icons, One Dark Pro Flat, esbenp.prettier-vscode, bmewburn.vscode-intelephense-client, Dart-Code.dart-code). Pasang extension terkait terlebih dahulu agar pengaturannya berpengaruh.

Isi settings.json

{
  "workbench.iconTheme": "vscode-icons",
  "workbench.colorTheme": "One Dark Pro Flat",
  "files.autoSave": "onFocusChange",
  "editor.fontLigatures": false,
  "editor.fontFamily": "Fira Code Retina",
  "editor.fontSize": 18,
  // "editor.wordWrap": "wordWrapColumn",
  "editor.tabSize": 2,
  "prettier.requireConfig": false,
  "prettier.semi": false,
  "editor.codeActionsOnSave": { "source.fixAll": true },
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnPaste": true,
  "editor.formatOnSave": true,
  "editor.formatOnType": true,
  "eslint.alwaysShowStatus": true,
  "html.format.enable": false,
  "htmlhint.enable": true,
  "[html]": {
    "editor.defaultFormatter": "mohd-akram.vscode-html-format",
    "editor.formatOnSave": true
  },
  "[javascript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features",
    "editor.formatOnSave": true
  },
  "[json]": {
    "editor.defaultFormatter": "vscode.json-language-features",
    "editor.formatOnSave": true
  },
  "rainbowTags.allowEverywhere": true,
  "emmet.triggerExpansionOnTab": true,
  "js/ts.implicitProjectConfig.checkJS": true,
  "editor.linkedEditing": true,
  "files.associations": {
    "*.ejs": "html"
  },
  "[css]": {
    "editor.defaultFormatter": "vscode.css-language-features"
  },
  "liveServer.settings.donotShowInfoMsg": true,
  "javascript.updateImportsOnFileMove.enabled": "always",
  "vsicons.dontShowNewVersionMessage": true,
  "[python]": {
    "editor.defaultFormatter": "ms-python.python"
  },
  "explorer.confirmDragAndDrop": false,
  "[yaml]": {
    "editor.defaultFormatter": "redhat.vscode-yaml"
  },
  "redhat.telemetry.enabled": true,
  "liveServer.settings.donotVerifyTags": true,
  "[php]": {
    "editor.defaultFormatter": "bmewburn.vscode-intelephense-client"
  },
  "[dart]": {
    "editor.formatOnSave": true,
    "editor.formatOnType": true,
    "editor.rulers": [80],
    "editor.selectionHighlight": false,
    "editor.suggest.snippetsPreventQuickSuggestions": false,
    "editor.suggestSelection": "first",
    "editor.tabCompletion": "onlySnippets",
    "editor.wordBasedSuggestions": false,
    "editor.defaultFormatter": "Dart-Code.dart-code"
  },
  "window.zoomLevel": 1
}

Catatan: pada VSCode versi baru, opsi eslint.alwaysShowStatus dan editor.wordBasedSuggestions bernilai boolean sudah usang (yang terakhir kini menerima string seperti "off"/"matchingDocuments"). Sesuaikan bila editor menampilkan peringatan deprecated.

Hey! I’m Fanny, the software engineer tending to this digital garden. You can read more about me, or subscribe by email.

Comments