Technical Notes

プログラムに興味を持ったことのある人なら誰しも聞いたことがあるはず、『Visual studio code』 の略であるVSCode。
VSCodeとは簡単に説明すると、プログラミングに特化したテキストエディタです。

※テキストエディタとは「中身が文字だけのファイル（テキストファイル）を編集する時に使うソフト」のことで、Windowsに標準搭載されている「メモ帳」もテキストエディタと呼ばれるアプリケーションのひとつ

今回はVSCodeの便利機能について、プログラマー歴8ヶ月の初心者が「これは使える！」と思った機能をいくつか紹介していきます。

VSCodeの特徴

VSCodeでプログラミングを始めるには、まずプロジェクト用のフォルダーを作成します。
VSCodeでそのフォルダーを開くことで、ソースコードの書き込み、編集を行えます。

VSCodeの特徴は、プログラミングに特化したショートカットキー機能や、プラグインの追加による機能性の向上を簡単に行えることです。 VSCodeのプラグインには、「間違えた記述をすれば破線で教えてくれる」「ソースコードのインデントを自動で整形してくれる」などがあり、通常のテキストエディタではできないプログラミングをサポートする便利な機能を追加することができます。

まずはVSCodeのショートカットキーを紹介します。憶えると作業の効率化を図ることができます。
ひとつひとつ打ち込んでいた作業も、以下のキーを憶えると「ショートカットキー1つ」で完了できてしまうかも？

コードのコメントアウトを行う

Ctrl + /

機能解説

コードのコメントアウト（ソースコードの一部をコメント化する）を行います。
同じショートカットキーで、各プログラミング言語に対応したコメントアウトができるため非常に便利です。

手順

●HTMLの場合

1.任意の場所を選択して「Ctrl+/」を押すと

2.コメントアウトされる

●CSSの場合（HTMLと同様の手順）

1.任意の場所を選択してCtrl + /
2.コメントアウトされる

●PHPの場合（HTMLと同様の手順）

1.任意の場所を選択してCtrl + /
2.コメントアウトされる

開いているファイルを一括保存する

Ctrl + Kを押した後S

機能解説

開いている全てのファイルを保存します。

手順

1.Ctrl + Kを押すと「2番目のキーを待っています...」と表示されます。
2.Sキーを押すと開いている保存されていないファイルが全て一括で保存されます。

単語選択をする

Ctrl + D

機能解説

単語選択を行えます。
「会社名をTwo-XからOne-Xに変更したい」などの場合に、1つずつ書き換えなくても単語選択をして一括書き換えが可能です。

手順

1.Two-Xを選択する

2.Ctrl + Dを押すと選択数が増える

3.キーボードで一括書き換えができます

※キーボードで文字を打つと、同時に同じものに書き換わる

PHP開発者目線からみたVSCodeの便利な機能

次はショートカットキーから離れ、設定が簡単かつ便利な機能を紹介します。
ただし、執筆者がPHP開発を主としているため、PHP開発者目線の便利な機能となっておりますので、ご了承ください。

PHPファイル保存時にコードを自動整形させる

機能解説

VSCodeのプラグインを使用し、保存時にインデントの揃って無いコードを自動整形します。
これから説明する設定を行うことにより、こんなインデントの揃って無いコードでも保存したときに...

この通りきれいに整形されます。

手順

1.プラグイン「PHP intelephense」をインストールします。
2.Ctrl + ,でVScodeの設定画面を開きます。

3.検索欄で「formatter」と検索、default formatterをPHP intelephenseに設定します。

4.同じく検索欄からformat on saveと検索し、赤枠にチェックを付けます。

5.ここまでの設定を行うことにより、保存時にコードが自動整形されます。

※Ctrl + Alt + Fで保存前に自動整形を行うこともできます。

置換をする

次はプラグインから離れ、VSCodeに標準搭載されている「置換」について紹介します。
ファイルの会社名を一括で変更したい場合などに利用できます。

機能解説

単語を指定して置換を行うことができます。

手順

1.対象のファイルでCtrl+Hを押すと下記キャプチャのような画面になります。

2.入力欄の上に置換前の文字入力（今回はTwo-X）、下に置換後の文字入力（今回はOne-X）を行います。

3.青枠の置換後の文字を入力しているフォームにカーソルを合わせてEnterキーを押すと、1つずつ置換、赤枠線のボタンを押すと、一括で置換を行うことができます。

ディレクトリのファイル全てを置換する

機能説明

開いているディレクトリのファイル全てを置換したい時に利用できます。

手順

1.左メニューの虫眼鏡マークを押します。
2.入力欄の上に一括置換前の文字入力（今回はTwo-X）、下に置換後の文字入力（今回はOne-X）
3.②を押すとディレクトリのファイル全てを一括置換することができます。

まとめ

今回はプログラマー歴8ヶ月の執筆者が便利と感じたVSCodeのプラグイン・ショートカットキーを一部紹介しました。
他にもVSCodeの便利な機能はたくさん存在します。
今回紹介した機能の中で活用できそうなものがあれば、ぜひ実践してみてください！