使っているVSCode拡張機能一覧
初めに
今回は私が普段使っているVSCodeの拡張機能一覧を並べてみました。
面白そうなものがあったら是非ご覧になった皆さんも使ってみてください。
HTML 関連
Auto Rename Tag
特徴
- 1つのHTML / XMLタグの名前を変更すると、ペアのHTML / XMLタグの名前が自動的に変更されるようになります。
Live Server
特徴
- ポート番号5500でブラウザが立ち上がり、編集しているHTML、CSS、JSファイルを保存するたびにホットリロードでブラウザが更新されるようになります。
CSS 関連
Live Sass Compiler
特徴
- SASS & SCSS を リアルタイムでコンパイルしてくれます。
Tailwind CSS IntelliSense
特徴
- Tailwind CSS の 補完機能を提供してくれます。
JavaScript 関連
ES7+ React/Redux/React-Native snippets
特徴
- React/Reduexのスニペットを提供してくれます。
-
jsx,tsxファイルでrafc または rafceを入力してから tab を押すと Reactコンポーネントのひな型が生成されます - その他にも、ctrl + shift + r で 登録されているコマンドを一覧できます
Turbo Console Log
特徴
-
ctrl + alt + lを 押すことでConsole.logをカーソルの位置に書いてくれます。
JSDoc Generator
特徴
-
ctrl + shift + pから 選択することでJSDocを生成してくれます
Prettier - Code formatter
特徴
- 設定したルールに基づいて、コードをフォーマットしてくれます。
ESLint
特徴
- ESLintをVS Code に統合し、画面上に表示してくれます。
- プロジェクトにインストールされているESLintライブラリを使用します。
- インストールされていない場合はグローバル版のESLintを使用します
Import Cost
特徴
- インポートされたパッケージのサイズをエディタ上に表示してくれます。
C# 関連
C#
特徴
- C#のコードを書くうえで必要な機能（リファクタリング、ナビゲーション、インテリセンス、リンティング）がそろっています。
C# XML Documentation Comments
特徴
-
///と 記述するだけで xml documentを生成してくれます。
Python 関連
autoDocstring
特徴
- 関数内にカーソルを合わせて
ctrl+shift+f2でDocstringを生成してくれます。
autopep8
特徴
- Pythonのautopep8をサポートしたフォーマッタです。
indent-rainbow
特徴
- インデントを分かりやすく色付けしてくれます。
MarkDown 関連
Markdown All in One
特徴
- マークダウンを書くために必要なもの（目次、自動プレビューなど）を提供してくれます。
Markdown Preview Mermaid Support
特徴
- マークダウン内で書いたmermaid記法のチャートをプレビューしてくれるようになります。
Mermaid Markdown Syntax Highlighting
特徴
- mermaid記法で書かれたものをシンタックスハイライトしてくれます。
その他
Discord Presence
特徴
- DiscordのステータスにVSCodeをプレイ中と、編集しているファイル名が表示されるようになります。
DotENV
特徴
-
.envの ファイルをシンタックスハイライトしてくれます。
Error Lens
特徴
- エラーが起こっている箇所をハイライトしてくれます。
- 行の末尾にエラーの原因を表示してくれます。
Git Graph
特徴
- リポジトリのGirグラフを表示してくれます。
- 簡単にブランチをダブルクリックすることで簡単にチェックアウトできます。
- この他にも簡単にGitのアクションを実行することができるようになります。
GitHub Copilot
特徴
- コードを書きながらAIが内容を推測してリアルタイムで書くべきコードを提案してくれます。
GitHub Copilot Chat
特徴
- 上記の Copilot に付随する拡張機能です
- Chat GPTのように VS Code 上で AIとチャットすることができます
Material Icon Theme
特徴
- エクスプローラーやタブに表示されるアイコンを変更してくれます。
Output Colorizer
特徴
- VSCode内の出力、デバッグパネルに表示される文字をカラー化してくれます。
Trailing Spaces
特徴
- コード内にある不要な空白を保存時に削除してくれます。
VSCode Animations
特徴
- VSCode内の挙動をアニメーションしてくれるようになります。
Better Comments
特徴
- コメントを強調表示したり、TODOや警告などいつものコメントの文字色を変更することができます。
CodeSnap
特徴
- 自身が選択した範囲のコードをスクショすることができます。
- ctrl + shift + p でコマンドパレットを呼び出し、CodeSnapを選択することで撮影モードに入ります。
終わりに
いかがだったでしょうか？
ここで挙げた以外にも有用な拡張機能はたくさんあります。
ぜひご自身でもストアで探してみてください。