MENU
contact

VSCodeで文字やコードをハイライトする方法

VSCode

採用はこちら

VSCodeでは、文字やコードをさまざまな方法でハイライトできます。

特定の文字列を一時的に強調したり、同じ単語をまとめて選択したり、変数や関数を意味に応じて色分けしたりすることが可能です。

ただし、VSCodeで使われる「ハイライト」には複数の種類があります。

たとえば、検索結果を強調するハイライトと、プログラム上の同じ変数を認識して強調するハイライトでは仕組みが異なります。

ここでは、VSCodeで文字やコードをハイライトする代表的な方法について詳しく解説します。

目次

VSCodeのハイライトには複数の種類がある

VSCodeで利用できる主なハイライト方法には、次のようなものがあります。

  • 選択した文字をハイライトする
  • 同じ文字列をハイライトする
  • 検索結果をハイライトする
  • 同じ単語を複数選択する
  • 同じ変数や関数をシンボルとしてハイライトする
  • キーワードや文字列を構文に応じて色分けする
  • 変数や関数を意味に応じて色分けする
  • 対応する括弧をハイライトする
  • ハイライトの色を変更する

目的に応じて機能を使い分けることが重要です。

文字を選択してハイライトする

マウスで範囲選択する

もっとも基本的な方法は、マウスで文字をドラッグして選択することです。

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

const message = "Hello World";

Hello Worldの部分をドラッグすると、その範囲に背景色が付き、選択状態になります。

このハイライトは一時的なもので、別の場所をクリックすると解除されます。

文章やコードの一部分を目立たせたいときに便利です。

ダブルクリックで単語を選択する

単語単位で選択したい場合は、対象の単語をダブルクリックします。

たとえば、次のコードでuserNameをダブルクリックすると、その単語をすばやく選択できます。

const userName = "Taro";
console.log(userName);

同じ文字列がほかの場所にも存在する場合は、それらが補助的にハイライトされることもあります。

同じ文字列をハイライトする

Selection Highlightを利用する

VSCodeには、選択した文字列と同じ内容をエディター内で強調表示する「Selection Highlight」という機能があります。

たとえば、priceという文字列を選択すると、同じ文字列が存在する箇所がハイライトされます。

この機能は、editor.selectionHighlightで制御できます。

{
    "editor.selectionHighlight": true
}

無効にしたい場合は、次のように設定します。

{
    "editor.selectionHighlight": false
}

設定画面から変更する場合は、Ctrl + ,で設定を開き、Selection Highlightと検索します。

同じ文字列と同じシンボルは異なる

ここで注意したいのが、「同じ文字列」と「同じプログラム上のシンボル」は異なるという点です。

たとえば、次のコードがあります。

function test() {
    const name = "Taro";
}

function sample(name) {
    console.log(name);
}

このコードにはnameという文字列が複数登場します。

しかし、すべてが同じ変数を指しているわけではありません。

単純な文字列ハイライトでは、文字として一致している箇所が対象になります。

一方、シンボルハイライトでは、言語サービスがコードを解析して「同じ変数や関数なのか」を判断します。

この違いを理解しておくと、VSCodeのハイライト機能を使い分けやすくなります。

Ctrl + Fで検索結果をハイライトする

現在のファイル内を検索する

特定の文字列を一時的に目立たせたい場合は、検索機能が便利です。

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

Ctrl + F

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

Command + F

検索ボックスに文字を入力すると、現在開いているファイル内の一致箇所がハイライトされます。

たとえば、userNameと入力すると、ファイル内に存在するuserNameが強調表示されます。

検索条件も変更できる

VSCodeの検索では、次のような条件を指定できます。

  • 大文字・小文字を区別する
  • 単語単位で検索する
  • 正規表現を使用する

たとえば、userという単語だけを検索したい場合は「単語単位で検索」を有効にすると便利です。

プロジェクト全体を検索してハイライトする

現在のファイルだけでなく、プロジェクト全体から文字列を探したい場合は、ワークスペース検索を利用します。

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

Ctrl + Shift + F

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

Command + Shift + F

検索欄に関数名や変数名を入力すると、その文字列を含むファイルと該当箇所が表示されます。

たとえば、getUserDataという関数がプロジェクト内のどこで使用されているかを確認するときに便利です。

Ctrl + Dで同じ文字列を順番に選択する

VSCodeでは、同じ文字列を複数箇所選択することもできます。

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

Ctrl + D

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

Command + D

現在選択している文字列と一致する次の箇所を追加選択できます。

