HTML/CSSのコーディングをするとき自分がよく使っているVSCodeについて、これから初めて触る人向けに、よく使うメニューや設定などのポイントをまとめておきます。

対象の読者

HTML/CSSをコーディングする人
テキストエディタをどれにするか迷っている人

ソースコードはこちらのサイト↓から、ポートフォリオのテンプレートをお借りして説明します。

インストール

インストールはこちら↓の記事がシンプルにまとまっていると思いましたのでご紹介。日本語化や、おすすめのプラグインなどもまとめられています。

フォルダーを開く

「ファイルを開く」より「フォルダーを開く」がおすすめです。(後述する「エクスプローラー」が使えるため。「ワークスペース」は、HTML/CSSではそこまで恩恵がありませんが、メンバー間で環境を揃えるために使うといった場合はあります。)

「ファイル → フォルダーを開く」をクリックし、html等が入っているフォルダを選択します。

「〜〜信頼しますか？」と表示される場合があるので、「〜〜信頼します」をクリック。

左のメニューバー

エクスプローラー

上記で「フォルダーを開く」をしていれば、エクスプローラーでファイルツリーを確認できます。ダブルクリックでファイルを開きます。

検索(GREP)

開いたフォルダ内の全てのファイルから検索できます。 Win:Ctrl+Shift+F / Mac:Command+Shift+F

ソース管理、実行とデバッグ(割愛します)

「ソース管理」では、gitなどのバージョン管理ツールと連携していれば、ソースのコミットや、他の人と同じファイルを更新してしまった場合などの対処を行います。
「実行とデバッグ」では、phpやpythonなどのプログラムを実行したり、デバッグしたりします。
いずれもここでは割愛します。

拡張機能(プラグイン)

いろいろな拡張機能をインストールできます。検索ボックスから、プラグインを検索して、必要な拡張機能の「インストール」ボタンをクリックすればOK。拡張機能によってはVSCodeの再起動が必要な場合があります。

HTML/CSSコーディングでおすすめのプラグインはこちら。(ものによっては拡張機能どうしが邪魔しあってしまう場合がありますので、メンバー間で拡張機能を合わせておく必要がある場合などは、やたらと入れないようにしましょう。)

名称	概要
Prettier - Code formatter	HTML, CSS, JavaScriptなどに対応したフォーマッタ
IntelliSense for CSS class names in HTML	CSSに記載されているクラス名を、HTMLの入力補完に表示する
indent-rainbow	インデントを色分けする

右のスクロールバー

画面の右側にスクロールバーと、ソースコードの縮小表示が表示されます。

警告

よくない書き方をしているところ(ここでは空のcss{})などに色がつきます。

検索

検索に一致する部分に色がつきます。

下のステータスバー

画面の下にステータスバーが表示されます。いろいろな情報が表示されますが、一部、設定のショートカットになっているものがあります。

文字コードを変更する

文字化けしているときは、文字コードの指定が間違っていることがあります。日本語のテキストファイルは、大抵はSJISかUTF-8です。文字化けしたときはこちら↓の文字コード部分をクリックして文字コードを変更します。

インデントを変更する

ファイルの中身はインデントを半角スペース2つでコーディングしているのに、設定は4になっている場合、フォーマッタ等の挙動が期待通りになりません。こちら↓の「スペース...」という部分から変更します。

改行コード

HTMLで問題になることはありませんが、納品先からCRLFやLFでと指定があれば、こちら↓から変えましょう。指定がなければLFが無難です。

言語

何言語で書かれたファイルかを変更します。HTMLで書いているのにタグ名などが色分けされない、などの時に確認しましょう。

コマンド

「表示 → コマンドパレット」から、コマンドを選択できます。 Win:Ctrl+Shift+P / Mac:Command+Shift+P

コマンドは部分一致で検索できるので、よく使うコマンドは何で検索すると出てくるか覚えておくと良いです。
例：「ドキュメントのフォーマット Format Document」というコマンドはFormで出てくる。

以下に、よく使うコマンドを紹介します。

フォーマット

インデントやカッコの位置などを揃えてくれます。(予めフォーマッタの拡張機能をインストールしておく必要があります。)

ファイルの比較

比較したいファイルを２つとも開いておき、「ファイル:アクティブファイルを比較」を選択、比較先のファイルを選択します。比較結果が色分けして表示されます。

定期的にファイルのコピーをとっておけば、「この日変更したのはどの部分だったか」といった確認がしやすくなります。gitなどのバージョン管理機能を使っている場合は、前回のコミットとの比較や、別ブランチとの比較などができますが、ここでは割愛します。

テキストエディタ部分の便利機能

ファイル内を検索

「編集 → 検索」で、開いているファイル内を検索できます。 Win:Ctrl+F / Mac:Command+F

ファイル名で検索

「移動 → ファイルに移動」で、ファイル名を検索して開くことができます。 WIn:Ctrl+P / Mac:Command+P

ファイル名は部分一致で検索できます。ファイルが多くなっても、素早く探すことができます。

画面を分割する

ファイル名のタブをドラッグ＆ドロップすると、画面を分割できます。

上下に分割する場合はこう↓

Altキーを押しながらだと、単一のファイルを分割して表示できます。

入力補完

途中まで入力すると残りをサジェストしてくれる機能です。Ctrl+Spaceを押すと出る場合もあります。

タグ名、閉じタグ、インデントの補完

属性と属性値の補完

ファイル名の補完

アウトライン

同じ階層のタグを開閉できます。見通しが良くなります。

カーソル移動や文字を選択する様々なテクニック

ダブルクリック→ドラッグで、単語から単語を選択できます。

(通常のドラッグでは単語の区切りに関係なく1文字ずつの選択になります。)

行頭へ移動。Win:HOME / Mac:Command+ ←
1回目でインデントを除いた行頭へ。2回目でインデントを含めた行頭へ移動します。

行末へ移動。Win:END / Mac:Command+ →

↑HOMEキーとENDキーはキーボードによってはFnキーと組み合わせが必要です。

インデントを除いて1行選択。(行頭へ移動 → Shift+行末へ移動)

行をタグで囲む。(インデントを除いて1行選択 → 切り取り → 入力補完 → 貼り付け)

トリプルクリックで1行選択。

行番号をクリックして1行選択。

複数行を選択して切り取り→貼り付け(❗️インデントが崩れるパターン)

前の行の末尾から選択して切り取り→貼り付け(インデントが崩れないのでおすすめ)

次を検索。F3

離れた行に連番を打つ。(F3 → 2 → F3 → 3 → F3 → 4)

その他

VSCodeに素早く戻ってくる。Win:Alt+Tab / Mac:Command+Tab