- Advertisement -

VSCodeのおすすめ拡張機能 26選

VSCodeを使う上でおすすめの拡張機能をまとめました。VSCodeには2万以上の拡張機能が登録されていますが、一部の有名な物やテーマやフレームワーク系以外はあまり使われていません。

今回はそんな中で、汎用的にVSCodeが使いやすくなる拡張機能を紹介します。

おすすめ拡張機能

エディター系

Bracket Pair Colorizer

型や()の対応を色付きで表示してくれます。ソースコードの可読性が上がるので、ぜひ試してみてください。また後継としてBracket Pair Colorizer 2もリリースされています。

Bracket Pair Colorizerの使用イメージ

Path Autocomplete

パスの入力を支援してくれます。パスを覚えたり、コピペする必要がなくなるので便利です。

Path Autocompleteの使用イメージ

EditorConfig for VS Code

EditorConfigのVSCode版の拡張機能となります。インデントや改行コードなど、コーディングスタイルを統一するための機能であり、様々なエディタやIDE間で共通のルールを設定したり、プロジェクトごとに設定を変更・統一することができます。

.editorconfigがあればそのディレクトリ以下のファイルすべてにコーディングスタイルを適用します。Gitと合わせて活用すると簡単に設定を共有でき、チーム、様々なエディタ、IDEで共通のコーディングスタイルを設定できます。

使い方としてはコードを書いている時に使用します。indent_size や indent_style を設定してインデントはコードを書いてる時点で揃えれるようにします。

チームで開発する際は必ず入れておきたい拡張機能です。

EditorConfig for VS Code 拡張機能

Prettier

コードの修正を行う拡張機能です。EditorConfig for VS Codeとの違いとしてはEditorConfig for VS Codeはコーディング中に使用するインデント周りがメインの整形ツールですが、こちらはGitのコミット前にPrettierを掛けることでコードの表記を修正します。

コミット時の最終防波堤です。

Prettier - Code formatter

ESLint

構文エラーを解析する拡張機能になります。TravisCICircleCI等のCIサービスと連携することで、コード規約を守っていることをチェックします。

フォーマットはEditorConfig for VS CodeとPrettierにが行うため、ESLintでは主に構文チェックを行います。CIでESLintが通っているかを確認して、NGのリポジトリはRejectするといったフローにすることができます。

CIとは、Continuous Integrationの略で、継続的インテグレーションと呼ばれています。開発者が自分のコード変更を頻繁にセントラルリポジトリにマージし、その度に自動化されたビルドとテストを実行することで、小サイクルでのインテグレーションのエラーを素早く修正できます。

ESLint

Rainbow CSV

読みづらいCSVファイルを色を変えて読みやすくしてくれます。

Rainbow CSVの使用イメージ

Partial Diff

過去のコミットとのdiffはGitLensでできますが、こちらは選択範囲のdiffが可能な拡張機能になります。2つの範囲選択を行うとdiffを実行してくれます。

Partial Diffの使用イメージ

REST Client

VSCode上でHTTPリクエストを送信し、VSCode上でレスポンスを確認できる拡張機能です。この拡張機能を入れることでHTTPリクエストの確認が簡単にできるようになります。

REST Clientの使用イメージ

Regex Previewer

正規表現の入力補助用の拡張機能になります。正規表現の結果をチェックしながら、コーディングすることができます。

Regex Previewerの使用イメージ

vscode-proto3

ProtocolBuffers3のハイライトやスニペットの機能を拡張します。

vscode-proto3の使用イメージ

Auto Rename Tag

ペアになっているHtml/XMLのタグ名称を自動変更してくれる拡張機能になります。作業量が半減するので便利です。

Auto Rename Tagの使用イメージ

Auto Close Tag

ペアになっているHtml/XMLのタグの終了タグを自動的に追加してくれる拡張機能です。

Auto Close Tagの使用イメージ

ファイル操作

Duplicate action

ファイルやフォルダの複製用の拡張機能になります。ファイルかフォルダを右クリックし、Duplicate file or directory で複製することができます。

Duplicate actionの使用イメージ

装飾系

vscode-icons

