すぐに使える便利なVScode設定紹介

VS Code（Visual Studio Code）は、Microsoftが開発した無料のソースコードエディタで、多くの開発者に愛用されています。様々な拡張機能とカスタマイズ可能な設定により、自分好みの開発環境を作り上げることができます。ここでは、VS Codeをより便利に使うための設定をいくつか紹介します。

参考Visual Studio Code – Code Editing. Redefined`vscodeダウンロード先はこちら

1. テーマとアイコンの設定

テーマ

カラーテーマは作業の効率や目の疲れに大きく影響します。おすすめのテーマは以下の通りです。

One Dark Pro：落ち着いたダークテーマ
Material Theme：カラフルで視認性の高いテーマ
Dracula Official：目に優しい配色のダークテーマ

json

{
  "workbench.colorTheme": "One Dark Pro"
}

アイコンテーマ

ファイルアイコンも変更することで、視認性が向上します。

Material Icon Theme：豊富なアイコンセット
VSCode Icons：多くのファイルタイプに対応

json

{
  "workbench.iconTheme": "material-icon-theme"
}

2. エディタ設定

自動保存

ファイルを自動保存する設定です。作業中に保存を忘れることがありません。

json

{
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 1000
}

フォーマット

コードフォーマッタを自動で実行する設定です。PrettierやESLintなどが一般的です。

json

{
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true
}

3. インテリセンスと補完

設定例

コード補完を強化するための設定です。

json

{
  "editor.quickSuggestions": {
    "other": true,
    "comments": true,
    "strings": true
  },
  "editor.suggestSelection": "first",
  "editor.acceptSuggestionOnEnter": "on"
}

4. キーバインド

よく使うショートカットのカスタマイズ

自分の使いやすいショートカットキーに変更することができます。

json

[
  {
    "key": "ctrl+b",
    "command": "workbench.action.toggleSidebarVisibility"
  },
  {
    "key": "ctrl+e",
    "command": "workbench.action.quickOpen"
  }
]