【コードエディタ】VSCode導入【オススメ拡張機能】

web

こんにちは、なかだ(@newNakata)です。

前回までの投稿で開発環境ができました。
(去年の11月末に投稿したのに一昨年の日付になってますが・・・)
すぐ開発を開始することはできますが、このまま何も無いととても不便です。
本稿では開発を効率的に行うため、その準備として高機能エディタであるvscode(windows)をインストールします。
更に僕が入れて良かったと思えるオススメ拡張機能も紹介します。

vscodeとは

コードを Azure に簡単にデプロイできる統合ツールを備えた強力で軽量な無料コード エディターです。

「ん?」って思いますよね。僕もです。
vscode は Microsoft が無料で提供するコードエディタで、正式名称を Visual Studio Code と言います。
コードエディタとは、ソースコードの編集を目的としたテキストエディタの事で、テキストディタと言えば windows の notepad(メモ帳) や mac のシンプルテキスト、フリーウェアのサクラエディタ、シェアウェアの秀丸などがあります。
vscodeの特徴としては以下があります。

多くのOSに対応
windows、mac、linuxなど多くのOSに対応し、どのような環境でも使用する事ができます。
GitHub連携
githubはコードやデザインデータなどを保存・公開できるソースカード管理サービスです。
今後の投稿で詳しく解説します。
シンタックスハイライト
シンタックスハイライトとはソースコードが色付けされ、構造を視覚的に判断できるよう表示することを言います。
vscodeではPHPを始め多くの言語に対応しています。
スニペット
スニペットとは繰り返し書く機会のあるコードを呼び出す機能を言います。
インテリセンス
コード補完の事です。
簡単に言うと、例えば関数名を途中まで書くとインテリセンスが利用可能なメンバ関数の候補を列挙してくれます。
ターミナルを開ける
これまでの投稿で言うところのteratarmが開けるイメージです。
Laravelなどターミナルコマンドを多用する言語を使う際、vscode1つで完結する事ができます。
デバッグ機能が使える
言語によってはインストールが必要ですが、デバッグ機能が標準で付随しています。
拡張機能
使用目的に合った拡張機能の追加で最適な開発環境を構築する事ができます。

長くなりましたが「ほ~ん」程度に思って貰えば大丈夫です。

インストール

Visual Studio Code を表示したら以下からファイルをダウンロードします。

ダウンロードしたインストーラを実行し、vscodeをインストールします。
保存したexeファイル(今回の場合はVSCodeUserSetup-x64-1.78.2.exe)をダブルクリックし、セットアップウィザードを実行します。

同意するをクリックして次へボタンクリック。

今回はインストールするフォルダを初期設定のままにしますが、変更したい方は変更してください。
次へボタンクリック。

スタートメニューに登録したくない場合はチェックを入れてください。
今回はこのまま次へをクリック。

デスクトップにアイコンを作成するは初期設定ではチェックが入っていません。
僕は後で移動するのでチェックを入れていますが不要な場合はそのままで大丈夫です。
サポートされているファイルの種類・・・は初期設定ではチェックが入っています。
僕は任意に都度行いたいのでチェックを外していますが、この段階で登録する場合は外す必要はありません。
選択が終わったら次へボタンクリック。

インストールボタンクリック。

インストール中。
すぐ終わります。

インストールが完了したので早速立ち上げてみましょう。
完了ボタンをクリックします。

VSCodeが起動しました。
英語なので日本語に変更します。
左メニューしたの Extensions アイコンをクリックします。

検索文字入力欄に japa くらまで打つと Japanese Language Pack fro Visual studio code エクステンションが表示されるので Install ボタンをクリックします。

エクステンションのインストールはすぐ終わります。
確認は先ほどの検索文字入力欄の文字を削除するとインストール済のエクステンションが表示されます。
画面右下に「Visual Studio Codeの表示言語を日本語に変更して再起動しますか?」と小窓が表示されるので Change Language and Restart ボタンをクリックすると再起動が行われ表示言語が日本語に変わります。

