RevComm Tech Blog

コミュニケーションを再発明し 人が人を想う社会を創る

RevComm版VSCodeおすすめ拡張機能10選 - 2022

この記事は、RevComm Advent Calender 5日目の記事です。

RevComm の渋谷といいます。MiiTel Phone Mobile のバックエンドや E2E テストなどを主に担当しています。
それとは別に、TechTalk (エンジニア主体の技術共有の場) 運営にも 2021 年 8 月頃から参加しています。

今回は TechTalk 運営企画として RevComm のエンジニアメンバーからアンケートで募集した VSCode おすすめ拡張機能の中から 10 件を選りすぐってご紹介させていただきます。


コーディング補助

Code Spell Checker - スペルチェッカー

https://raw.githubusercontent.com/streetsidesoftware/vscode-spell-checker/main/images/example.gif
Code Spell Checker

ID: streetsidesoftware.code-spell-checker

スペルチェックを行う拡張機能です。コードやコメントにタイプミスがあった場合に下線が引かれます。
PR などで指摘を受けるとちょっと恥ずかしいので、事前にチェックが入るのは嬉しいですね。

推薦者からも「タイポがなくなる!」と力強いコメントをいただきました。
ただし、チェック対象の文字列が別の意味をもつ場合には指摘されないので、やはり人の目が重要になってきます。

Error Lens - エラー該当行にエラーメッセージを表示

https://raw.githubusercontent.com/usernamehw/vscode-error-lens/master/img/demo.png
Error Lens

ID: usernamehw.errorlens

エラー該当行にエラーレベル(エラーや警告など)とエラーメッセージを描画してくれる拡張機能です。
エラーがとても見やすく表示されますので、見落としが劇的に減ります。

発表中にも早速導入してみたメンバーから「いい感じ」というコメントをいただいています。

indent-rainbow - インデントの色分け

https://raw.githubusercontent.com/oderwat/vscode-indent-rainbow/master/assets/example.png
indent-rainbow

ID: oderwat.indent-rainbow

インデントごとに段を色分けしてくれる拡張機能です。Python や YAML など、インデントが意味をもつ言語には非常にありがたい機能です。

色の表示の仕方はライン(引用画像左側)と背景色(引用画像右側)から選ぶことができます。
発表中にも何名かのメンバーが早速導入して「素敵!」と感想をいただいています。

Python postfix completion - Python 版後置テンプレート

https://raw.githubusercontent.com/filwaline/vscode-postfix-python/master/images/demo.gif
Python postfix completion

ID: filwaline.vscode-postfix-python

変数の後にドットで処理を入力するとテンプレートに従って構文を補完してくれる、いわゆる「後置テンプレート」機能拡張機能です。(参考
簡単な式を入力する際にカーソルを前後に移動させる必要がなくなります。

サジェスト機能もありますので、該当する変数に対して適用できるテンプレートを見つけやすいです。


ビューワー・エディター

audio-preview - 音声ファイルビューワー

https://raw.githubusercontent.com/sukumo28/vscode-audio-preview/main/images/how-to-use.gif
audio-preview

ID: sukumo28.wav-preview

音声を扱うことの多い RevComm らしいおすすめ拡張機能です。VSCode 上で音声の波形を確認しながら再生することができます。

推薦者からは「サーバー上の音声聞くのに超便利なので、 PBX と Reseach のメンバーは全員インストールしといてください!」という熱烈なコメントをいただきました。
wav、mp3 、 aac などにも対応しています。

Rainbow CSV - CSV ビューワー& SQL ライク実行環境

Rainbow CSV

ID: mechatroner.rainbow-csv

CSV ビューワーの拡張機能です。列別に色分けして表示したり、SQL ライクなクエリを実行して該当行のみを抽出したりすることができます。
推薦者からは「ちょっとした調査に便利。SQLに比べてできないこともありますが、GROUP BY とかできます。」とコメントをいただきました。

SQL を実行するためには CSV ファイルのエンコードを UTF-8 にする必要があります。

Git Graph - Git 履歴ビューワー

https://raw.githubusercontent.com/mhutchie/vscode-git-graph/master/resources/demo.gif
Git Graph

ID: mhutchie.git-graph

Git の履歴をグラフで確認でき、Git 操作も行える拡張機能です。
推薦者からは「コミット履歴・ブランチ状況が手軽にグラフで見られるのでお気に入りです」とコメントをいただいています。

該当コミットのコードを VSCode 上で変更を比較できたり、ブランチに対する操作が行えます。
筆者はブランチ名を簡単にコピーできる機能が地味にお気に入りです。


メモ

Bookmarks - コードの指定行にブックマークを追加

Bookmarks

ID: alefragnani.Bookmarks

特定行に対してブックマークを付けられる拡張機能です。
推薦者からは「前日までの作業箇所やポイントなどを bookmark できて、どこで何をやったかが明確になる」とコメントをいただいています。

ブックマークにはラベルを付けることもできますので、どういった意図で付与したのかを後で見返すのも簡単です。

open Junkfile - 指定拡張子のテンポラリファイルをワンコマンドで作成

https://user-images.githubusercontent.com/32135/31615933-36120244-b2c6-11e7-84b1-91fb9638a724.gif
open Junkfile

ID: hidenba.open-junkfile

日時+指定拡張子のテンポラリファイルを簡単に作れる拡張機能です。ちょっとした覚え書きやスクリプトなどに便利ですね。

こちらは発表中にメンバーからコメントで教えていただきました。


番外編

vscode-pets - VSCode 内で飼えるペット

https://raw.githubusercontent.com/tonybaloney/vscode-pets/master/docs/source/_static/screenshot.gif
vscode-pets

ID: tonybaloney.vscode-pets

VSCode 内でいろいろな種類のペットを飼うことができる拡張機能です。
推薦者からは「ボールを投げて遊ぶことも出来ます」とコメントをいただきました。
コーディングに疲れた時に息抜きで遊ぶのもいいかもしれませんね。


さいごに

RevComm では、このようにチームを超えて皆でナレッジを共有しながら共に良いものを作り上げていこうというチームワークがあります。
TechTalk ではほぼ毎週さまざまなテーマの発表があります。

この記事で RevComm に興味を持ってくださった方がいらっしゃいましたら、ぜひ奮ってご応募ください。

採用情報|株式会社RevComm(レブコム)