VSCodeの便利な拡張機能5選

f:id:ds-asahina:20211028105041j:plain

こんにちは、朝比奈です。

久しぶりの投稿となります。
今回はタイトルにもある通り、私がよく使っているVSCode拡張機能を紹介してみようと思います。

VScodeとは?

Visual Studio Code(ビジュアル・スタジオ・コード)の略で、あらゆるブログラミング言語に対応しているソースコードの編集、記述ができるエディタです。

括弧が視覚的になるBracket Pair Colorizer 2

f:id:ds-asahina:20211028105357p:plain

括弧の対応がわかりやすくなります。
視覚的に範囲が見えるようになるので、ソース読みも捗るのではないでしょうか。

  • ※最新のVSCodeだと、拡張機能を入れなくても使えるそうです(ノД`)
    editor.bracketPairColorization.enabledをオンにすると有効になるようです。

複数行をまとめるJoinLines

f:id:ds-asahina:20211028111343g:plain

Ctrl + Jで文字列を1行にまとめることができる拡張機能
1行で表現されていたjsonを編集するために整形して、また1行に戻して…みたいな作業をする時に地味に活躍します。

正規表現のテストができる Regex Previewer

f:id:ds-asahina:20211028112210g:plain

VSCodeのエディタ内で簡単に正規表現の動作確認が行える拡張機能
Regex Previewerを有効にした状態で正規表現を含むファイルを開くと、Test Regex...という項目がエディタに追加され、これをクリックすると動作確認用のファイルが右に表示されるようになります。
あとは確認用の文字列を入力すると、正規表現にマッチしている場合はハイライトしてくれるというわけです。
とても便利。

AIで補完する Tabnine

f:id:ds-asahina:20211028113150p:plain

まだ使い始めて日が浅いですが、様々なコードを強力にAI補完してくれる拡張機能
console.log()で変数の値を表示してデバッグしたい状況などで、con...くらいまで入力すると、変数も含んだ状態で一撃で補完してくれるので非常に効率が良いです。
それ以外の部分でもかなり補完してくれるので、一度試してみてはいかがでしょうか。

タグの記述に便利 Auto Rename Tag

f:id:ds-asahina:20211028114335g:plain

HTML/XMLなどで、開始タグと終了タグを同時に変更できる拡張機能
地味に作業効率が上がります。塵も積もれば山となる。


いかかでしたか?

有名どころの機能も紹介したので、すでにご存知の機能もあったかと思いますが、もし使ったことがなくて興味を引いたものがあれば試していただければと思います。
今回は5選とさせていただきましたが、まだまだご紹介したい拡張機能ありますので、今後も記事にしていければと思います。

朝比奈 カテゴリーの記事一覧 -