MENU
contact

VS Code Counterとは

VSCode

採用はこちら

VS Code Counterは、Visual Studio Code上でソースコードの行数を集計できる拡張機能です。

ワークスペース全体や特定のフォルダを対象に、コード行・コメント行・空行などを分けて確認できます。

プロジェクト全体のコード量を把握したいときや、プログラミング言語ごとのファイル数・行数を確認したいときに便利です。

拡張機能の正式名称は「VS Code Counter」で、設定項目やコマンド名では「VSCodeCounter」という名称が使用されています。

なお、VS Code Counterが集計するのは基本的にソースファイルの物理的な行数です。

そのため、プログラムの命令数や処理数そのものを数えるツールではありません。

目次

VS Code Counterでできること

VS Code Counterには、コード量を確認するためのさまざまな機能があります。

ワークスペース全体の行数を集計できる

VSCodeで開いているプロジェクト全体を対象として、ソースコードの行数を集計できます。

JavaScript、TypeScript、PHP、HTML、CSSなど、複数の言語が混在しているプロジェクトでも言語ごとの集計が可能です。

特定のフォルダだけを集計できる

プロジェクト全体ではなく、特定のディレクトリだけを対象にできます。

たとえば、次のようなプロジェクトがあるとします。

project/
├─ frontend/
├─ backend/
├─ docs/
└─ tests/

この場合、frontend や backend だけを選択して行数を確認できます。

フロントエンドとバックエンドのコード量を比較したい場合などに便利です。

コード・コメント・空行を分けて確認できる

単純な総行数だけでなく、主に次のような項目に分類して集計されます。

項目内容
Languageプログラミング言語
Filesファイル数
Codeコードとして判定された行
Commentコメントとして判定された行
Blank空行
Totalすべてを含めた行数

たとえば、TypeScriptについて次のような結果が表示される場合があります。

Files: 20
Code: 3,500
Comment: 400
Blank: 600
Total: 4,500

この場合、TypeScriptファイルが20個あり、コード行・コメント行・空行を合わせて4,500行あるという意味です。

現在のファイルをリアルタイムで確認できる

VS Code Counterには、現在開いているファイルの行数をリアルタイムで確認する機能もあります。

コードを書きながら行数を確認したい場合に便利です。

選択したテキスト範囲を対象にカウントすることもできます。

集計結果をファイルとして保存できる

集計結果は、次の形式で出力できます。

Text
CSV
Markdown

Markdownで確認したり、CSVをExcelやGoogleスプレッドシートで分析したりできます。

VS Code Counterをインストールする方法

まず、VS Code CounterをVSCodeへインストールします。

拡張機能画面を開く

VSCodeを起動し、左側のアクティビティバーにある「拡張機能」をクリックします。

WindowsやLinuxでは、次のショートカットでも開けます。

Ctrl + Shift + X

macOSでは、

Cmd + Shift + X

を利用できます。

VS Code Counterを検索する

拡張機能の検索欄に、

VS Code Counter

と入力します。

発行者が uctakeoff になっている拡張機能を確認し、「インストール」をクリックします。

ワークスペース全体の行数を数える方法

VS Code Counterの基本的な使い方は、現在開いているワークスペース全体を集計する方法です。

プロジェクトフォルダをVSCodeで開く

まず、行数を調べたいプロジェクトをVSCodeで開きます。

たとえば、WordPressテーマの場合は次のようなフォルダです。

my-theme/
├─ style.css
├─ functions.php
├─ header.php
├─ footer.php
├─ index.php
├─ assets/
└─ js/

VSCodeの「ファイル」から「フォルダーを開く」を選択して対象フォルダを開きます。

コマンドパレットを開く

WindowsまたはLinuxでは、

Ctrl + Shift + P

を押します。

macOSでは、

Cmd + Shift + P

を押します。

Count lines in workspaceを実行する

コマンドパレットに、

VSCodeCounter

と入力します。

続いて、

VSCodeCounter: Count lines in workspace

を選択します。

日本語化されている環境では、「ワークスペース内のコード行を数える」と表示される場合があります。

実行すると、現在のワークスペース内にある対象ファイルが解析され、行数が集計されます。

参考サイト

ワークスペース内のソースコード行を集計する VSCode拡張 #VSCode – Qiita

特定のフォルダだけを集計する方法

プロジェクトの一部分だけを調べたい場合は、ディレクトリ単位で集計できます。

対象フォルダを右クリックする

VSCode左側のエクスプローラーから、集計したいフォルダを探します。

対象フォルダを右クリックして、

Count lines in directory

を選択します。

日本語環境では、「ディレクトリ内のコード行を数える」と表示される場合があります。

たとえば、

project/
├─ src/
├─ tests/
├─ docs/
└─ dist/

という構成であれば、src だけを対象に集計できます。

自分たちが実際に開発しているコード部分だけを確認したい場合に便利です。

リアルタイムで行数を確認する方法

現在編集中のファイルの行数をリアルタイムで確認することもできます。

リアルタイムカウンターを有効にする

コマンドパレットを開き、

