VSCodeで選択範囲をコメントアウトする方法について

2026年10月26日

VSCode（Visual Studio Code）では、選択したコードをまとめてコメントアウトできます。

複数行のコードを一時的に無効化したい場合や、デバッグ中に特定の処理だけ実行させたくない場合に便利な機能です。

基本的には、コメントアウトしたい範囲を選択してショートカットキーを押すだけで操作できます。

Windows・Linuxでは Ctrl + /、macOSでは Command + / が代表的なショートカットです。

VSCodeは現在の言語モードに応じて、JavaScriptなら //、Pythonなら #、HTMLなら  といった適切なコメント構文を自動的に使用します。

選択範囲を行コメントでコメントアウトする方法

Windows・Linuxでは「Ctrl + /」を使用する

WindowsまたはLinuxで選択範囲をコメントアウトする場合は、対象となるコードを選択して次のショートカットを押します。

Ctrl + /

たとえば、JavaScriptで次のコードがあるとします。

const name = "Taro";
const age = 30;
console.log(name, age);

3行を選択して Ctrl + / を押すと、次のようになります。

// const name = "Taro";
// const age = 30;
// console.log(name, age);

各行の先頭に // が追加され、コードがコメントアウトされます。

もう一度 Ctrl + / を押すと、コメントを解除できます。

macOSでは「Command + /」を使用する

macOSの場合は、次のショートカットを使用します。

Command + /

操作方法はWindowsやLinuxの場合と同じです。

コメントアウトしたいコードを選択して Command + / を押すと、選択した行をまとめてコメントアウトできます。

もう一度同じショートカットを押せば、コメントを解除できます。

複数行をまとめてコメントアウトする方法

コメントアウトしたい行を選択する

複数行を一括でコメントアウトする場合は、対象となるコードをドラッグなどで選択します。

たとえば、次のようなコードがあるとします。

function hello() {
    console.log("Hello");
    console.log("World");
}

2つの console.log を選択し、Windowsなら Ctrl + /、macOSなら Command + / を押します。

すると、次のようになります。

function hello() {
    // console.log("Hello");
    // console.log("World");
}

この方法を使えば、複数行を1行ずつ手作業でコメントアウトする必要がありません。

行全体を完全に選択する必要はない

行コメントの切り替えでは、必ずしも各行を先頭から末尾まで完全に選択する必要はありません。

複数行にまたがって一部分を選択している場合でも、その選択範囲を含む行にコメントが適用されます。

そのため、複数行を一時的に無効化したい場合は、対象部分を大まかに選択してショートカットを実行するだけでも操作できます。

選択範囲をブロックコメントにする方法

Windowsでは「Shift + Alt + A」を使用する

VSCodeには、行単位のコメントとは別に「ブロックコメント」の機能もあります。

Windowsでは、次のショートカットを使用します。

Shift + Alt + A

たとえば、JavaScriptで次のコードを選択します。

const name = "Taro";
const age = 30;
console.log(name);

ブロックコメントを実行すると、選択範囲が次のようなコメント構文で囲まれます。

/*
const name = "Taro";
const age = 30;
console.log(name);
*/

もう一度同じショートカットを実行すると、ブロックコメントを解除できます。

macOSでは「Shift + Option + A」を使用する

macOSでは、ブロックコメントの切り替えに次のショートカットを使用します。

Shift + Option + A

JavaScriptやCSSなど、ブロックコメント構文をサポートしている言語で利用できます。

Linuxでは「Ctrl + Shift + A」を使用する

Linuxでは、デフォルトで次のショートカットが割り当てられています。

Ctrl + Shift + A

OSによってブロックコメントのショートカットが異なるため、利用している環境に合わせて覚えておくと便利です。

行コメントとブロックコメントの違い

行コメントは各行をコメントアウトする

行コメントでは、各行にコメント記号を付けます。

JavaScriptの場合は次のようになります。

// const a = 10;
// const b = 20;
// const c = 30;

複数行を一時的に無効化する場合には、行コメントが扱いやすいことが多いです。

また、コメントアウトしたコードの一部だけを解除するといった操作もしやすくなります。

ブロックコメントは選択範囲全体を囲む

ブロックコメントでは、選択した範囲全体をコメント記号で囲みます。

JavaScriptの場合は次のようになります。

/*
const a = 10;
const b = 20;
const c = 30;
*/

ブロックコメントは、複数行だけでなく、1行の一部分をコメント化する場合にも利用できます。