右下のメッセージに気付かず再起動する前に閉じたなどでエクステンションをインストールしたものの日本語にならない方はコマンドパレットで変更できます。
画面上部の View > Command Palette… を選択するとコマンドパレットが表示されます。
そこに display と入力するとサジェストが表示されます。

Configure Display Language を選択すると変更したい言語のサジェストが表示されます。

日本語を選択すると今度はわかり易く画面中央に「再起動する?」と表示されます。

Restart ボタン押下で再起動が行われ無事、日本語表示に変わります。

オススメ拡張機能(エクステンション)

オススメは沢山あるのですが、今回は当ブログでこれまで構築した環境に関連するものを紹介します。
使用するまでに作業が必要なエクステンションについては今後随時記事にしたいと思います。

Remote – SSH

VSCodeでリモート上のサーバーに接続できる様になります。
過去の記事(【VirtualBox】開発環境を作る – OS編 【CentOS】)で TeraTarm を使用していますがそれと同じ事ができます。
ファイル転送のFTPなども不要になります。

Trailing Spaces

コードの中にある余計なスペースを表示してくれます。
他人のコードを触る事が多い方は逆に苛々してしまうかもしれません。

indent-rainbow

インデント数に応じて色分けしてくれます。
まぁこれだけなんですが、個人的にこれ、滅茶苦茶便利です。
他人のソースを見る事の方が多い僕にとって、仕事はインデントを揃える事から始まるので必須です。

Path Autocomplete

ファイルパスを補完してくれます。
画像やcsv、モジュールなどなどをインポートする時ファイルパス名リストが表示されるので便利です。

PHP Intelephense

php でプログラムを書く時に色々自動補完してくれます。
未使用変数グレイアウト、コード補完、文法チェック、マウスオーバーで情報表示、メソッドジャンプ、プロジェクト・ファイル内検索などがあり、個人的には必須です。
同じ機能で PHP IntelliSense がありますが、こちらは未使用変数グレイアウトがありません。

PHP Debug

PHP の定番デバッグツールである xdebug をvscodeで使えるようにするエクステンションです。
過去の記事(【VirtualBox】開発環境を作る – PHP編 【CentOS】)では大本である xdebug パッケージをインストールしていません。
今後、パッケージインストールとphp debugを合わせて記事にしたいと思いますが、ここでは先にVSCodeのエクステンションだけ紹介します。

PHP DocBlocker

PHPDocのコメントを自動保管してくれます。
関数を作った後に /** と入力するだけで作成した関数に関連するdocblockが追加されます。
同じ様なエクステンションとして PHPDoc Commnet があります。
こちらはコマンドパレットから呼び出して使います。

Git Graph

Git はコード管理をするソフトウェアですが、Git Graph はそのコミット履歴を確認するのに便利です。
その他、ブランチの操作をする事もできます。

REST Client

VSCodeでHTTPリクエスト(GET、POST)送信でき、レスポンスの確認もVSCodeで行えます。
API 実装時のレスポンスを確認するのに curl などを用意しなくてもよくなるのでとても便利です。

Regex Previewer

入力した正規表現の動作チェックができます。
正規表現を記述した行のすぐ上に Test Regex… と表示され、クリックするとチェックファイルが別画面で開きます。

Rainbow CSV

CSVファイルのデータを区切り(カンマなど)毎に色分けして強調表示してくれます。
マウスホバーした時のデータ表示やSQLライクなクエリを実行したりもできます。

まとめ

今回はテキストエディタについてでした。
僕はもともとサーバに TeraTarm で ssh 接続をしてそこで emacs を立ち上げて作業していました。
ただ SES で出る事も多くサーバに接続して作業ができる環境ばかりではありません。
更に3社程連続して「vscodeを使って開発」とオーダーが出たため VSCode に移行しました。
ただ VSCode でもemacs のキーバインド拡張機能を入れて使っています。

と言う事で、本稿はここまでとなります。
出尽くした情報ですが、誰かの役に立てば幸いです。

次回は remote ssh でサーバに接続して簡単なプログラムを書いてみようかと思っています。
投稿は自分のペースで。