VSCodeCounter: Toggle Real-time Counter Visibility

を実行します。

日本語環境では、「リアルタイムコードカウンタの表示・非表示切り替え」と表示される場合があります。

有効にすると、現在のファイルや選択範囲のコード量を確認できます。

集計結果が保存される場所

VS Code Counterでは、デフォルトの出力先として、

.VSCodeCounter

が設定されています。

そのため、プロジェクトを集計すると次のような構成になる場合があります。

project/
├─ src/
├─ package.json
└─ .VSCodeCounter/

.VSCodeCounter の中には、MarkdownやCSVなどの集計結果が保存されます。

履歴を保存する設定もあるため、実行日時などに応じて複数の結果が保存されることがあります。

集計結果をMarkdownやCSVで出力する方法

VS Code Counterは、複数の形式で結果を保存できます。

Markdown形式

Markdown形式は、VSCode上で結果を読みやすく確認したい場合に向いています。

デフォルトのプレビュー形式もMarkdownになっています。

CSV形式

CSV形式は、ExcelやGoogleスプレッドシートでデータを分析するときに便利です。

たとえば、定期的に計測して、

1月  10,000行
3月  14,000行
6月  20,000行

といった形でプロジェクトのコード量の変化を記録できます。

Text形式

シンプルなテキスト形式で結果を保存することもできます。

外部ツールで加工したい場合や、簡単な記録として残したい場合に利用できます。

node_modulesを除外する方法

Node.jsを利用したプロジェクトでは、node_modules に大量のファイルが含まれます。

依存ライブラリまで集計してしまうと、自分たちが書いたコードの量を把握しにくくなります。

VS Code Counterでは、node_modules がデフォルトの除外対象に含まれています。

主なデフォルト除外設定は次のようになっています。

[
  "**/.gitignore",
  "**/.vscode/**",
  "**/node_modules/**"
]

そのため、通常は node_modules を手動で除外する必要はありません。

なお、.git/** はデフォルト設定に含まれているとは限らないため、必要に応じて追加するとよいでしょう。

.gitignoreを利用して除外する方法

VS Code Counterでは、.gitignore の内容を除外条件として利用できます。

設定項目は、

VSCodeCounter.useGitignore

です。

デフォルトでは有効になっています。

たとえば .gitignore に、

node_modules/
dist/
build/
.env

と記述されていれば、これらを集計対象から除外できます。

ビルド成果物や外部ライブラリを除外して、実際に開発したソースコードを中心に集計したい場合に便利です。

files.excludeを利用する方法

VSCodeには標準で、

files.exclude

という設定があります。

VS Code Counterでは、

VSCodeCounter.useFilesExclude

を有効にすることで、この設定を除外判定にも利用できます。

デフォルトでは有効です。

すでにVSCodeで不要なファイルを files.exclude に登録している場合、その設定をVS Code Counterにも反映できます。

独自の除外ルールを設定する方法

VS Code Counter独自の除外設定も利用できます。

settings.json に、たとえば次のように記述します。

{
  "VSCodeCounter.exclude": [
    "**/.git/**",
    "**/.vscode/**",
    "**/node_modules/**",
    "**/dist/**",
    "**/build/**",
    "**/vendor/**"
  ]
}

これにより、不要なディレクトリを行数集計から除外できます。

WordPress開発での設定例

WordPressテーマやプラグイン開発では、次のようなディレクトリを除外すると便利です。

node_modules/
vendor/
dist/
build/

Composerやnpmなどでインストールした外部ライブラリを除外することで、自分が作成したコードを中心に集計できます。

集計対象を限定する方法

除外するだけでなく、特定のファイルだけを集計対象にすることもできます。

使用する設定は、

VSCodeCounter.include

です。

デフォルトでは、

[
  "**/*"
]

となっており、基本的にはすべてのファイルが対象候補になります。

たとえば、TypeScriptファイルを中心に確認したい場合は、プロジェクト構成に応じて include と exclude を調整するとよいでしょう。

対応している言語を確認する方法

どの言語を認識できるか調べたい場合は、コマンドパレットから、

VSCodeCounter: Check available languages

を実行します。

日本語環境では、「利用可能な言語を確認する」と表示される場合があります。

VS Code Counterは、VSCode本体やインストールされている言語拡張機能の言語設定を利用します。

そのため、対応する言語拡張機能を追加することで認識可能な言語が増える場合があります。

ただし、すべての言語で必ず完全に正確なコメント判定やコード判定が行われるとは限りません。

特殊な構文や言語拡張機能の設定によって、集計結果が異なる場合があります。

Remote Development環境で使う方法

VS Code Counterは、Remote SSHやDev ContainersなどのRemote Development環境でも利用できます。

ただし、リモート環境ではローカル環境にインストールされている言語拡張機能の情報を取得できない場合があります。

言語設定を保存する

そのような場合は、ローカル環境で、

VSCodeCounter: Save the collected language configurations

を実行します。

収集した言語設定を保存して、Remote Development環境でも利用できるようにします。

日本語環境では、「収集した言語設定を保存する」と表示される場合があります。