たとえば、次のコードでuserを選択してCtrl + Dを繰り返すと、同じ文字列を1つずつ追加できます。

const user = getUser();
console.log(user);
saveUser(user);

複数選択した状態で文字を入力すれば、まとめて編集することもできます。

Ctrl + Shift + Lですべての一致箇所を選択する

同じ文字列を一度にすべて選択したい場合は、Ctrl + Shift + Lが便利です。

Windows・Linuxでは、次のショートカットです。

Ctrl + Shift + L

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

Shift + Command + L

選択中の文字列と一致する箇所をまとめて選択できます。

同じ文字列を一括で修正したい場合に便利です。

Ctrl + F2で同じ単語をまとめて選択する

現在カーソルがある単語の出現箇所をすべて選択したい場合は、Ctrl + F2を利用できます。

Windows・Linuxでは、次のショートカットです。

Ctrl + F2

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

Command + F2

同じ単語をまとめて選択し、複数箇所を一括編集できます。

ただし、変数名や関数名を安全に変更したい場合は、単純な複数選択より「Rename Symbol」を利用するほうが適しています。

シンボルハイライトを利用する

同じ変数や関数を意味的に強調する

VSCodeでは、対応している言語であれば、カーソル位置の変数や関数と同じシンボルを強調表示できます。

たとえば、次のコードがあります。

const price = 1000;

function calculateTax(price) {
    return price * 0.1;
}

console.log(price);

priceという文字列は複数登場していますが、必ずしもすべてが同じ変数を指しているわけではありません。

言語サービスが対応している場合、VSCodeはコードの意味を解析し、同じシンボルへの参照を識別できます。

変数名の変更にはRename Symbolが便利

変数や関数の名前を変更したい場合は、単純な文字列置換ではなくRename Symbolを利用すると安全です。

一般的には、変更したいシンボルにカーソルを置いてF2を押します。

すると、そのシンボルを参照している箇所をまとめて変更できます。

同じ名前の別変数まで誤って変更するリスクを減らせるのが特徴です。

Syntax Highlightingでコードを色分けする

構文に応じて色分けされる

VSCodeでは、コードの構文に応じて文字色が変化します。

これを「Syntax Highlighting」または「構文ハイライト」と呼びます。

たとえば、次のような要素を色分けできます。

  • キーワード
  • 文字列
  • 数値
  • コメント
  • 関数
  • 変数

たとえば、次のJavaScriptコードでは、constやfunction、文字列などが異なる色で表示されます。

const message = "Hello";

function hello() {
    console.log(message);
}

VSCodeでは、TextMate Grammarなどを利用して構文ハイライトを行っています。

Semantic Highlightingを利用する

コードの意味に応じて色分けする

Syntax Highlightingよりさらに高度な仕組みが「Semantic Highlighting」です。

Semantic Highlightingでは、単純な構文だけではなく、コード上の意味を利用して色分けします。

たとえば、次のような違いを認識できます。

  • クラス
  • 関数
  • 変数
  • プロパティ
  • パラメーター
  • 読み取り専用変数

ただし、Semantic Highlightingを利用するには、使用している言語や言語拡張機能がSemantic Tokenに対応している必要があります。

Semantic Highlightingを有効にする

settings.jsonでは、次のように設定できます。

{
    "editor.semanticHighlighting.enabled": true
}

無効にする場合は、次のように設定します。

{
    "editor.semanticHighlighting.enabled": false
}

また、テーマ側の設定に従わせる場合は、次のように指定できます。

{
    "editor.semanticHighlighting.enabled": "configuredByTheme"
}

通常はconfiguredByThemeが基本的な動作になります。

VSCodeのカラーテーマを変更する

Ctrl + K、Ctrl + Tでテーマを変更する

コード全体の色を変更したい場合は、カラーテーマを切り替える方法が簡単です。

Windows・Linuxでは、次のキーを順番に押します。

Ctrl + K
Ctrl + T

macOSでは、次のキーを使用します。

Command + K
Command + T

テーマ一覧から好みのカラーテーマを選択できます。

カラーテーマを変更すると、コードだけでなくエディター全体の配色も変化します。

settings.jsonで構文ハイライトの色を変更する

editor.tokenColorCustomizationsを利用する

Syntax Highlightingの色を細かく調整したい場合は、editor.tokenColorCustomizationsを使用できます。

たとえば、コメントの色を変更する場合は次のように設定します。

{
    "editor.tokenColorCustomizations": {
        "comments": "#6A9955"
    }
}

文字列やキーワードも変更できます。

