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をインストールします。

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

「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配下のカウント結果が出力されることを確認できました。

Kindle Unlimited

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

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

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

無料で30日間試してみる

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

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

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 超入門

難易度

実用性

読みやすさ

こんな人におすすめ： VSCodeをこれから使いこなしたい全ての人

インストールから基本機能まで完璧にサポート。エディタ選びに迷っている人にもおすすめです。

Amazonで詳細 🔴 楽天

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

難易度

実用性

効率化

こんな人におすすめ： Web開発に特化してVSCodeを使い倒したい人

拡張機能の選定やカスタマイズが非常に参考になる。開発効率を最大化できます。

Amazonで詳細 🔴 楽天

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

難易度

実用性

辞書度

こんな人におすすめ： VSCodeの基礎から応用まで極めたい人

辞書代わりに使えるほど詳細。困った時に必ず解決策が見つかる、頼りになる一冊です。

Amazonで詳細 🔴 楽天

📚 ITエンジニア向けおすすめ技術書・関連書籍まとめはこちら