たとえば、JavaScriptでは次のようなコメントも可能です。

const /* name */ = "Taro";

つまり、ブロックコメントは「複数行をコメントアウトする機能」というよりも、「選択した範囲をその言語のブロックコメント構文で囲む機能」と考えると正確です。

コメントアウトとコメント解除を個別に実行する方法

コメントを追加するショートカット

VSCodeでは、コメントのON・OFFを切り替えるだけでなく、コメントを追加する専用コマンドも用意されています。

Windows・Linuxでは次のように操作します。

Ctrl + K
Ctrl + C

macOSでは次のように操作します。

Command + K
Command + C

これは、すべてのキーを同時に押す操作ではありません。

最初に Ctrl + K を押し、その後に Ctrl + C を押します。

このような2段階のキーバインドは「Chord」と呼ばれます。

コメントを解除するショートカット

コメント解除専用のショートカットもあります。

Windows・Linuxでは次のとおりです。

Ctrl + K
Ctrl + U

macOSでは次のとおりです。

Command + K
Command + U

コメントを必ず追加したい場合と、必ず解除したい場合を明確に分けたいときに便利です。

選択していない行もコメントアウトできる

カーソルを置くだけでも操作できる

Ctrl + / や Command + / は、コードを選択していない状態でも使用できます。

たとえば、カーソルが次の行にあるとします。

const name = "Taro";

Windowsで Ctrl + / を押すと、次のようになります。

// const name = "Taro";

つまり、1行だけコメントアウトする場合は、対象行にカーソルを置くだけで操作できます。

複数行の場合は範囲選択し、1行の場合はカーソルを置くという使い分けが可能です。

Pythonで選択範囲をコメントアウトする方法

Pythonでは「#」が使用される

Pythonでは、コメントに # を使用します。

たとえば、次のコードを選択します。

name = "Taro"
age = 30
print(name)

Windowsで Ctrl + / を押すと、次のようになります。

# name = "Taro"
# age = 30
# print(name)

macOSの場合は Command + / を使用します。

Pythonには一般的なブロックコメント構文がない

Pythonには、JavaScriptの /* ... */ のような専用のブロックコメント構文はありません。

そのため、複数行をコメントアウトするときは、基本的に各行へ # を付けます。

Pythonでは、次のような三重引用符が複数行コメントとして紹介されることがあります。

"""
sample text
"""

しかし、厳密にはこれはコメントではなく文字列リテラルです。

コードを一時的に無効化する目的であれば、各行に # を付ける方法を使用するほうが適切です。

HTMLで選択範囲をコメントアウトする方法

HTMLでは「<!– –>」が使用される

HTMLにはJavaScriptの // のような行コメント構文がありません。

たとえば、次のHTMLを選択します。

<div>
    <p>Hello</p>
</div>

コメントアウトすると、次のようになります。

<!--
<div>
    <p>Hello</p>
</div>
-->

VSCodeがHTMLの言語モードを認識しているため、HTMLのコメント構文である  が使用されます。

CSSで選択範囲をコメントアウトする方法

CSSでは「/* */」が使用される

CSSのコメントには /* */ を使用します。

たとえば、次のコードをコメントアウトします。

.container {
    width: 100%;
    padding: 20px;
}

コメントアウト後は、次のようになります。

/*
.container {
    width: 100%;
    padding: 20px;
}
*/

CSSでは // は通常のコメント構文として使用できないため、VSCodeではCSSに適したコメント形式が使用されます。

JavaScript・TypeScriptでコメントアウトする方法

行コメントとブロックコメントの両方が利用できる

JavaScriptやTypeScriptでは、行コメントとブロックコメントの両方を使用できます。

行コメントは次の形式です。

// const a = 10;
// const b = 20;

ブロックコメントは次の形式です。

/*
const a = 10;
const b = 20;
*/

通常のコード編集では、範囲を選択して Ctrl + / または Command + / を使用する方法が手軽です。

部分的にコメントを付けたい場合は、ブロックコメントも便利です。

コマンドパレットからコメントアウトする方法

ショートカットを覚えていない場合に便利

ショートカットキーを覚えていなくても、VSCodeのコマンドパレットからコメントアウトできます。

Windows・Linuxでは次のショートカットでコマンドパレットを開きます。

Ctrl + Shift + P

macOSでは次のショートカットです。

Command + Shift + P

コマンドパレットを開いたら、次のようなコマンドを検索します。

Toggle Line Comment