{
    "editor.tokenColorCustomizations": {
        "comments": "#6A9955",
        "strings": "#CE9178",
        "keywords": "#C586C0"
    }
}

使用しているテーマによって見え方が変わるため、実際の画面を確認しながら調整するとよいでしょう。

特定のテーマだけハイライト色を変更する

特定のテーマを使用している場合だけ色を変更することもできます。

たとえば、Monokaiテーマのコメント色だけを変更する場合は、次のように設定します。

{
    "editor.tokenColorCustomizations": {
        "[Monokai]": {
            "comments": "#00FF00"
        }
    }
}

複数のテーマを使い分けている場合に便利です。

Semantic Tokenの色を変更する

Semantic Highlightingの色を変更したい場合は、editor.semanticTokenColorCustomizationsを使用します。

たとえば、変数・クラス・関数の色を変更する場合は次のように設定します。

{
    "editor.semanticTokenColorCustomizations": {
        "rules": {
            "variable": "#FFFFFF",
            "class": "#4EC9B0",
            "function": "#DCDCAA"
        }
    }
}

さらに、特定の条件を持つSemantic Tokenに対して太字などのスタイルを適用することもできます。

{
    "editor.semanticTokenColorCustomizations": {
        "rules": {
            "*.declaration": {
                "bold": true
            }
        }
    }
}

Developer: Inspect Editor Tokens and Scopesを利用する

トークンの種類を調べる

「この文字がどの設定によって色付けされているのかわからない」という場合は、VSCodeの調査機能が便利です。

コマンドパレットを開き、次のコマンドを実行します。

Developer: Inspect Editor Tokens and Scopes

調べたいコードにカーソルを合わせると、TextMate ScopeやSemantic Tokenなどを確認できます。

独自にハイライト色を設定したい場合に非常に役立ちます。

対応する括弧をハイライトする

VSCodeでは、次のような対応する括弧を強調表示できます。

()
[]
{}

たとえば、次のようなコードでは、カーソル位置に応じて対応する括弧を確認できます。

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

括弧が多いコードでは、対応関係を確認するのに便利です。

対応する括弧へジャンプする

Windows・Linuxでは、次のショートカットで対応する括弧へ移動できます。

Ctrl + Shift + \

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

Shift + Command + \

ネストが深いコードを読むときに便利です。

Bracket Pair Colorizationを利用する

括弧を階層ごとに色分けする

VSCodeには、入れ子になった括弧を階層ごとに色分けする「Bracket Pair Colorization」があります。

現在のVSCodeでは、この機能は標準で有効になっています。

明示的に有効化したい場合は、次のように設定できます。

{
    "editor.bracketPairColorization.enabled": true
}

たとえば、次のようなコードでも括弧の階層が把握しやすくなります。

if (condition) {
    while (true) {
        console.log({
            name: "Taro"
        });
    }
}

括弧のハイライト色を変更する

括弧の色は、workbench.colorCustomizationsで調整できます。

{
    "workbench.colorCustomizations": {
        "editorBracketHighlight.foreground1": "#FFD700",
        "editorBracketHighlight.foreground2": "#DA70D6",
        "editorBracketHighlight.foreground3": "#179FFF"
    }
}

括弧の階層が深いコードを扱う場合は、自分が見やすい色に変更すると作業しやすくなります。

検索結果や選択範囲のハイライト色を変更する

VSCodeでは、コードの構文だけでなく、選択範囲や検索結果の背景色も変更できます。

たとえば、次のようなテーマカラーがあります。

editor.selectionBackground
editor.findMatchBackground
editor.findMatchHighlightBackground
editor.wordHighlightBackground
editor.wordHighlightStrongBackground

workbench.colorCustomizationsを利用すると、これらの色をカスタマイズできます。

検索結果が見づらい場合や、選択中の文字をもっと目立たせたい場合に便利です。

settings.jsonを開く方法

コマンドパレットから開く

ハイライト関連の細かな設定を変更する場合は、settings.jsonを直接編集すると便利です。

まず、次のショートカットでコマンドパレットを開きます。

Ctrl + Shift + P

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

Command + Shift + P

その後、次のコマンドを検索して実行します。

Preferences: Open User Settings (JSON)

たとえば、ハイライト関連の設定をまとめると次のようになります。

