【共通編】VsCodeにインストールするべき必須の便利拡張機能

本記事では、VsCodeにインストールするべき必須の便利拡張機能を紹介しています。

Javascriptなどフロントエンド向けはこちら

【フロントエンド】VsCodeにインストールするべき必須の便利拡張機能
本記事では、主にフロントエンド開発において、VsCodeに入れるべき必須の便利拡張機能について紹介しています。コーディングの量を必要最小限に抑えて開発効率をあげてくれるものや、ハイライト表示等の開発補助をしてくれるものを紹介していますので、ぜひ参考にしてみてください。

PHP、Laravel向けはこちら

【PHP、Laravel編】VsCodeにインストールするべき必須の便利拡張機能
本記事では、vscodeを用いて行うPHP、Laravel開発を効率化させるvscodeの便利拡張機能を紹介します。効率的でミスのないコーディングを行うために必要な機能が備わった各種プラグインと開発のモチベーションを高めてくれるツールをご紹介しておりますので、まだ使用したことない方はぜひこの機会に使ってみてください。

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

VSCodeでしゃれおつなテーマを適用して開発モチベーションを上げる
本記事では、VSCodeでしゃれおつなテーマを適用して開発モチベーションを上げる方法について紹介しています。

環境

  • VsCode 1.63.2

拡張機能

Japanese Language Pack for Visual Studio Code

masayan
masayan

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

Japanese Language Pack for Visual Studio Code - Visual Studio Marketplace
Extension for Visual Studio Code - Language pack extension for Japanese

TabNine

masayan
masayan

エディターには元から入力補完(オートコンプリート)機能が備わっていますが、こちらのプラグインを使用することにより、AI がより精度の高いコード補完をしてくれるようになります。

 

補完される内容は大きく以下の2パターンです

  • オープンソースで公開されているコードで学習したもの 
  • Tabnine 導入後に書いたコードをローカルで学習したもの

 

Tabnine AI Autocomplete for Javascript, Python, Typescript, PHP, Go, Java, Ruby & more - Visual Studio Marketplace
Extension for Visual Studio Code - JavaScript, Python, Java, Typescript & all other languages - AI Code completion plugin. Tabnine makes developers more product...

無料版だと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_modefalseにする必要があります。

Security check

ChatGPT

確実に入れましょう。AIにコードレビューやリファクタリング、テストの自動生成を任せることができるので、これが使えるとそうでないとでは作業効率が違ってきます。

ChatGPT [deprecated] - Visual Studio Marketplace
Extension for Visual Studio Code - Unofficial VS Code - ChatGPT integration

Project Manager

masayan
masayan

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

Project Manager - Visual Studio Marketplace
Extension for Visual Studio Code - Easily switch between projects

Material Icon Theme

masayan
masayan

フォルダーやファイルのアイコンがおしゃれになるやつです。モチベーションアップ。

Material Icon Theme - Visual Studio Marketplace
Extension for Visual Studio Code - Material Design Icons for Visual Studio Code

Settings Sync

※現在、こちらは拡張機能ではなく、エディターのビルトインサポート機能として備わっています

歯車マークから設定の同期をONにするだけでOKです。

masayan
masayan

インストールした拡張機能や設定などを別のPCで同期できる拡張機能です。

こちらの記事を参照ください

【VsCode】別のマシンで設定を同期できる拡張機能「Settings Sync」を利用する
本記事では、別のマシンでVsCodeの設定を同期できる拡張機能「Settings Sync」を利用する手順について説明しています。設定を同期しておくことで端末を買い替えた際などでもすぐに以前の開発環境を再現することができるのでとても便利ですね。

Visual Studio Code Commitizen Support

masayan
masayan

エディター上で対話式にコミットメッセージ生成できる優れものです。

Visual Studio Code Commitizen Support - Visual Studio Marketplace
Extension for Visual Studio Code - commitizen - git commit with conventions

手順

変更ファイルをステージングに上げた状態で、Ctrl + Shift + Pでコマンドパレットを開きCommitizenを選択

コミットの種類を選択

※日本語化には、事前に設定ファイル(.cz-config.js)をプロジェクトフォルダのルートに作成する必要があります

要約などを入力したら、コミットが完了する。

GitLens

masayan
masayan

特定のコードに対してカーソールを合わせると、コミッターやコミットメッセージを表示してくれます。(画像だとちょっと見えにくいですが…)

