新潟県最大級のポータイルサイトを情報技術を駆使して盛り上げたい方を募集しています。

Visual Studio Code(VSCode)の拡張機能あれこれ

非常にパワフルな開発環境を提供してくれるVisual Studio Code(以降VSCodeと略記)ですが、そのまま使うには正直厳しいです。
各種拡張機能をインストールして自分好みのVSCodeに育てましょう!

今回はLaravel+bitbucket環境のオススメ構成を紹介します。

1. 見た目を使いやすくする

使いにくいツールは作業効率が落ちるばかりかバグの温床になります。
メモ帳で優れたプログラムを書けると思いますか?
メモ帳はメモを書くものであってコードを書くものではありませんよね。

1.1 Japanese Language Pack for Visual Studio Code
日本語言語パック、最初に何も考えずに導入しましょう。

1.2 vscode-icons
ファイルやフォルダのアイコンをそれっぽく変更してくれる拡張機能。他にもいろいろな種類のアイコン拡張があるので好みに応じて選択しましょう。

1.3 Bracket Pair Colorizer
対応する括弧に縦横の補助線を引いてくれる拡張機能。Syntax Errorダメ絶対。

1.4 Color Highlight
HEXで書いた色コードを着色してくれる拡張機能。スタイルを触るならあったほうが捗ります。直接色コード書くことの是非は別として。

1.5 indent-rainbow
インデントの深さに色を付けてくれる拡張機能。一目でインデントの深さがわかっていい感じ。

2. bitbucketをVSCodeから操作できるようにする

新しいチームメンバーが参加したときや環境が壊れたとき、セットアップに苦労していませんか?IDEまでいくと逆に設定が大変だったりするのでVSCodeでいいとこどりしましょう。

2.1 Git Lends
サイドバーからリポジトリの状況を確認できるようにする拡張機能。VSCodeとSourceTree等のリポジトリ管理ツールを併用するなら不要です。

2.2 Jira and Bitbucket(Official)
VSCodeからプルリクエストできるようになる拡張機能。こちらもSourceTree併用なら不要。

3. 最低限のコーディング環境を整える

コードの乱れはシステムの乱れです(断言)。
可読性の低いコードを渡されると嫌ですよね?モラルに頼るよりもツールで解決しましょう。

3.1 PHP Intelephense
PHP用のコーディング補完機能。スマホの予測変換をイメージすると、どれくらい便利かわかりやすいです。

3.2 phpcs
導入しただけでも最低限のPHPコードスタイルをチェックしてくれる拡張機能。phpcsのチェックに従えば、コーディング規約がない現場でも一応読めるレベルのソースに仕上がります。

3.2 Live Sass Compiler
sassのコンパイラー。cssの圧縮レベル、ベンダープレフィックスの対応レベル等を設定可能。
運用途中で生成パラメタを変更すると差分が大変なことになるので、プロジェクトの初期段階で決めておきましょう。差分が大変なことになるので(大事なことなので2回言いました)

ほかにも
Live ServerPHP Serverを導入して簡易デバッグ環境を整える
SFTPを導入してVSCodeからFTP操作する
Remote-Containersを導入してDockerと連動させる
などなど可能性は無限大ですので、拡張機能を整えて理想のVSCodeライフを満喫しましょう!