{
    "editor.selectionHighlight": true,
    "editor.semanticHighlighting.enabled": true,
    "editor.bracketPairColorization.enabled": true,

    "editor.tokenColorCustomizations": {
        "comments": "#6A9955",
        "strings": "#CE9178",
        "keywords": "#C586C0"
    },

    "workbench.colorCustomizations": {
        "editorBracketHighlight.foreground1": "#FFD700",
        "editorBracketHighlight.foreground2": "#DA70D6",
        "editorBracketHighlight.foreground3": "#179FFF"
    }
}

特定のキーワードを常時ハイライトする

TODOやFIXMEを強調する

VSCode標準の検索ハイライトは、一時的な強調表示です。

一方で、次のようなキーワードを常に目立たせたいケースもあります。

TODO
FIXME
WARNING
IMPORTANT

このような用途では、ハイライト系の拡張機能を利用する方法があります。

拡張機能ビューは、Windows・Linuxでは次のショートカットで開けます。

Ctrl + Shift + X

Marketplaceで次のようなキーワードを検索すると、関連する拡張機能を探せます。

highlight
TODO highlight
keyword highlight

拡張機能を導入するときは、提供元、更新状況、利用者数、必要な権限なども確認しておくと安心です。

ハイライトされない場合の対処法

Language Modeを確認する

コードに色が付かない場合は、VSCodeがファイルの言語を正しく認識しているか確認します。

画面右下には、次のようなLanguage Modeが表示されます。

JavaScript
TypeScript
HTML
CSS
Plain Text

JavaScriptコードを書いているのにPlain Textになっている場合は、JavaScriptとしての構文ハイライトが適用されません。

右下のLanguage Modeをクリックし、正しい言語を選択します。

ファイルの拡張子を確認する

VSCodeは、通常ファイルの拡張子をもとにLanguage Modeを自動判定します。

たとえば、次のような拡張子です。

script.js
style.css
index.html
main.py

ただし、拡張子が適切でなくてもLanguage Modeを手動で変更できます。

そのため、「適切な拡張子でなければ構文ハイライトできない」というわけではありません。

カラーテーマを確認する

テーマによっては、変数や関数の色の違いが目立たない場合があります。

その場合は、Ctrl + K、Ctrl + Tで別のカラーテーマに変更して確認するとよいでしょう。

言語拡張機能を確認する

言語によっては、高度な構文解析やSemantic Highlightingを利用するために拡張機能が必要です。

Syntax Highlightingは利用できても、Semantic Highlightingやシンボル解析が十分に利用できない場合があります。

対象言語に対応した拡張機能が導入されているか確認してみましょう。

VSCodeのハイライト方法を使い分ける

VSCodeには多くのハイライト機能があります。

目的ごとに使い分けると、次のようになります。

やりたいこと主な方法
一部分だけ一時的に強調したいマウスで選択
ファイル内の文字列を探したいCtrl + F
プロジェクト全体から探したいCtrl + Shift + F
次の同じ文字列を追加選択したいCtrl + D
同じ文字列をすべて選択したいCtrl + Shift + L
同じ単語をすべて選択したいCtrl + F2
変数や関数の名前を安全に変更したいRename Symbol
コードを構文ごとに色分けしたいSyntax Highlighting
コードの意味に応じて色分けしたいSemantic Highlighting
テーマを変更したいCtrl + K → Ctrl + T
コメントや文字列の色を変更したいeditor.tokenColorCustomizations
括弧を見やすくしたいBracket Pair Colorization
特定キーワードを常時強調したいハイライト系拡張機能

まとめ

VSCodeでは、単純な文字選択からコード解析を利用した高度なハイライトまで、さまざまな方法で文字やコードを強調できます。

特定の文字列を探すだけならCtrl + F、同じ文字列を複数編集するならCtrl + DやCtrl + Shift + Lが便利です。

一方で、変数や関数などプログラム上の同じ要素を扱う場合は、単純な文字列一致ではなく、シンボルハイライトやRename Symbolを利用するほうが適しています。

また、Syntax HighlightingやSemantic Highlighting、Bracket Pair Colorizationを活用すると、コードの構造を視覚的に把握しやすくなります。

さらに、editor.tokenColorCustomizationsやeditor.semanticTokenColorCustomizations、workbench.colorCustomizationsを利用すれば、ハイライトの色を自分の見やすい配色に変更することも可能です。

VSCodeでコードが見づらいと感じた場合は、検索・選択・シンボル・構文・意味解析のどのハイライトを変更したいのかを整理し、目的に合った機能を利用するとよいでしょう。

以上、VSCodeで文字やコードをハイライトする方法についてでした。

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

VSCode
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！

関連記事

  1. ホーム
  2. VSCode
  3. VSCodeで文字やコードをハイライトする方法
目次