他にも、GUI上でadd、commit、push等ができるようになったり、ファイルの差分を確認できたりします。

GitLens — Git supercharged - Visual Studio Marketplace
Extension for Visual Studio Code - Supercharge Git within VS Code — Visualize code authorship at a glance via Git blame annotations and CodeLens, seamlessly nav...

コミッターやコミットメッセージを表示

GUI上でadd、commit、push等ができるようになったり、ファイルの差分を確認

Git history

masayan
masayan

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

Git History - Visual Studio Marketplace
Extension for Visual Studio Code - View git log, file history, compare branches or commits

また、VsCode上でgitコマンドを実行したりできます。

Copy file name

masayan
masayan

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

Copy file name - Visual Studio Marketplace
Extension for Visual Studio Code - Copies the name of the currently opened file to the clipboard.

Docker

masayan
masayan

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

Docker - Visual Studio Marketplace
Extension for Visual Studio Code - Makes it easy to create, manage, and debug containerized applications.

Search/Translate Hero – Google

masayan
masayan

vscode右クリックメニューからgoogle新規タブを開いて単語検索できます

Search/Translate Hero - Google/Translate/Bing/Baidu/Wiki/Yahoo/Github/Npm Engine - Visual Studio Marketplace
Extension for Visual Studio Code - 🔍Support search online or translate online/offline.

Bracket Pair Colorizer

こちらの拡張機能は、現在はVsCodeに組み込まれたため、Deprecatedとなっています

masayan
masayan

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

We're sorry, the page you requested cannot be found.

Log File Highlighte

masayan
masayan

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

Log File Highlighter - Visual Studio Marketplace
Extension for Visual Studio Code - Adds color highlighting to log files to make it easier to follow the flow of log events and identify problems.

Path Intellisense

masayan
masayan

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

Path Intellisense - Visual Studio Marketplace
Extension for Visual Studio Code - Visual Studio Code plugin that autocompletes filenames

indent-rainbow

masayan
masayan

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

indent-rainbow - Visual Studio Marketplace
Extension for Visual Studio Code - Makes indentation easier to read

Command List

masayan
masayan

コマンドラインをGUI化できる優れもの。コマンドラインから実行できるものであれば、基本的になんでも登録できる。

Command List - Visual Studio Marketplace
Extension for Visual Studio Code - Save and display shell commands like File Explorer

使い方

画面左側の再生ボタンを押すことで事前に登録しておいたコマンドを実行できる。

登録方法

プラスボタンを押して、コマンドとコマンド名を登録するだけでOK

Code Spell Checker

masayan
masayan

タイポ(と判断された箇所)をエラーとして表示してくれます

Code Spell Checker - Visual Studio Marketplace
Extension for Visual Studio Code - Spelling checker for source code

スペルミスと判断されたくない単語であれば、クイックフィックスから簡単に単語登録可能(ユーザー or ワークスペースのどちらに登録するか選択可)

Error Lens

masayan
masayan

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

Error Lens - Visual Studio Marketplace
Extension for Visual Studio Code - Improve highlighting of errors, warnings and other language diagnostics.

Edit Csv

masayan
masayan

CSVをVscode上で編集できる優れものです。

Edit csv - Visual Studio Marketplace
Extension for Visual Studio Code - extension to edit csv files with a table ui

拡張機能インストール後、Csvを開き、右上のEdit csvを押すと

こんな感じでテーブル形式でデータが表示され、簡単な操作で編集することが可能です。神!!

テキスト校正くん

masayan
masayan

テキストやマークダウンで、ら抜き言葉など日本語のおかしい箇所をチェックできる拡張機能です

テキスト校正くん - Visual Studio Marketplace
Extension for Visual Studio Code - VS CodeでテキストファイルやMarkdownファイルの日本語の文章をチェックする拡張機能

拡張機能の起動に必要な時間を確認する方法

masayan
masayan

いくら便利な拡張機能でも、せっかく軽量なVsCodeがモサついてしまうと元も子もないのですよね。TIPSとして、インストール済みの拡張機能の起動に必要な時間を一覧表示してくれる機能を紹介します

手順

  • vscodeで、使用している拡張機能の起動に必要な時間を一覧表示することができる
  • ctrl + shift + Pでコマンドパレットを開き、以下を入力する
    Developer:Show Running Extensions

各拡張機能ごとに起動にかかる時間を表示してくれる

VSCode学習におすすめの書籍

コメント

タイトルとURLをコピーしました