【VSCode】フロントエンド開発時に便利なプラグイン

2021年6月14日

Web制作

はじめまして。5月から入社したフロントエンドエンジニアのkoyaです！
以前は横浜でフロントエンド開発をしていました。お久しぶりの方はお久しぶりです。
好きなものはジャンプ漫画と焼き肉です！これからよろしくお願いします！

今回は、入社を機にVSCodeでインストールしたプラグインの一部を紹介したいと思います。

プラグイン紹介

SVN,TortoiseSVN

SVN
TortoiseSVN
弊社ではSVNでバージョン管理を行っているため、これらのプラグインを使用しています。
インストールするとサイドバーでファイルヒストリーなどを確認することができます。
今までGitを利用していた人でも馴染みのある操作が可能になります。SVNを利用する場合はインストールしたいですね。

インストール後はsetting.jsonに以下のようにSVNのパス指定することで使用できます。

"svn.path": C:\\Program Files\\TortoiseSVN\\bin\\

Docker

Docker
名前の通りDockerをVScodeで管理できるようにするプラグインです。
SVNもそうでしたが、普段使うツールでVScode上で操作できるものは一括管理したい性格なので重宝しています。

Live Server

Live Server
1クリックで静的なローカル環境を立ち上げてくれるプラグインです。
簡単なコードであれば、わざわざブラウザシンクなどを使わなくてもこれだけで確認が出来るのでとても便利です。

Live Sass Compiler

Live Sass Compiler
こちらは1クリックでsassをコンパイルしてくれるプラグインです。
Live Serverと同じで、gulpを導入するほどでもないコーディングの際に使えるので便利です。

上の画像の左下が「watching」になっていますが、この状態であれば更新時に常にコマンドラインでコンパイルしてくれます。

IntelliSense for CSS class names in HTML

IntelliSense for CSS class names in HTML
ワークスペース内で定義されたクラスなどを覚えて自動補完してくれるプラグインです。
コーディング時間を大幅に減らしてくれるのでオススメです。

とりあえず入れておくプラグイン一覧

以下は視覚補助や自動化などのプラグインです。
マークアップする際に便利なので、とりあえず入れておいて良いと思います。

※2021/12/15追記
Bracket Pair Colorizer 2はVSCodeの標準機能になったため、メンテナンス終了の告知がされました。
VSCodeの設定からBracket Pair Colorizationを有効にすると、拡張機能なしで利用できます。
ですが、現状カスタマイズ性はプラグインに劣るので、カスタマイズに物足りなさを感じる方はBlockmanなどを使ってみると良いと思います。