🐰

僕のお気に入り VS Code の拡張機能

2023/07/01に公開

VS Code

紹介

拡張機能

結局 VS Code の拡張機能のおすすめってなんなん？

ググるといっぱい出てくる、

「これだけは入れておけ、VS Code の拡張機能、○選」
「おすすめの VS Code 拡張機能紹介」

などありますが、「おすすめ通りにインストールしてみたけど、これでいいの？」という不安、
「なんだかわからないけど、オススメってあるからインストールしておこう！（何もわかってない）」、
などありませんか？

ググって良さげな記事があったから、とりあえずこの辺り入れてみるといいよ！

他の人におすすめするときに、このような感じで URL を渡す、
VS Code をインストールしなおした際に、さて何の機能をインストールすればいいんだっけ？を漁ったり。

今回の目的

この辺りの「ふんわりとした内容を具体的にする」のが、この記事の目的です！！

僕が厳選した拡張機能紹介

Feel and Install

全部をインストールする必要はない、いいものだけインストールしましょう。
ただ拡張機能の名前をここに記載しただけだと、何の役割を果たすのかわからないまま
インストールすることになってしまいます。

それを避けるために

拡張機能の名前
機能の紹介
僕のおすすめポイント

を添えようと思います。

特に

機能の紹介
僕のおすすめポイント
を見て、ご自身に必要な拡張機能なのか？を判断していただいてインストールしていただけると嬉しいです。

すると、他の方におすすめの拡張機能を聞かれた際に
「〇〇するなら、この拡張機能をインストールするといいよ！」という、
ピンポイントで嬉しい（？）おすすめができるかもしれません。

インストールしただけだと役割を果たせない拡張機能もあるので、適切に使って
効率の良い開発をしていきましょう！

各拡張機能紹介

前置きが長くなりました。
さて、ここから本題です。

Auto Close Tag

HTML / XML のタグを閉じる機能。
例： <div> を入力した後、</div> が入力される。

Web 系の開発をする方におすすめです。
画面が荒いのですが、このようなイメージです。
訳あって、 1 行にまとめております。

Code Spell Checker

英語のつづりの誤りを教えてくれる機能。
コメントアウトやもちろん、変数名もつづりミスも教えてくれます。
つづりミスがなくなると、英語ができなくてもコードレビューで恥ずかしいことにならなくておすすめです。

Error Lens

💡マークのオレンジ並線、何を警告しているのかわかりづらいのを指摘してくれる機能。
d が定義されていないと、右側に記載があります。
修正もわかりやすいです。

Excel Viewer

Excel、CSV ファイルを表示できる機能。
ソートなどもできる。

公式より拝借。

Ghibli Icon Theme

ファイルのアイコンがジブリキャラクターになります。
それ以上のメリットはありません。
ただ、かわいいだけです。
公式より拝借。

Material Icon Theme

正統派（？）ファイルのアイコンが表示されます。
デジタル庁のホームページのように他の人が見てもわかりやすいアイコンです。
ファイルのアイコンとフォルダのアイコンがかなり準備されています。
一部だけ紹介です。公式から拝借。

indent-rainbow

インデントがわかりやすいようにカラーで表示してくれる機能。
これでインデントのミスは減るでしょう。
特に Python ユーザーは嬉しいかもです。
公式より拝借。

Jupyter

GoogleColab に慣れた方は、Notebook 形式の入力（ipynb）を使用できる。
Create : New Jupyter Notebook で、セルなどで Python を書くことができる。

Markdown Emoji

マークダウン.md を記載する際に、絵文字を挿入できる。
メリットは絵文字が使えること。

markdownlint

間違えた記法を注意、修正してくれる機能。
マークダウンを使用する人はインストールしてもいいかと思います。

Path Intellisense

ファイルパスを入力するとき、自動で保管をしてくれます。
インストールしておくと、コーディングが楽になるかもしれません。
いちいちコピーしなくてもいいところが楽です。
公式から拝借。

zenkaku

全角スペースを目立つように表示してくれる機能。
コードを書くときに万が一、全角スペースが混ざってしまっても修正可能です。

Trailing Space

半角スペースを見つけてくれる機能。
改行前のスペースを探して教えてくれます。
GitHub などでコードを公開するときに、意図しない半角スペースが紛れ込むのを防ぎかっこよくありたいので使用しています。

最後に

実はまだおすすめがあるのです。
しかし、僕も「これ、使っているんだけど、どうやって説明しよう？」で、まだ書き出せていない拡張機能があります。
続きを記載する予定なので、お楽しみに。
ファイルなどを準備するのが大変なものは、公式から引用させていただきました。

参考

公式ドキュメント。
すみません、どれくらい前か忘れましたが、どこかの記事からインストールしたもののうち、自分が使っているものだけの紹介です。「俺んだよ！」という方、いましたら教えてください。参考 URL として紹介させてください。

おまけ

VS Code といえば、テーマをいろいろなところから選んで使用できるところが嬉しいですよね。
Slack のテーマがありましたので、こちらに添付します。
１週間使用しましたが、Slack がどれかわからなくなったので、他のものにしました。
Slack が好きでたまらない方へ紹介です。