本記事では、VsCodeにインストールするべき必須の便利拡張機能を紹介しています。
Javascriptなどフロントエンド向けはこちら

PHP、Laravel向けはこちら

VSCodeでしゃれおつなテーマ一覧はこちら

- 環境
- 拡張機能
- Japanese Language Pack for Visual Studio Code
- TabNine
- ChatGPT
- Project Manager
- Material Icon Theme
- Settings Sync
- Visual Studio Code Commitizen Support
- GitLens
- Git history
- Copy file name
- Docker
- Search/Translate Hero – Google
- Bracket Pair Colorizer
- Log File Highlighte
- Path Intellisense
- indent-rainbow
- Command List
- Code Spell Checker
- Error Lens
- Edit Csv
- テキスト校正くん
- 拡張機能の起動に必要な時間を確認する方法
- VSCode学習におすすめの書籍
環境
- VsCode 1.63.2
拡張機能
Japanese Language Pack for Visual Studio Code

何はともあれ、まずは日本語化から。デフォルトはメニューなどの表示言語は英語なので、日本語化したいですよね。
TabNine

エディターには元から入力補完(オートコンプリート)機能が備わっていますが、こちらのプラグインを使用することにより、AI がより精度の高いコード補完をしてくれるようになります。
補完される内容は大きく以下の2パターンです
- オープンソースで公開されているコードで学習したもの
- Tabnine 導入後に書いたコードをローカルで学習したもの
無料版だと1行補完までしかできませんが、有料プランなら複数行にわたって補完できます
対応言語
- Python
- JavaScript
- Java
- C++
- C
- PHP
- Go
- C#
- Ruby
- Objective-C
- Rust
- Swift
- TypeScript
- Haskell
- OCaml
- Scala
- Kotlin
- Perl
- SQL
- HTML
- CSS
- Bash
なお、補完表示のデフォルトが上記のようなインラインとなっているので、ポップアップ表示にしたい場合は設定ファイルを変更する必要があります。(設定ファイルの場所は以下参照)
macOsであれば、/Users/{UserName}/Library/Preferences/TabNine/
のtabnine_config.jsonのinline_suggestions_mode
をfalse
にする必要があります。
ChatGPT
確実に入れましょう。AIにコードレビューやリファクタリング、テストの自動生成を任せることができるので、これが使えるとそうでないとでは作業効率が違ってきます。
Project Manager

複数プロジェクトをそれぞれフォルダ単位で管理できる拡張機能です。フォルダをプロジェクト単位で登録してあげると、VsCodeからワンクリックでそのプロジェクトを開くことができます。
Material Icon Theme

フォルダーやファイルのアイコンがおしゃれになるやつです。モチベーションアップ。
Settings Sync
※現在、こちらは拡張機能ではなく、エディターのビルトインサポート機能として備わっています
歯車マークから設定の同期をONにするだけでOKです。

インストールした拡張機能や設定などを別のPCで同期できる拡張機能です。
こちらの記事を参照ください

Visual Studio Code Commitizen Support

エディター上で対話式にコミットメッセージ生成できる優れものです。
手順
変更ファイルをステージングに上げた状態で、Ctrl + Shift + Pでコマンドパレットを開きCommitizenを選択
コミットの種類を選択
※日本語化には、事前に設定ファイル(.cz-config.js)をプロジェクトフォルダのルートに作成する必要があります
要約などを入力したら、コミットが完了する。
GitLens

特定のコードに対してカーソールを合わせると、コミッターやコミットメッセージを表示してくれます。(画像だとちょっと見えにくいですが…)
他にも、GUI上でadd、commit、push等ができるようになったり、ファイルの差分を確認できたりします。
コミッターやコミットメッセージを表示
GUI上でadd、commit、push等ができるようになったり、ファイルの差分を確認
Git history

Git logが見やすくなります。VsCodeのコマンドパレット(Ctrl + Shift + P)でgit logを実行すると、このようにコミットログを確認することができます
また、VsCode上でgitコマンドを実行したりできます。
Copy file name

ファイル名(拡張子あり・なし)をすぐにコピーできる機能です。相対パスなどはVsCodeデフォルトの機能でコピーできるのですが、ファイル名をコピーする機能がないんですよねー
Docker

あまり注目していませんでしたが、2021年11月16日のアップデートで、ymlファイルのタブ補完機能が実装され、超愛用しています。
Search/Translate Hero – Google

vscode右クリックメニューからgoogle新規タブを開いて単語検索できます
Bracket Pair Colorizer
こちらの拡張機能は、現在はVsCodeに組み込まれたため、Deprecatedとなっています

カッコの対応を色付きで表示してくれます。これがないとやってられない…
Log File Highlighte

ログファイルを見やすく色付けしてくれる拡張機能です。
Path Intellisense

パスの入力を支援してくれる。いちいちファイルパスを入力するのはちょっとナンセンス…
indent-rainbow

インデントを強調表示してくれます。見やすい!
Command List

コマンドラインをGUI化できる優れもの。コマンドラインから実行できるものであれば、基本的になんでも登録できる。
使い方
画面左側の再生ボタンを押すことで事前に登録しておいたコマンドを実行できる。
登録方法
プラスボタンを押して、コマンドとコマンド名を登録するだけでOK
Code Spell Checker

タイポ(と判断された箇所)をエラーとして表示してくれます
スペルミスと判断されたくない単語であれば、クイックフィックスから簡単に単語登録可能(ユーザー or ワークスペースのどちらに登録するか選択可)
Error Lens

VScodeの静的解析で見つけたエラーをエディタ上に表示してくれます
Edit Csv

CSVをVscode上で編集できる優れものです。
拡張機能インストール後、Csvを開き、右上のEdit csvを押すと
こんな感じでテーブル形式でデータが表示され、簡単な操作で編集することが可能です。神!!
テキスト校正くん

テキストやマークダウンで、ら抜き言葉など日本語のおかしい箇所をチェックできる拡張機能です
拡張機能の起動に必要な時間を確認する方法

いくら便利な拡張機能でも、せっかく軽量なVsCodeがモサついてしまうと元も子もないのですよね。TIPSとして、インストール済みの拡張機能の起動に必要な時間を一覧表示してくれる機能を紹介します
手順
- vscodeで、使用している拡張機能の起動に必要な時間を一覧表示することができる
- ctrl + shift + Pでコマンドパレットを開き、以下を入力する
Developer:Show Running Extensions
各拡張機能ごとに起動にかかる時間を表示してくれる
コメント