はじめに
拡張機能ってなに？
VScodeの拡張機能ってなにか？ VScodeでは、もともとなかった機能を"後付け"で機能を追加することができる。それが拡張機能です。機能を追加して、より自分が使いやすいコードエディタにすることができます。
拡張機能を入れる(インストールする)にはどうすればいいのか？
簡単に数ステップでできちゃいます！
- 左側のやつ(サイドバー)の拡張機能マーク(四角が集まってるやつ)をクリックする
- 欲しい拡張検索の名前を検索する
- 欲しいやつを選ぶ
- 「インストール」をクリックする
この4ステップで簡単に拡張機能をインストールできます。
ただし拡張機能を入れる注意点として、 ・入れすぎると重たくなる ← 必要なものだけ入れよう ・脆弱性のあるものも含まれている ← 信用できるものだけ入れよう ..etc
と何でもかんでも入れるのはやめましょう。
本編どうぞ！
Japanese Language Pack for Visual Studio
VScodeの言語を日本語にしてくれる拡張機能です。
VScodeのデフォルトは英語表記なので、「日本語の方が安心する・英語読めん」って方は是非入れておきましょう！
Prettier - Code formatter
整ったスタイルのコードに整形してくれる拡張機能です。
ぐちゃぐちゃなコードだと管理もしにくく、読みにくいという最悪な状況になってしまいます。
HTML, CSS, JavaScriptの基本的にWeb開発で使うものはもちろん、JSON, Markdown, YAMLなどにも使えるので入れておいて損はありません。
Material Icon Theme
フォルダーやファイルのアイコンがいい感じの見やすいアイコンになる。
アイコンの色やテーマもいじることができるので、自分好みにカスタマイズしてみましょう！
indent-rainbow
インデントごとにカラーが分かれ、構造や位置が視覚的に見やすくなる拡張機能です。
インデント間違いで起きるエラーや、閉じタグの位置ミスがグッと減るのでオススメです。
Git Graph
Gtiのコミット履歴が見やすくなる拡張機能です。
視覚的に"どんなコミットがいつ出たのか"が見え、ブランチごとにどんな風になっているのか凄く見やすく、
Git操作・管理が格段にしやすくなります。
Thunder Client
VScode上でリクエスト（HTTPリクエスト）を送ることができる拡張機能。
GUI上(画面上でポチポチ)だけで簡単にリクエストを作成・送信することができます。
僕はよくAPIのテストなどで使っていますが、凄く使いやすくオススメです！
Figma for VS Code
VSCode上でFigmaのデザインを見たり、デザインした要素のCSを取得したりすることができます。
作られたmockを簡単にソース上に書き起こすことができます。
案件のmockが"Figma"で作られているときに役に立ちます。
Nuxt3で使える拡張機能
Auto Rename Tag
HTMLの開始タグか終了タグのどちらかを変更した際に、その名称を自動で変換してくれる拡張機能です。
例えば、
※最近自分は「Pug」を使っているため、あまりこれ使っていません。。。
ESLint
JavaScriptの単純な構文エラーやプロジェクト固有のコーディング規約を定義することができる拡張機能です。
シンプルエラーの回避や、チーム開発でのシステム全体でコードの一貫性を維持することができます。
Vue Language Features (Volar) ・ Tsプラグイン
Vue3(Nuxt3)の開発をサポートする拡張機能です。
シンタックスハイライト(Vue部分のフォントや色が特殊になる)で見やすくなったり、インテリセンス(入力中に自動補完とかのやつ)、TypeScript のサポート(２枚目のプラグインを入れれば)を可能にします。
Vue3を扱うなら絶対に入れておいてください！
Pythonで使える拡張機能
Python
Python開発に必要なものが集まった拡張機能。
環境セットやデバック、テスト機能、コード分析にフォーマットなどが入っています。
これさえ入れておけばpythonは一通りできます。
Docker・Dev Containers
Docker(様々なアプリケーションを簡単に仮想化・管理・実行できる → クソ楽に仮想環境がつくれる)をVScode上で操作できるようになる拡張機能です。
また、Dev Containersも入れておくことでDockerで作成したコンテナ(環境みたいなもん)をVScode上でコンテナ作成したり、環境を変えたり共有できるようになります。
autopep8
PEP8コーディングスタイル(pythonで使われるコーディング規約)に準拠したコードフォーマッタの拡張機能です。
綺麗に見やすいコードにするやつのPython版と思ってもらって大丈夫です。
Pylance
Pythonのインテリセンス、自動インポート、型のチェックにワークスペースのサポートをする拡張機能です。
変数や関数の入力・自動補完が可能になるほか、静的型チェックでランタイムの前にコードがエラーないことを確認してくれたり、入力されたモジュールやオブジェクトのインポート文を自動的に追加することができるので、コーディングの効率・スピードが爆上がりします！