VSCodeでソースコードのステップ数をカウント・集計する

VSCodeのVS Code Counterプラグインを使用すると、簡単にソースコードのステップ数を集計できます。

前提

• VSCodeをインストールしていること。
  ※本記事では、以下バージョンで確認しました。

1
バージョン: 1.93.1 (user setup)
2
コミット: 38c31bc77e0dd6ae88a4e9cc93428cc27a56ba40
3
日付: 2024-09-11T17:20:05.685Z
4
Electron: 30.4.0
5
ElectronBuildId: 10073054
6
Chromium: 124.0.6367.243
7
Node.js: 20.15.1
8
V8: 12.4.254.20-electron.0
9
OS: Windows_NT x64 10.0.22631

• VSCodeでソースコードを開いていること。
  　※本記事では、nuxt-blogのコードを例に紹介します。

• VSCodeの言語拡張がインストールされていること。
  　※nuxt-blogの場合、vueファイルに対応したVue - Officialの拡張機能が必要。

• 確認した「VSCode Counter」のバージョン

  • v3.5.0

拡張機能「VS Code Counter」検索

VSCodeの拡張機能を押下します。（ショートカットキーはCtrl+Shift+X）

Marketplaceで拡張機能を検索するの欄で、

VS Code Counterを入力します。

拡張機能「VS Code Counter」インストール

インストールを押下し、VS Code Counterをインストールします。

インストール完了後、画面は以下のように表示されます。

Kindle Unlimited

IT専門書も30日間無料で読み放題

1冊数千円する専門書から、ビジネス書、実用書、雑誌まで幅広いジャンルが定額で読み放題。ITスキルの向上はもちろん、日々の情報収集や教養を深めるのにも最適です。

• 📚 技術書も月額定額で読み放題
• 📱 マルチデバイス対応
• ✨ 30日間の無料体験

無料で30日間試してみる

「VS Code Counter」実行

エクスプローラー（Ctrl+Shift+E）でファイルを読み込んでいることを確認します。

「Ctrl + Shift + p」キーを押下し、コマンドパレットを開きます。

コマンドパレットにVSCode Counterを入力し、Count lines in workspaceを選択します。

集計結果

以下のように、集計結果のサマリが表示されればOKです。

Summaryに加えて、Languages(言語ごと)、Directories(ディレクトリごと)の集計結果を確認することができます。
nuxt-blogのcodeブロックは約24Kであることを確認できました。
出力結果はルートフォルダの.VSCodeCounterに保存されます。

特定のディレクトリをカウントする

特定のディレクトリをカウントする場合は、ディレクトリを選択し、 「右クリック＞ディレクトリ内のコード行を数える」を選択します。
以下キャプチャの場合は、componentsディレクトリを対象にカウントします。

集計結果(componentsディレクトリ)

以下のように、components配下のカウント結果が出力されることを確認できました。

カウントがエラーになる場合

ファイルがあるにも関わらず以下エラーが発生した場合は、対象ファイルの拡張子に対応した拡張機能が入っていない可能性があります。

componentsの場合、配下のvueファイルを開くと.vueファイル用の拡張機能が未インストールとなっていて、コードも色分けされていない状態でした。

上記キャプチャ右下のインストールを押下して、Vueの拡張機能をインストールします。
以下はインストール完了後の画面です。

Vueの拡張機能インストール後は、.vueファイルが色分け表示されるようになりました。

ファイルの色分けを確認したら、VSCodeを再起動します。
再起動後、「ディレクトリを選択＞右クリック＞ディレクトリ内のコード行を数える」を再実行し、エラーが解消することをご確認ください。

関連拡張機能
ソースコードのステップ数や規模を把握するのと合わせて、「誰が・いつ・どの部分を追加したか」というGitの変更履歴をVSCode上で視覚的に確認したい場合は、拡張機能「Git History」が便利です。使い方については以下の記事を参考にしてください。

ITナレッジライフ

【VSCode】ソースコードのGit履歴を確認する方法

本記事では、Visual Studio CodeでGit履歴を効率的に確認する方法を解説します。拡張機能「Git History」を用いた、使い方・履歴確認手順を詳しく紹介。VSCodeを使ったGit履歴操作をマスターしましょう。

VSCode学習者にお勧めの本

おすすめ

これ1冊でできる！Visual Studio Code 超入門

Amazonで詳細を見る 🔴 楽天で見る

Visual Studio Code完全入門　Webクリエイター&エンジニアの作業がはかどる新世代エディターの操り

Amazonで詳細を見る 🔴 楽天で見る

Visual Studio Codeパーフェクトマスター

Amazonで詳細を見る 🔴 楽天で見る