ツイート
シェア
LINEで送る
B! はてぶでブックマーク
Pocketでブックマーク
RSSフィード

VSCodeで拡張パッケージ選びに困ったら、おすすめを入れておこう!

visual studio code image
イラストダウンロードサイト【イラストAC】
の画像をもとに加工しています。

VSCode(Visual Studio Code)はプログラミング用エディターなんですが、よりよいプログラミング環境を作るには拡張パッケージが必要です。

その拡張パッケージは膨大で、慣れてないと何を使っていいのか分かりません。それに時間をかけるのもナンセンスです。

迷うくらいなら、おすすめのパッケージを使いましょう。

VSCodeのパッケージにはおすすめ機能がついています。そこには各プログラミング用の基本的な拡張パッケージが表示されるので、何を入れていいか分からないときはまずそれを入れましょう。

拡張パッケージは使ってみないと良し悪しが分かりません。また、開発に必要なソフトウェアと連動しているものが多いので、それらについて知識がないとインストールする意味がありません。

パッケージのことを知るには意外と広範囲の知識が必要です。それを覚えるまでパッケージ無しは本末転倒。

まずは基本的なものを入れておいて、少しずつ知識を広めながら次のステップへ進んでいきましょう。そこから自分好みのパッケージを探しても遅くはないです。

『ようこそ』改め『作業の開始』からおすすめパッケージを探す

かつてのVSCodeには『ようこそ』ページが存在しました。

vs code - ja - welcome

そこの『カスタマイズ』にリンクがあって、そこからおすすめパッケージをインストールできました。

キャプチャのJavaScript, Python, PHPのリンクが無くなっているのは、ボクがおすすめを利用してインストールしたため。

かんたんですね?

ただ最新バージョンのVSCodeでは『ようこそ』が無くなってます。代わりに『作業の開始』になりました。

残念なことに『作業の開始』ではおすすめパッケージの場所が分かりにくくなっています。

どのバージョンから変わったのか分かりません。VSCodeの自動アップデートを有効にしているのでいつの間にか変わってた。

『作業の開始』のチュートリアルからおすすめパッケージを探す

さっそく『作業の開始』からおすすめパッケージを探しましょう。もう閉じてしまった人はヘルプ(H)メニューから開くことができます。

VSCode 作業の開始ページ

新しくなった『作業の開始』では、画面右側のメニューがチュートリアルにまとめられました。おすすめパッケージもその中に入ってます。

チュートリアルの『基礎の学習』へ行きましょう。キャプチャのように表示されないのは、そのチュートリアルを一度完了させてるからです。

完了マークを外しても再表示はされません。

『その他....』でチュートリアルの全メニューが選べます。

VSCode チュートリアル『無限の拡張性』

アイコンをクリックするとおすすめパッケージがインストールできますが、アイコンは最近、注目度が高く利用頻度の高いものしか表示されません。

ボクの環境では、プログラム言語はPython, TypeScript / JavaScript, C/C++くらいです。

たとえばPHPのおすすめが欲しい場合は、『おすすめの拡張機能の参照』ボタンを押します。

するとパッケージメニューへとジャンプします。

VSCode パッケージのレコメンド検索

アイコンは人によってちがう?

VSCodeのパッケージのおすすめ機能は、ユーザーが作っているソースコードのファイルの種類を見ています。

このような動きからすると、アイコンの表示もユーザーの環境によって違うのかもしれません。

ボクの場合、PHPプロジェクトですでにPHPの拡張パッケージはインストール済みです。だからアイコンが表示されないのかも?

ただ、一部Pythonコードもあり、インストール済みのPythonパッケージのアイコンも表示されます。

(じつは JavaScriptもインストール済み。)

もしキャプチャとアイコンがちがうなら、『自分に合わせておすすめしているのかな?』ぐらいでよく、気にすることはありません。

パッケージメニューからおすすめを探す

もう気づいてるかもしれませんが、チュートリアルから飛んだ先のパッケージのリストは、おすすめ(@recommended)で検索した結果です。

パッケージの検索では直接入力することが多いですが、ある程度のグループ検索も用意されています。その中に『おすすめ』がある。

VSCode パッケージ グループ検索

@(アット)だけ入力するとグループ検索の選択リストが表示されます。

わざわざチュートリアルからせずとも、直接パッケージメニューからも同じ結果が得られます。

環境に合わせて付けられるレコメンドマーク

もう一度、パッケージのレコメンド検索の結果を見てみましょう。

VSCode パッケージのレコメンド検索

パッケージのアイコンの左上に☆マークが付いていると思います。

これもVSCodeのおすすめパッケージの機能です。

このマークは、使う環境によってVSCodeがおすすめのパッケージを探してくれて付けられます。決してレコメンド検索の結果だから付いているわけではありません。

たとえば、Webのソースコードなら、PHPやRuby, HTML, CSS, JavaScriptのおすすめパッケージに付けられ、PythonコードならPythonのパッケージに付けられます。

ソースコードがGitリポジトリからクローンされたものだったらGitのパッケージにもレコメンドマークが付きます。

パッケージを準備する前にワークスペースを先に作成しよう

このレコメンドマークは、VSCodeがワークスペースのソースファイルの拡張子やファイル構成などを見ておすすめするパッケージを決めてます。

過去のワークスペースの履歴なども見ている気がする。

なので、空のワークスペースのままでは、レコメンドマークの精度が落ちます。

プログラム開発の手順として、ソースコードを作成する前にパッケージを用意しそうになりますが、VSCodeではまず、ワークスペースから先に作りましょう。

もし、ワークスペースにファイルがない場合は、適当に自分が使うプログラム言語のファイルを置いときましょう。

できればそのファイルを1回は開いておいたほうがいい。VSCodeに環境の癖を覚えてもらうために。

そうすると、作業に合ったパッケージをおすすめしてくれます。

パッケージメニューを開くだけで表示されるレコメンドマーク付きパッケージのリスト

このレコメンドマーク付きのパッケージは、パッケージメニューを開くだけでリスト化されて表示されます。

VSCode パッケージメニューを開いてすぐ

おすすめパッケージの中でこれが一番分かりやすい。メニューを開くだけで済むし。個人的にはここで探すのが一番いいと思う。

わざわざ『@recommended』で検索しなくていい。

ちなみに、レコメンドマークはインストール済みパッケージでは消えます。

『おすすめを入れたつもりなのに、おすすめじゃなくなってる!!!』

と勘違いしないでください。

(ボクはすぐ忘れて何回も勘違いする。)

パッケージ検索で上位に出てくるのもある意味おすすめ

正確にはおすすめパッケージではないですが、パッケージ検索で上位に来るものも良いです。

パッケージには評価機能があり☆5つで表します。この評価が高くてインストール数の多いパッケージが上位表示されます。

(それ以外にも更新頻度とかもっと総合的に判断しているっぽいが。)

なんか食べログで選ぶやり口と同じで、本当に信頼できるか? と疑いますが、レコメンドマークが付いたものは上位表示されやすいので、マークと併用すればハズレは少ないでしょう。


VSCodeは今や、プログラミング用エディターのトップランナーになっているので情報も多く、各プログラム言語の開発環境を作る情報はいくらでも出てきます。

その中で一番出てくるものを使ってもいい。

ただし、何のためにそのパッケージを使ってるのか、分からずじまいで放置はダメですよ?

ましてや、自分が分かってないのに人に薦めたり情報発信したりするのは愚の骨頂です。

前の投稿
Visual Studio Codeで改行をCRLFで保存してしまう。LFに変える方法。
Visual Studio CodeにPHP開発環境を作る。
次の投稿
コメントを残す

*