vscode

• vscode
  • ショートカット
    • よく使う機能
  • 使用する拡張機能一覧
    • playwright
    • シェルスクリプト
    • markdown
  • debug

ショートカット

• 特によく使う
  • cmd + P → コマンドパレット
  • ctl + - → 戻る
  • ctl + _(アンダースコア) → 進む
  • cmd + K + T → カラーテーマ設定

操作概要	Windows	macOS
全般
すべてのコマンドの表示	Ctrl+Shift+P, F1	⇧⌘P, F1
クイックオープン	Ctrl+P	⌘P
キーボード ショートカットを開く	Ctrl+K Ctrl+S	⌘K ⌘S
直近で開いたファイルを表示	Ctrl+Tab	⌃Tab
編集
コードの整形	Shift+Alt+F	⇧⌥F
（選択範囲なしで）行の切り取り	Ctrl+X	⌘X
（選択範囲なしで）行のコピー	Ctrl+C	⌘C
行を下へ移動	Alt+↓	⌥↓
行を上へ移動	Alt+↑	⌥↑
行を下へコピー	Shift+Alt+↓	⇧⌥↓
行を上へコピー	Shift+Alt+↑	⇧⌥↑
行の削除	Ctrl+Shift+K	⇧⌘K
行を下に挿入	Ctrl+Enter	⌘Enter
行のインデント追加	Ctrl+]	⌘]
行のインデント削除	Ctrl+[	⌘[
名前を変更	F2	F2
補完候補を開く	Ctrl+Space	⌃Space
選択
矩形選択(マウス選択)	Shift+Alt+ドラッグ	⇧⌥+ドラッグ
矩形選択(キーボード選択)	Ctrl+Shift+Alt+方向キー	⇧⌥⌘+方向キー
選択範囲と同じ文字列の複数指定	Ctrl+D	⌘D
移動
行の先頭に移動	Home	Home
行の最後に移動	End	End
ファイルの先頭に移動	Ctrl+Home	⌘↑
ファイルの末尾に移動	Ctrl+End	⌘↓
行コメントの切り替え	Ctrl+/	⌘/
指定行へ移動	Ctrl+G	⌃G
ファイルに移動	Ctrl+P	⌘P
前に戻る	Alt+←	⌃-
次に進む	Alt+→	⌃⇧-
検索
ファイル内検索	Ctrl+F	⌘F
ファイル内置換	Ctrl+H	⌥⌘F
次を検索	F3	⌘G
前を検索	Shift+F3	⇧⌘G
プロジェクト内検索	Ctrl+Shift+F	⇧⌘F
パネル操作
サイドバーの表示/非表示	Ctrl+B	⌘B
ターミナルの表示/非表示	Ctrl+@	⌃@
新しく統合ターミナルを表示	Ctrl+Shift+@	⌃⇧@
エクスプローラーの表示	Ctrl+Shift+E	⇧⌘E

よく使う機能

• ファイル検索
  • cmd + Pで任意のファイル名(README など)を入力

使用する拡張機能一覧

• extensions.json

  • .vscode/extensions.jsonに保存するとプロファイルにインストール推奨してくれる

• 一例

{
 // List of extensions which should be recommended for users of this workspace.
 "recommendations": [
   //  common
   "moshfeu.compare-folders",
   "hediet.vscode-drawio",
   "alefragnani.project-manager",
   "christian-kohler.path-intellisense",
   //  * 整形関連
   "oderwat.indent-rainbow",
   "streetsidesoftware.code-spell-checker",
   "tyriar.sort-lines",
   "usernamehw.errorlens",
   "Log File Highlighter",
   //  * docker
   "ms-azuretools.vscode-docker",
   "ms-vscode-remote.remote-containers",
   "ms-azuretools.vscode-containers",
   //  * git
   "donjayamanne.githistory",
   //  AWS
   "redhat.vscode-yaml",
   "aws-scripting-guy.cform", // CloudFormation
   "hashicorp.terraform", // terraform
   "tintinweb.graphviz-interactive-preview", // Graphviz
   "hediet.vscode-drawio", // drawio
   //  languages
   //  * markdown
   "patricklee.vsnotes",
   "yzhang.markdown-all-in-one",
   "shd101wyy.markdown-preview-enhanced",
   //  * python
   "ms-python.python",
   "ms-python.vscode-pylance",
 ],
 // List of extensions recommended by VS Code that should not be recommended for users of this workspace.
 "unwantedRecommendations": [
 ]
}

• 例 terraform

{
  "recommendations": [
    // terraform
    "hashicorp.terraform",
    // json & yaml
    "zainchen.json",
    "redhat.vscode-yaml"
  ]
}

playwright

• デバッグ設定例
  • launch.json

"configurations": [
    {
        "type": "pwa-node",
        "request": "launch",
        "name": "playwright debug",
        "env": { "PWDEBUG": "console" },
        "program": "node_modules/.bin/playwright",
        "args":["test", "${relativeFile}"]
    },
    {
        "type": "pwa-node",
        "request": "launch",
        "name": "Run Test - headless",
        "program": "node_modules/.bin/playwright",
        "args":["test", "${relativeFile}"]
    },
    {
        "type": "pwa-node",
        "request": "launch",
        "name": "Run Test - headed",
        "program": "node_modules/.bin/playwright",
        "args":["test", "--headed", "${relativeFile}"]
    }
]

シェルスクリプト

• Bash Debugでシェルスクリプトのデバッグが vscode で可能になる
• mac では zsh の場合が bash は 4or5 のバージョンでばければ非対応
• bash が古い場合、brew install bashでインストール
  • システムとは別に brew などでインストールした場合は下記のようにpathBashで bash のパスを指定する

  "version": "0.2.0",
  "configurations": [
    {
      "type": "bashdb",
      "request": "launch",
      "name": "Bash-Debug (simplest configuration)",
      "program": "${file}",
      "pathBash": "/opt/homebrew/bin/bash"
    }
  ]
}

markdown

• コマンドパレットでMarkdown All in One: Create Table of Contentsを実行すると、見出しの内容から目次が作成される
• 見出し更新後にCmd+sで保存すると、目次も更新される

debug

• 共通の設定項目
  • go、python、node.js など多数の言語に共通する設定

項目	説明
name	デバッグ構成の名前（メニューで識別するために使用）
type	デバッグ対象の言語やツール（例: go, python, node）
request	デバッグの種類：launch（新しいプロセスを起動）またはattach（既存プロセスに接続）
program	実行するスクリプトまたはバイナリのパス
args	実行時の引数
cwd	実行時のカレントディレクトリ
env	環境変数を設定するオブジェクト（例: { "KEY": "VALUE" }）
console	出力を表示するコンソールの種類（例: integratedTerminal、externalTerminal）
stopOnEntry	プログラム開始時に自動的に停止するかどうか（true または false）

• typescript 例

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "typescript: 現在のファイルを実行",
      "runtimeExecutable": "npx",
      "runtimeArgs": ["tsx"],
      "args": ["${file}"],
      "cwd": "${workspaceFolder}",
      "envFile": "${workspaceFolder}/.env",
      "skipFiles": ["<node_internals>/**"], //  Node.js内部コード（<node_internals>）をステップ実行対象から除外
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen" // デバッグコンソールを自動表示しない設定
    }
  ]
}

• python例

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Python Debugger: Current File",
            "type": "debugpy",
            "request": "launch",
            "program": "${file}",
            "justMyCode": true,
            "console": "integratedTerminal"
        }
    ]
}