VSCodeチートシート：ショートカット・settings.json・言語別セットアップまとめ

VSCode
スポンサーリンク

VSCodeチートシート：ショートカット・settings.json・言語別セットアップまとめ

はじめに

VSCodeはTypeScript・Python・Rubyなど多くの言語で使われる汎用エディタです。この記事ではよく使うキーボードショートカット、settings.json のおすすめ設定、言語別のセットアップをまとめます。

キーボードショートカット

Mac（Cmd）と Windows/Linux（Ctrl）の対応を併記します。

ファイル・パネル操作

操作 Mac Windows/Linux
コマンドパレットを開く Cmd+Shift+P Ctrl+Shift+P
ファイルをすばやく開く Cmd+P Ctrl+P
サイドバーの表示切替 Cmd+B Ctrl+B
ターミナルの表示切替 Cmd+J Ctrl+J
新しいターミナルを開く `Ctrl+Shift+`` `Ctrl+Shift+``
エクスプローラーを開く Cmd+Shift+E Ctrl+Shift+E
拡張機能を開く Cmd+Shift+X Ctrl+Shift+X
設定を開く Cmd+, Ctrl+,

編集

操作 Mac Windows/Linux
行を上下に移動 Option+↑/↓ Alt+↑/↓
行を上下にコピー Shift+Option+↑/↓ Shift+Alt+↑/↓
行を削除 Cmd+Shift+K Ctrl+Shift+K
行にコメントを追加 Cmd+/ Ctrl+/
ブロックコメント Shift+Option+A Shift+Alt+A
インデントを増やす / 減らす Cmd+] / Cmd+[ Ctrl+] / Ctrl+[
選択範囲を展開 Ctrl+Shift+Cmd+→ Shift+Alt+→
マルチカーソル（クリック） Option+クリック Alt+クリック
同じ単語を複数選択 Cmd+D Ctrl+D
すべての同じ単語を選択 Cmd+Shift+L Ctrl+Shift+L
行末に改行を挿入 Cmd+Enter Ctrl+Enter
コードフォーマット Shift+Option+F Shift+Alt+F

検索・移動

操作 Mac Windows/Linux
ファイル内検索 Cmd+F Ctrl+F
ファイル内置換 Cmd+H Ctrl+H
プロジェクト全体を検索 Cmd+Shift+F Ctrl+Shift+F
プロジェクト全体を置換 Cmd+Shift+H Ctrl+Shift+H
定義へジャンプ F12 F12
参照をすべて表示 Shift+F12 Shift+F12
指定行へ移動 Ctrl+G Ctrl+G
シンボルへ移動（ファイル内） Cmd+Shift+O Ctrl+Shift+O
前後のタブに移動 Cmd+Shift+] / [ Ctrl+Shift+] / [
直前に開いたファイルに戻る Ctrl+- Alt+←

Git

操作 Mac Windows/Linux
ソース管理パネルを開く Ctrl+Shift+G Ctrl+Shift+G
変更をすべてステージ コマンドパレット Git: Stage All Changes —
差分を表示 ファイルを選択して Enter —

settings.json のおすすめ設定

Cmd+Shift+P（Ctrl+Shift+P）→「Open User Settings (JSON)」で開きます。

{
  // フォント
  "editor.fontFamily": "JetBrains Mono, Menlo, monospace",
  "editor.fontSize": 14,
  "editor.lineHeight": 1.6,
  "editor.fontLigatures": true,

  // 表示
  "editor.renderWhitespace": "boundary",
  "editor.rulers": [80, 120],
  "editor.minimap.enabled": false,
  "editor.wordWrap": "off",
  "editor.stickyScroll.enabled": true,

  // 保存時の自動処理
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.organizeImports": "explicit"
  },

  // タブ・インデント
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "editor.detectIndentation": true,

  // ファイル
  "files.trimTrailingWhitespace": true,
  "files.insertFinalNewline": true,
  "files.eol": "\n",
  "files.autoSave": "onFocusChange",

  // ターミナル
  "terminal.integrated.fontSize": 13,
  "terminal.integrated.defaultProfile.osx": "zsh",

  // Git
  "git.autofetch": true,
  "git.confirmSync": false,

  // その他
  "breadcrumbs.enabled": true,
  "workbench.editor.enablePreview": false,
  "explorer.confirmDelete": false
}

言語別セットアップ

TypeScript

必須拡張機能

  • ESLint（dbaeumer.vscode-eslint）
  • Prettier - Code formatter（esbenp.prettier-vscode）

settings.json（TypeScript用）

{
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "typescript.preferences.importModuleSpecifier": "relative",
  "typescript.updateImportsOnFileMove.enabled": "always"
}

TypeScriptのバージョン確認方法は「TypeScriptのバージョン確認と一覧表示まとめ」を参照してください。

Python

必須拡張機能

  • Python（ms-python.python）
  • Pylance（ms-python.vscode-pylance）
  • Ruff（charliermarsh.ruff）— linter・formatter

インタープリターの選択

Cmd+Shift+P → Python: Select Interpreter でプロジェクトごとに仮想環境を指定します。

{
  "[python]": {
    "editor.defaultFormatter": "charliermarsh.ruff",
    "editor.formatOnSave": true
  },
  "python.analysis.typeCheckingMode": "basic"
}

pyenv・venv・mise を使ったインタープリターの切り替え方法は「VSCodeでPythonインタープリターを選択・切り替える方法」を参照してください。

Ruby

必須拡張機能

  • Ruby LSP（Shopify.ruby-lsp）— 補完・定義ジャンプ・フォーマット

settings.json（Ruby用）

{
  "[ruby]": {
    "editor.defaultFormatter": "Shopify.ruby-lsp",
    "editor.formatOnSave": true,
    "editor.tabSize": 2
  },
  "rubyLsp.formatter": "rubocop"
}

rubyLsp.formatter を "rubocop" にすると保存時にRuboCopが自動実行されます。RuboCopの設定は「RuboCop導入入門：インストールから設定・git commit時の自動実行まで」を参照してください。

Rust

必須拡張機能

  • rust-analyzer（rust-lang.rust-analyzer）— 補完・型表示・フォーマット
{
  "[rust]": {
    "editor.defaultFormatter": "rust-lang.rust-analyzer",
    "editor.formatOnSave": true
  },
  "rust-analyzer.checkOnSave": true
}

おすすめ汎用拡張機能

拡張機能 用途
GitLens（eamodio.gitlens） git blame・履歴表示を強化
GitHub Copilot AIコード補完
indent-rainbow インデントを色分け表示
Error Lens（usernamehw.errorlens） エラーをインラインで表示
Path Intellisense ファイルパスの補完
Auto Rename Tag HTML/JSXのタグを同時にリネーム
Color Highlight カラーコードを色付きで表示
Todo Tree コード内のTODOコメントを一覧表示

まとめ

  • Cmd+Shift+P のコマンドパレットを覚えると大抵の操作にアクセスできる
  • settings.json の formatOnSave を有効にして保存時の自動整形を活用する
  • 言語ごとに推奨LSP拡張機能を入れると補完・定義ジャンプが快適になる
  • editor.rulers で80・120文字のガイドラインを表示するとコードレビューが楽になる

Remote SSH・Dev Containers・Live Shareなどのリモート開発拡張機能は「VSCode Remote開発入門：Remote SSH・Dev Containers・WSLの使い方」を参照してください。