WGGの活動log

ゲームクリエイターやらエンジニアを目指してる大学生が,技術的なことを書いたり遊んだゲームの感想を書いたりするブログです.ちなみにWGGは「ワグ」と読みます.

【VSCode】よく使ってる拡張機能をまとめてみた

かなり久しぶりの更新になります,WGGです

最近普段の開発でVSCodeを使う機会が増えてきたので,ちょっと便利だと思った拡張機能を纏めてみます.
これからVSCodeを使おうと思ってる人や,使い始めの人なんかは是非参考にしてみてください.

拡張機能

汎用的なもの,特定の開発で有用なものに分けて書いていきます.

汎用的なもの

Bracket Pair Colorizer

marketplace.visualstudio.com

括弧を色付けし,対応関係をわかりやすくする拡張機能です.
f:id:wgg00sh:20180823230220p:plain
公式のスクリーンショットですが,括弧ごとに色分けがされていて,インデントを作る中括弧"{ }" は,その範囲を色付きの線で表示してくれます.



Clock in status bar

marketplace.visualstudio.com

ステータスバーに時計を追加します. 自分はタスクバーを表示しない派なので本来タスクバーに表示されている時計を代わりにこれで表示しています.

Color Highlight

marketplace.visualstudio.com

カラーコードの文字列をその色で表示してくれます.
このように,rgb表記や,#を用いた16進数表記の両方に対応しています.
f:id:wgg00sh:20180823231123p:plain

jumpy

marketplace.visualstudio.com

画面内の任意の単語の位置に短いコマンドでカーソルを移動できるようにする拡張機能です.
慣れればマウスよりも素早く編集できるようになるかと思います
f:id:wgg00sh:20180823231943p:plain

Remote VSCode

marketplace.visualstudio.com
リモートサーバ上のファイルをホスト側のVSCodeで編集できるようになります.
サーバ側に十分な開発環境を用意していない場合なんかに便利でした.

Trailing Spaces

marketplace.visualstudio.com
アイコンの通り,怪しい空白を可視化してくれます.
主に2連続以上の半角スペースや,インデントが正しくないタブ文字なんかを見つける時に役立ちます

Windows Explorer Context Menu

marketplace.visualstudio.com

VSCodeエクスプローラに表示されているファイルや編集中のファイルに対してWindowsエクスプローラで右クリックをした時のメニューを表示できます.例えば,画像ファイルを編集したいとき,VSCodeではプレビュー機能は付いていますが画像編集用のソフトを用いて起動するようなことは標準ではできません.
そのような場合に,WindowsエクスプローラのメニューならVSCodeでプレビューすらできないファイルを開いたり,編集したりできるようになります.
f:id:wgg00sh:20180823233249p:plain
f:id:wgg00sh:20180823233325p:plain

Vim

marketplace.visualstudio.com
Vimです.もしかしたら使うかも?

Settings Sync

marketplace.visualstudio.com

VSCodeの設定をGist経由で共有することができます.
この拡張機能の存在を知らなかった時に,
Gitを使ってVSCodeの設定を複数の環境で使いまわす(Win/Linux) という記事をQiitaに書いたのですが,今思えば車輪の再発明でした.

とはいえ,Markdownのスタイルファイルなど,設定ファイルから参照しているローカルのファイルまでは共有できないみたいで,そういったファイルまで扱うのであれば上記記事のように自分で作っても良いかもしれません...


Unity 編

最近はUnityを使う機会があったので,便利だったものを3つ

Debugger for Unity / C#

marketplace.visualstudio.com
marketplace.visualstudio.com

VSCodeでUnityプログラム(C#)の補完を効かしたり,デバッグができるようになります.
とりあえずこの2つがあればUnityから起動するテキストエディタVisual StudioやMono DevelopからVSCodeに移行していいと判断できるぐらい扱いやすいです.

C# Format

marketplace.visualstudio.com

コードの整形ルールを変更できます.
VSCodeが標準で提供しているC#の整形ルールと,Unityが生成するC#ファイルの整形ルールが異なっていたため,Unity側に合わせるためにこの拡張機能を使用しています.

Processing 編

最近p5.jsも触っていたので,そちらも合わせて書いていきます.

Processing Language / p5js Snippets

marketplace.visualstudio.com
marketplace.visualstudio.com

それぞれProcessing / p5.js の組み込み関数などの補完,スニペットなどを使用できます.
Processingの場合,このようにsetupと途中まで入力するだけで,メインループのテンプレートまで作成できたりします.

f:id:wgg00sh:20180823235521p:plain

live-p5

marketplace.visualstudio.com
p5.jsのリアルタイムプレビューができます
VSCodeの画面を分割し,片側で実行結果を表示してくれます.
実際に使用している様子はリンク先にgif画像があるので,そちらを見てもらったほうがわかりやすいと思います.

Live Server

marketplace.visualstudio.com
ローカルのWebサーバを立ち上げて,編集中のファイルをアップロードできる拡張機能です.
p5.jsの動作確認にChromeを使用していたのですが,Chromeではローカルファイルから,別のローカルファイルを読み込む際にエラーが出てしまい,動作確認ができなかったのが,これを使用することで解決しました.
同時に,ローカルでWebサーバを立ち上げるということで,PCとスマホが同じLANに繋がっていればスマホ側でも動作確認ができて,PCとスマホでの表示の違いなんかを確認するのにとても便利でした.

Markdown

最後にMarkdown関連の拡張機能です. ドキュメントを書いたりする時に役立ちます

Markdown Preview Enhanced

marketplace.visualstudio.com
Markdownのリアルタイムプレビューができます.(↓公式スクリーンショット)
f:id:wgg00sh:20180824000659p:plain

Markdown PDF

marketplace.visualstudio.com

MarkdownファイルをpdfやHTMLに変換できます.

まとめ

普段使ってる拡張機能を書いてみました.
もしこの中に便利そうなものがあったら使ってみてください.
また,ここに書いてなくて便利な拡張機能があったら是非教えていただきたいです.