メモ: VSCode

ラベル VSCode の投稿を表示しています。すべての投稿を表示

VSCode：複数行を一括コメント化する方法

公開：2026.06.03(水) 01:07

VSCodeで複数行を一括でコメント化する方法

VSCodeでPHPのソースコードを編集していて、複数行を一括してコメント化(行先頭に//を付加する)したい。

→ 行選択し [CTRL] + [/] を押せばOK! (Macの場合は [cmd]+[/])

拡張子で言語を認識してくれてるようで、HTMLであれば <-- --> でコメント化してくれるみたい。

"Visual Studio Code" "VSCode" "Tips"

VSCode：TABキーでのhtmlタグ展開ができなくなった

公開：2026.05.01(金) 17:43

VSCode TABキーでのhtmlタグ展開ができなくなった

これまで例えば "h3" と入力して [TAB] キーを押すと H3タグが展開されていたが急にできなくなった。

1. [CTRL]+[,] または [ファイル] → [ユーザー設定] → [設定] で設定画面を開く

2. 検索窓に "trigger expansion on tab" と入力

3. Emmet: Trigger Expansion On Tab という項目のチェックが外れていたら、チェックを入れる

これで解決した。

Visual Studio Code VSCode

Docker：コンテナ内のファイルをVSCodeで編集する方法

公開：2026.04.19 07:22

コンテナ内のファイルをVSCodeで編集する方法

Windows + WSL + Ubuntu + Docker環境で、Dockerコンテナ内のファイルをWindowsのVSCodeから編集する方法。

→ 拡張機能 "Dev Containers (Microsoft)" をインストールすることで可能らしい。

手順

1. VSCode左下のマーク(マークの名前は不明)をクリックする

下記例では "WSL:Ubuntu" と表示されているところ

2. 選択リストが表示されるので "実行中のコンテナーにアタッチ" を選択

3. 注意メッセージが表示されるので [了解] をクリック

4. 実行中のコンテナ一覧が表示されるので、対象のコンテナを選択

5. 新しいVSCodeが開くのでフォルダを開く

これでDockerコンテナ内のファイルが開けた！

VSCode凄すぎ。

WSL Docker VScode Tips

VSCode：Ubuntuへのインストール

端末を起動し、依存パッケージのインストール:
sudo apt update
sudo apt install -y wget gpg

Microsoft GPGキーの追加とリポジトリの登録:
wget -qO- https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor > packages.microsoft.gpg
sudo install -D -o root -g root -m 644 packages.microsoft.gpg /etc/apt/keyrings/packages.microsoft.gpg
echo "deb [arch=amd64,arm64,armhf signed-by=/etc/apt/keyrings/packages.microsoft.gpg] https://packages.microsoft.com/repos/code stable main" | sudo tee /etc/apt/sources.list.d/vscode.list

VSCodeのインストール: sudo apt update
sudo apt install -y code

VSCode：マルチカーソルその２

VSCode マルチカーソルの方法

1. 指定箇所にカーソルを置く場合

[ALT] + クリックを繰り返し

2. 指定範囲の縦一列にカーソルを置く場合

[ALT] + [SHIFT] + ドラッグ

3. 同じ文字列を選択する場合

[SHIFT] + [CTRL] + [L]
※ 過去記事：VSCode：文字列を一括編集する方法

VSCode

VSCode：shift+enterでbr(改行)を入力したい

更新：2026.04.24 11:46
公開：2024.08.29 05:38

VSCode：Shift+Enterで<br>を入力したい

bloggerのエディタでは[shift]+[enter]で<br>(改行)入力が可能であるが、VSCodeではできないので地味にイラつく。
そこで、VSCodeでも [shift]+[enter] で <br> を入力可能とするよう設定する。

環境

Windows 11 Home 23H2 (22631.4112)
VSCode 1.92.2

手順

1. [ctrl]+[shift]+[P]でコマンドパレットを開く

2. "keyboard shoftcut" で検索し "Preference: Open Keyboard Shoftcuts (JSON)" を選択

3. 以下のコードを入力

      [
        { 
          "key": "shift+enter", "command": "type",
          "args": { "text": "＜br＞" },
          "when": "editorTextFocus && editorLangId == 'html",
        }
      ]

※上記の全角＜＞は実際には半角の <> で入力すること！

これで [shift]+[enter] で <br> が入力できるようになる。

VisualStudio Code, VSCode, Tips

VSCode：設定ファイルの場所

ユーザー設定の保存場所：

プラットフォーム	パス
Windows	%APPDATA%\Code\User
mac	$HOME/Library/Application Support/Code/User
Linux	$HOME/.config/Code/User

settings.json以外の設定ファイル
・keybindings.json (キーボード設定)
・locale.json (言語設定)

ワークスペース設定は、各フォルダ内の .vscodeフォルダに格納
マルチルートワークスペースの場合は .code-workspaceファイルに格納

Visual Studio Code, VSCode, Tips

VSCode：画面全体のサイズを変更するショートカットキー

操作	Windows/Linux	mac
サイズを大きくする	[CTRL] + [+] または [CTRL] + [SHIFT] + [;]	[command] + [+] または [command] + [SHIFT] + [;]
サイズを小さくする	[CTRL] + ["] または [CTRL] + [SHIFT] + [=] ※ "ってなんだ？	[command] + [+] または [command] + [SHIFT] + [;]
サイズのリセット	[CTRL] + [0]	[command] + [0]

Visual Studio Code, VSCode, Tips, ショートカットキー

VSCode：画面操作のショートカットキー

操作	Windows/Linux	macOS
サイドバーの表示／非表示の切り替え	[CTRL] + [B]	[command] + [B]
サイドバーにエクスプローラービューを表示	[CTRL] + [SHIFT] + [E]	[SHIFT] + [command] + [E]
サイドバーに検索ビューを表示	[CTRL] + [SHIFT] + [F]	[SHIFT] + [command] + [F]
サイドバーにソース管理ビューを表示	[CTRL] + [SHIFT] + [G]	[CTRL] + [SHIFT] + [G]
サイドバーにデバッグビューを表示	[CTRL] + [SHIFT] + [D]	[SHIFT] + [command] + [D]
サイドバーに拡張機能ビューを表示	[CTRL] + [SHIFT] + [D]	[SHIFT] + [command + [D]
ターミナルを起動	[CTRL] + [@]	[command] + [@]
Zenモード (エディター以外のUIを非表示	[CTRL] + [K] → [Z]	[command] + [K] → [Z]

Visual Studio Code, VSCode, Tips, ショートカットキー

VSCode：キーボードショートカットの確認

キーボードショートカットを確認するショートカットキー
[CTRL] + [K] → [CTRL] + [S]
※ mac：[command] + [K] → [command] + [S]

Visual Studio Code, VSCode, Tips, ショートカットキー

VSCode：コマンドライン起動オプション

オプション	コマンドライン	説明
-d	diff '(file1)' '(file2)'	(file1)と(file2)の比較
-a	add '(dir)'	(dir)フォルダーを追加 (マルチワークスペース)
-g	goto '(file:line[:column])'	(file)の(line)で指定した行、さらに(column)で指定したカラムにカーソル移動
-n	new window	新しいウィンドウで起動
-r	reuse window	既に開いているVSCodeウインドウで開く
-w	wait	コマンドプロンプト(シェル)に制御を返さない
--locale '(locale)'		指定した(locale)を表示言語として起動
--user-data-dir '(dir)'		ユーザーデーターを保存するフォルダーを指定
-v	version	VSCodeのバージョンを表示
-h	help	ヘルプの表示