ファイルにアイコンが表示され、拡張子などがわかりやすくなります。

vscode-iconsの使用イメージ

Output Colorizer

コンソールへの出力結果を装飾してくれます。見やすくなって便利です。

Output Colorizerの使用イメージ

Log File Highlighter

先ほどの拡張機能は出力の装飾でしたが、こちらはログファイルの装飾となります。

Log File Highlighterの使用イメージ

Git系

Gitを使用するユーザーは入れておきたい必須の拡張機能になります。合わせてMacでのGitの環境構築方法について以下のリンクで紹介しているので、参考にしてみてください。

Git History

 git log を見やすくするための拡張機能になります。以下のコマンドのようにgit logをツリー上に表示してくれます。よりグラフィカルで見やすい拡張機能になります。

 git log --graph --all --format="%x09%an%x09%h %d %s" 

Git Historyの使用イメージ

GitLens

こちらもGitの補助用の拡張機能です。コミットのファイル単位の比較やファイル閲覧中に最新のコミット内容やコミッターの確認などをHoverでできたりするため、コーディングする際に大変便利です。

GitLensの使用イメージ

gitignore

github/gitignoreを参照して自動で.gitignoreを作成する拡張機能になります。 command + shift + P で表示するコマンドパレットから「Add gitignore」で.gitignoreを追加できます。

gitignoreのコマンドパレットの追加表示

GitHub Pull Requests

GitHub公式の拡張機能になります。ブラウザでGitHubを確認することなくプルリクエストの概要やレビューのやり取りを確認できます。

コミットハッシュのリンクをクリックするとブラウザでGitHubの当該コミットのページを開いたり、右上のCheckoutボタンで、当該ブランチをワンクリックでチェックアウトできたりもします。また、コメントやレビュー、プルリクエストを閉じたりもVisual Studio Code上でできます。

GitHub Pull Requestsの使用イメージ

その他

Settings Sync

複数の環境で同じ設定を使いたい場合は便利な機能です。私もノートとデスクトップ2か所で設定を合わせたかったので、使っています。

 ⇧ + ⌥ + U/D で設定をアップロード/ダウンロードすることが可能です。

Settings Syncの使用イメージ

Bookmarks

ソースコードにブックマークを付けることができるようになります。コマンドリストからブックマークにジャンプしたり、ブックマークをリスト化することができます。

Bookmarksの使用イメージ

TODO Highlight

TODOやFIXMEなどのコメントのハイライトを細かく設定できます。

TODO Highlightの使用イメージ

Todo Tree

TODO Highlightは記載したTODOをハイライトする程度の機能ですが、こちらはTODOのリスト管理やジャンプ機能などが統合されています。似た拡張機能にTodo+があります。人気はTodo Treeの方が高いですね。

Todo Treeの使用イメージ

Japanese Language Pack for Visual Studio Code

VSCodeのUIを日本語化することができます。ただ一部の機能と相性が悪い場合があるので、私は使っていません。

Japanese Language Pack for VS Code

PlantUML

UMLの図を作成する際に便利な拡張機能となります。

PlantUMLの使用イメージ

まとめ

VSCodeのおすすめ拡張機能 26個を紹介しました。PythonやC、Javascriptなど特定の言語に寄らない拡張機能をメインで紹介しました。VSCodeでコーディングする上でかなり使いやすくなる拡張機能がたくさんありますので、皆さんも使ってみてください。

- Advertisement -
UMilCL
UMilCLhttps://umilcl.com
兼業ブロガー。大手製造業の企画・設計・プロジェクト管理で8年、受配電・電動機・システムの保全部門の課長1年目。 得意分野: プロセス制御と統計、機械学習、画像処理、システム技術 保有資格: プロジェクトマネージャー、情報処理安全確保支援士、ネットワークスペシャリスト、応用情報処理、第一種衛生管理者

Similar Articles

Comments

返事を書く

コメントを入力してください!
ここに名前を入力してください

- Advertisement -

Follow US

1ファンいいね
19フォロワーフォロー
633フォロワーフォロー
3,383フォロワーフォロー
0SubscribersSubscribe

Archive

Most Popular