日本語表示では、「行コメントの切り替え」などの名称で表示される場合があります。

同様に、ブロックコメントを利用したい場合は「Toggle Block Comment」を検索します。

コメントアウトのショートカットが効かない場合の対処法

キーボードショートカットの設定を確認する

VSCodeでは、ショートカットキーをユーザーが自由に変更できます。

そのため、Ctrl + / を押してもコメントアウトできない場合は、設定が変更されている可能性があります。

Windows・Linuxでは、次のショートカットでキーボードショートカット画面を開けます。

Ctrl + K
Ctrl + S

検索欄に次のように入力します。

Toggle Line Comment

割り当てられているショートカットを確認し、必要に応じて変更します。

他のショートカットとの競合を確認する

拡張機能や独自設定によって、同じキーが別のコマンドに割り当てられていることがあります。

その場合、期待したコメント操作が実行されない可能性があります。

Keyboard Shortcuts画面で競合している設定がないか確認しましょう。

独自のショートカットを設定する場合も、既存のコマンドと競合していない組み合わせを選ぶことが重要です。

言語モードを確認する

VSCodeのコメント機能は、現在設定されている言語モードに依存します。

画面右下には、次のような言語名が表示されています。

JavaScript
Python
HTML
CSS
Plain Text

たとえば、JavaScriptのコードが「Plain Text」として認識されている場合、期待したコメント機能が利用できないことがあります。

その場合は、右下に表示されている言語名をクリックし、正しい言語モードへ変更します。

キーボードレイアウトを確認する

キーボードレイアウトやOS、IME、キーバインドの設定によって、/ を含むショートカットが期待どおりに認識されない場合があります。

特にキーボードレイアウトを変更している環境では注意が必要です。

ショートカットが使いにくい場合は、Keyboard Shortcuts画面から自分が操作しやすいキーへ変更できます。

読み取り専用になっていないか確認する

エディターが読み取り専用になっている場合は、コードを書き換えるコメント操作を実行できません。

ファイルが編集可能な状態になっているかも確認しましょう。

コメントアウト用のコマンドID

行コメントのコマンドID

VSCodeでは、キーバインド設定を直接編集する場合などにコマンドIDを使用できます。

行コメントの切り替えは次のコマンドです。

editor.action.commentLine

ブロックコメントのコマンドID

ブロックコメントの切り替えは次のコマンドです。

editor.action.blockComment

コメント追加とコメント削除のコマンドID

コメント追加は次のコマンドです。

editor.action.addCommentLine

コメント削除は次のコマンドです。

editor.action.removeCommentLine

ショートカットをカスタマイズするときに覚えておくと便利です。

VSCodeで選択範囲をコメントアウトするときのショートカット一覧

よく使うショートカット

主なコメント関連のショートカットをまとめると、次のようになります。

操作	Windows	macOS	Linux
行コメント切り替え	`Ctrl + /`	`Command + /`	`Ctrl + /`
行コメント追加	`Ctrl + K` → `Ctrl + C`	`Command + K` → `Command + C`	`Ctrl + K` → `Ctrl + C`
行コメント削除	`Ctrl + K` → `Ctrl + U`	`Command + K` → `Command + U`	`Ctrl + K` → `Ctrl + U`
ブロックコメント切り替え	`Shift + Alt + A`	`Shift + Option + A`	`Ctrl + Shift + A`

普段の開発では、まず行コメント切り替えのショートカットを覚えておけば十分です。

WindowsやLinuxであれば、

範囲を選択
↓
Ctrl + /

macOSであれば、

範囲を選択
↓
Command + /

という操作で、複数行を素早くコメントアウトできます。

VSCodeでは選択範囲をショートカットで簡単にコメントアウトできる

VSCodeで選択範囲をコメントアウトする最も基本的な方法は、Windows・Linuxでは Ctrl + /、macOSでは Command + / を使用する方法です。

同じショートカットをもう一度押せばコメントを解除できるため、コードの一部を一時的に無効化するときに便利です。

また、JavaScriptやCSSなどではブロックコメントも利用できます。

コメントの形式は言語ごとに異なりますが、VSCodeが言語モードに応じて適切なコメント構文を使用してくれます。

まずは「範囲選択して Ctrl + / または Command + /」という基本操作を覚えておくと、VSCodeでのコーディング作業を効率化できます。

以上、VSCodeで選択範囲をコメントアウトする方法についてでした。

最後までお読みいただき、ありがとうございました。

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！