保存先を変更できる

言語設定の保存先は、

VSCodeCounter.saveLocation

で変更できます。

保存先には、Global SettingsやWorkspace Settings、出力ディレクトリなどを選択できます。

そのため、「必ずワークスペースの settings.json に保存される」というわけではありません。

VS Code Counterの主な設定

VS Code Counterには、多数の設定項目があります。

特に覚えておくと便利なのは次の設定です。

設定内容
VSCodeCounter.useGitignore.gitignore を除外判定に利用する
VSCodeCounter.useFilesExcludeVSCodeの files.exclude を利用する
VSCodeCounter.include集計対象を指定する
VSCodeCounter.exclude集計対象外を指定する
VSCodeCounter.outputDirectory結果の出力先
VSCodeCounter.outputAsTextText形式で出力する
VSCodeCounter.outputAsCSVCSV形式で出力する
VSCodeCounter.outputAsMarkdownMarkdown形式で出力する
VSCodeCounter.outputPreviewType集計後に表示する形式
VSCodeCounter.history保存する履歴数
VSCodeCounter.saveLocation言語設定の保存先

大規模なプロジェクトでは、ファイル検索数や同時に扱うファイル数に関する設定が影響することもあります。

Web開発でおすすめの設定例

JavaScriptやTypeScriptを使う一般的なWeb開発であれば、次のような設定が使いやすいでしょう。

{
  "VSCodeCounter.useGitignore": true,
  "VSCodeCounter.useFilesExclude": true,
  "VSCodeCounter.exclude": [
    "**/.git/**",
    "**/.vscode/**",
    "**/node_modules/**",
    "**/dist/**",
    "**/build/**"
  ],
  "VSCodeCounter.outputAsText": false,
  "VSCodeCounter.outputAsCSV": true,
  "VSCodeCounter.outputAsMarkdown": true,
  "VSCodeCounter.outputPreviewType": "markdown"
}

この設定では、依存ライブラリやビルド成果物を除外しながら、CSVとMarkdown形式で結果を保存できます。

VS Code Counterを使う際の注意点

VS Code Counterはコード量を把握するのに便利ですが、数字の意味を正しく理解して使うことが重要です。

行数が多いほど品質が高いわけではない

コードの行数と品質には直接的な関係はありません。

同じ機能でも、書き方によってコード量は大きく変化します。

たとえば、10,000行あるプログラムが5,000行のプログラムより優れているとは限りません。

行数から開発工数を単純に判断できない

コード量が2倍だからといって、開発に必要な時間が2倍になるとは限りません。

設計の複雑さ、テスト、デバッグ、仕様調整など、開発工数にはさまざまな要素が影響します。

自動生成コードに注意する

次のようなファイルが含まれていると、行数が大幅に増える場合があります。

node_modules
vendor
dist
build
生成済みJavaScript
自動生成された型定義

プロジェクト規模を比較するときは、同じ除外条件で計測することが重要です。

VS Code Counterが向いている用途

VS Code Counterは、次のような用途に向いています。

プロジェクト全体の規模を確認する

どの程度のコード量があるプロジェクトなのか、大まかに把握できます。

言語ごとのコード量を比較する

TypeScript、JavaScript、CSS、PHPなど、それぞれの言語がプロジェクト全体にどの程度含まれているか確認できます。

リファクタリング前後を比較する

リファクタリングによってコード量がどの程度変化したのかを確認できます。

ただし、行数が減ったからといって必ず品質が向上したとは限りません。

定期的にコード量を記録する

CSVなどで定期的に結果を保存すれば、プロジェクトの成長を記録できます。

WordPressテーマやプラグインの規模を確認する

WordPress開発では、PHP・CSS・JavaScriptなど複数の言語をまとめて集計できます。

vendor や node_modules などを除外すれば、自分が作成したコードを中心に把握できます。

VS Code Counterの基本的な使い方まとめ

VS Code Counterを初めて使う場合は、まず次の流れを覚えておけば十分です。

VSCodeでプロジェクトを開く
        ↓
VS Code Counterをインストール
        ↓
Ctrl + Shift + P
        ↓
VSCodeCounter: Count lines in workspace
        ↓
集計結果を確認
        ↓
必要に応じてMarkdownやCSVで保存

特定のフォルダだけを調べる場合は、

エクスプローラー
        ↓
対象フォルダを右クリック
        ↓
Count lines in directory

という流れです。

VS Code Counterは、プロジェクト内のコード量や言語構成を簡単に確認できる便利な拡張機能です。

まずはデフォルト設定のままワークスペース全体を集計し、必要に応じて .gitignore、files.exclude、VSCodeCounter.exclude などを調整するとよいでしょう。

ただし、行数はあくまでもコード量を把握するための指標の一つです。

コード品質や開発工数そのものを評価する数値ではないため、プロジェクト規模を把握するための補助的な指標として活用するのがおすすめです。

以上、VS Code Counterとはについてでした。

最後までお読みいただき、ありがとうございました。

VSCode
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！

関連記事

  1. ホーム
  2. VSCode
  3. VS Code Counterとは
目次