1.Visual Studio Code(VS Code)のインストール
下記のサイトにアクセスします。
https://code.visualstudio.com/download
Windows版、Mac版を選び、VS Codeをダウンロードします。
ダウンロード後、Windowsではインストーラー(.exe)を実行してVS Codeをインストールします。Macでは、zipファイルを解凍してインストールします。
2.VS Codeの使い方
VS Codeの日本語対応から、基本的な使い方、便利機能を紹介していきます。
2.1 VS Code 日本語化
VS Codeを開き、拡張機能から「japanese」と検索します。
Japanese Language Pack for Visual Studio Codeを選択して、インストールします。※画像は、既にインストール済みです。
一度、VS Codeを閉じて、再度開くと表示が日本語に切り替わっていればOKです。
2.2 フォントサイズ設定
Mac：「Code」⇒「基本設定」⇒「設定」を選択
Win：altキー⇒「ファイル」⇒「ユーザー設定」⇒「設定」を選択
フォントサイズを変更できます。
その他にも設定から、tabキーを押したときに、いくつスペース数を入れるかなどの設定ができます。
2.3 配色テーマ設定
自分好みのテーマを設定できます。
Mac：「Code」⇒「基本設定」⇒「配色テーマ」を選択
Win：altキー⇒「ファイル」⇒「ユーザー設定」⇒「配色テーマ」を選択
または(altキー⇒)「表示」⇒「コマンドパレット」⇒”配色テーマ”で検索
「配色テーマ」を選択すると様々なテーマが出てくるとので、自分の好きな色を選択できます。
※Draculaは後述のVSCodeおすすめ拡張機能で紹介しています。
2.4 フォルダの開き方
インストール直後は何もフォルダが選択されていないため、「フォルダーを開く(Open Folder)」からフォルダを選択できます。
※インストール直後は、「Open Folder」のボタンも左側に表示されています。
1つのフォルダを選択した後、別のフォルダも開きたい場合は、Windowsでは上部のメニューバーが隠れているので、「alt」キーで表示します。(Macは画面上部)
「ファイル」から「フォルダを開く」を選択して、フォルダを開くことができます。
また以下の方法でもフォルダを開くことができます。
左の「Project Manager」から鉛筆のアイコン(Edit Projects)を選択します。
選択後、下のようなファイルが開きます。(projects.json)
{}の中に表示するフォルダ名(name)、フォルダのパス(rootPath)を記載します。
例)“rootPath”:“C:\\GitHub\\sample1″,
その他は、paths:[]、tags:[]、enabled:trueで良いかと思います。
FAVORITESに新しいフォルダが追加されればOKです。
FAVORITESからフォルダを選択して、プロジェクトを切り替えることが簡単にできるようになります。
2.5 VS Code 便利機能
インテリセンス
VS Codeにはコードの補完機能があります。途中まで入力すると候補を表示してくれます。
Emmet
簡単な記載でhtmlやcssを補完してくれます。
省略方法にはチートシートを参考にして、よく使うものから覚えていけば良いか思います。
マルチカーソル
いくつも同じ箇所に同じ表示をしたい場合などに「alt」キーで選択して、入力すると選択した箇所を同時に編集することができます。
3.VS Codeおすすめ拡張機能(プラグイン)
日本語表示を「拡張機能」から追加したように、様々な便利な拡張機能を入れることで開発の効率を上げることができます。
いくつかの便利な拡張機能を紹介致します。
Dracula theme
コードの色を変える
Material Icon Theme
フォルダやファイルのアイコンを変える
Bracket Pair Colorizer 2
カッコなどがどこまでつながっているかを見やすくする
Highlight Matching Tag
開始タグと閉じタグがどこまでつながっているかを見やすくする
他Laravel関連
Laravel Snippets
Laravelのコード補完をしてくれる
Laravel Blade Snippets
「b:」でlaravelのbladeで使えるディレクティブを書くことができる
例)「b:if」=> @i…@endif
Laravel Extra Intellisense
route, view, configなどで自動補完してくれる
Laravel-goto-Controller
controllerのファイルにジャンプできる
Laravel goto view
viewファイルにジャンプできる。
ファイル内で「ctrl」キーを押しながら、クリックするとview側へ飛んでくれる
PHP Intelephense (追加設定必要)
定義されていない変数やクラスに対して警告を出してくれる
※laravelと同時に使う際にリレーションの設定をしたときに誤って警告が出てしまう
下のように拡張機能の設定でチェックを外しておくと使いやすいかと思います。
Undefined Class Constants, Undefined Constants, Undefined Functions, Undefined Methods, Undefined Properties
Tailwind CSS IntelliSense
Tailwind cssで入力するときに補完してくれる。
最後に
VS Codeの基本的な使い方からおすすめの拡張機能について解説していきました。VS Codeには様々な便利機能があるため、より使いこなせれば開発効率の向上につながるかと思います。
またVS CodeにはGitHubと連携したり、PR(Pull Request)をVS Codeから作成することもできます。
