VSCode アイコンとテーマのおすすめ完全ガイド - 作業効率と視認性を向上させる厳選カスタマイズ

1

code --install-extension PKief.material-icon-theme

1
2
3
4
5
6

{
  "workbench.iconTheme": "material-icon-theme",
  "material-icon-theme.folders.theme": "specific",
  "material-icon-theme.folders.color": "#90a4ae",
  "material-icon-theme.files.color": "#90a4ae"
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

{
  // specific: フォルダ名に応じた個別アイコン
  "material-icon-theme.folders.theme": "specific",
  
  // classic: シンプルな統一デザイン
  // "material-icon-theme.folders.theme": "classic",
  
  // none: フォルダアイコンを非表示
  // "material-icon-theme.folders.theme": "none"
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

{
  "material-icon-theme.files.associations": {
    "*.config.ts": "settings",
    "docker-compose.yml": "docker",
    ".env.local": "tune"
  },
  "material-icon-theme.folders.associations": {
    "adapters": "controller",
    "usecases": "functions",
    "entities": "class"
  }
}

1
2
3
4
5
6
7

{
  // アイコンの不透明度（0〜1）
  "material-icon-theme.opacity": 1,
  
  // アイコンの彩度（0でグレースケール）
  "material-icon-theme.saturation": 1
}

1

code --install-extension vscode-icons-team.vscode-icons

1
2
3
4

{
  "workbench.iconTheme": "vscode-icons",
  "vsicons.dontShowNewVersionMessage": true
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

{
  // Angular プロジェクトの自動検出
  "vsicons.presets.angular": true,
  
  // JavaScript公式アイコンの使用
  "vsicons.presets.jsOfficial": false,
  
  // TypeScript公式アイコンの使用
  "vsicons.presets.tsOfficial": false
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

{
  "vsicons.associations.files": [
    {
      "icon": "js",
      "extensions": ["myext"],
      "format": "svg"
    }
  ],
  "vsicons.associations.folders": [
    {
      "icon": "src",
      "extensions": ["source"],
      "format": "svg"
    }
  ]
}

1

code --install-extension miguelsolorio.fluent-icons

1

code --install-extension miguelsolorio.symbols

1

code --install-extension zhuangtongfa.Material-theme

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

{
  // デフォルト
  "workbench.colorTheme": "One Dark Pro",
  
  // フラットスタイル
  // "workbench.colorTheme": "One Dark Pro Flat",
  
  // より暗いスタイル
  // "workbench.colorTheme": "One Dark Pro Darker"
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

{
  "editor.tokenColorCustomizations": {
    "[One Dark Pro]": {
      "textMateRules": [
        {
          "scope": [
            "comment",
            "keyword",
            "storage.modifier",
            "entity.other.attribute-name"
          ],
          "settings": {
            "fontStyle": "italic"
          }
        }
      ]
    }
  }
}

1

code --install-extension dracula-theme.theme-dracula

1
2
3

{
  "workbench.colorTheme": "Dracula"
}

1
2
3
4
5
6
7
8
9

{
  "workbench.colorCustomizations": {
    "[Dracula]": {
      "editor.background": "#1e1f29",
      "sideBar.background": "#21222c",
      "activityBar.background": "#21222c"
    }
  }
}

1

code --install-extension GitHub.github-vscode-theme

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

{
  // ダーク（デフォルト）
  "workbench.colorTheme": "GitHub Dark Default",
  
  // ダーク（高コントラスト）
  // "workbench.colorTheme": "GitHub Dark High Contrast",
  
  // ダーク（Dimmed）
  // "workbench.colorTheme": "GitHub Dark Dimmed",
  
  // ライト（デフォルト）
  // "workbench.colorTheme": "GitHub Light Default",
  
  // 色覚対応（ダーク）
  // "workbench.colorTheme": "GitHub Dark Colorblind"
}

1

code --install-extension enkia.tokyo-night

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

{
  // 標準ダーク
  "workbench.colorTheme": "Tokyo Night",
  
  // やや明るいダーク
  // "workbench.colorTheme": "Tokyo Night Storm",
  
  // ライトテーマ
  // "workbench.colorTheme": "Tokyo Night Light"
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

{
  "editor.tokenColorCustomizations": {
    "[Tokyo Night]": {
      "textMateRules": [
        {
          "scope": [
            "comment",
            "keyword.control.flow",
            "storage.modifier"
          ],
          "settings": {
            "fontStyle": ""
          }
        }
      ]
    }
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

{
  "workbench.colorCustomizations": {
    "[Tokyo Night]": {
      "foreground": "#959cbd",
      "tab.activeForeground": "#bdc7f0",
      "tab.inactiveForeground": "#959cbd",
      "sideBar.foreground": "#959cbd",
      "statusBar.foreground": "#bdc7f0"
    }
  }
}

1

code --install-extension sdras.night-owl

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

{
  // ダークテーマ
  "workbench.colorTheme": "Night Owl",
  
  // イタリック無効版
  // "workbench.colorTheme": "Night Owl (No Italics)",
  
  // ライトテーマ
  // "workbench.colorTheme": "Light Owl"
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

{
  "workbench.colorCustomizations": {
    "[Night Owl]": {
      "activityBar.background": "#000C1D",
      "activityBar.border": "#102a44",
      "sideBar.background": "#001122",
      "sideBar.border": "#102a44",
      "sideBar.foreground": "#8BADC1"
    }
  }
}

1

code --install-extension arcticicestudio.nord-visual-studio-code

1
2
3

{
  "workbench.colorTheme": "Nord"
}

1
2
3
4
5

{
  "workbench.colorTheme": "Tokyo Night",
  "workbench.iconTheme": "material-icon-theme",
  "material-icon-theme.folders.theme": "specific"
}

1
2
3
4
5

{
  "workbench.colorTheme": "GitHub Dark Default",
  "workbench.iconTheme": "vscode-icons",
  "vsicons.presets.angular": false
}

1
2
3
4

{
  "workbench.colorTheme": "Nord",
  "workbench.iconTheme": "symbols"
}

1
2
3
4
5
6

{
  "workbench.colorTheme": "Dracula",
  "workbench.iconTheme": "material-icon-theme",
  "material-icon-theme.saturation": 1,
  "material-icon-theme.opacity": 1
}

1
2
3
4
5
6
7
8
9

{
  "workbench.colorCustomizations": {
    "[One Dark Pro]": {
      "editor.background": "#1e2127",
      "editor.foreground": "#abb2bf",
      "editor.lineHighlightBackground": "#2c313a"
    }
  }
}

1
2
3
4
5
6
7
8
9

{
  "workbench.colorCustomizations": {
    "[Dracula]": {
      "sideBar.background": "#21222c",
      "sideBar.foreground": "#f8f8f2",
      "sideBarTitle.foreground": "#ff79c6"
    }
  }
}

1
2
3
4
5
6
7
8
9

{
  "workbench.colorCustomizations": {
    "[Tokyo Night]": {
      "terminal.background": "#1a1b26",
      "terminal.foreground": "#a9b1d6",
      "terminalCursor.foreground": "#c0caf5"
    }
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

{
  "editor.tokenColorCustomizations": {
    "[Night Owl]": {
      "comments": "#637777",
      "strings": "#ecc48d",
      "keywords": "#c792ea",
      "functions": "#82aaff",
      "variables": "#addb67"
    }
  }
}