LOC View

A VS Code extension that displays line counts next to filenames in the file explorer tree view. Compatible with VS Code and Cursor.

Features

• 📊 Shows line counts directly in the file explorer (e.g., file.ts [320])
• 🔄 Real-time updates when files are modified
• ⚙️ Highly configurable with include/exclude patterns
• 🚀 Minimal performance impact with intelligent caching
• 🎨 Customizable display format

Installation

From Source (Development)

1. Clone this repository
2. Run npm install to install dependencies
3. Run npm run compile to build the extension
4. Press F5 in VS Code to run the extension in a new Extension Development Host window

From VSIX (Production)

1. Build the extension: npm run compile
2. Package it: npx vsce package
3. Install the generated .vsix file in VS Code or Cursor:
   • Command Palette → "Extensions: Install from VSIX..."
   • Select the generated .vsix file

Configuration

Configure the extension through VS Code settings:

lineCountDecorator.enabled

• Type: boolean
• Default: true
• Description: Enable/disable line count decorations

lineCountDecorator.fileExtensions

• Type: array
• Default: ["*"]
• Description: File extensions to show line counts for
• Examples:
  • ["*"] - All files
  • [".ts", ".js", ".tsx", ".jsx"] - Only TypeScript/JavaScript files
  • ["ts", "js", "py", "java"] - Extension without dots also works

lineCountDecorator.excludePatterns

• Type: array
• Default: ["**/node_modules/**", "**/.git/**", "**/dist/**", "**/out/**"]
• Description: Glob patterns for files/folders to exclude
• Examples:
  • "**/test/**" - Exclude test directories
  • "**/*.min.js" - Exclude minified files
  • "**/build/**" - Exclude build output

lineCountDecorator.formatTemplate

• Type: string
• Default: "[{count}]"
• Description: Template for line count display. Use {count} as placeholder
• Examples:
  • "[{count}]" → [123]
  • "({count} lines)" → (123 lines)
  • " • {count}" → • 123

Example Configuration

{
  "lineCountDecorator.enabled": true,
  "lineCountDecorator.fileExtensions": [".ts", ".js", ".tsx", ".jsx", ".py", ".java"],
  "lineCountDecorator.excludePatterns": [
    "**/node_modules/**",
    "**/.git/**",
    "**/dist/**",
    "**/coverage/**",
    "**/*.min.js"
  ],
  "lineCountDecorator.formatTemplate": " [{count}]"
}

How It Works

The extension uses VS Code's FileDecorationProvider API to add text badges to files in the explorer. It:

1. Reads file contents asynchronously to count lines
2. Caches results based on file modification time
3. Updates decorations when files change
4. Respects exclude patterns and file extension filters
5. Automatically skips binary files

Performance

• Lazy Loading: Only counts lines for visible files in the explorer
• Caching: Stores line counts with file modification timestamps
• Debouncing: Batches rapid file changes to prevent excessive updates
• Binary Detection: Automatically skips known binary file extensions

Known Limitations

• Only works with local files (not remote workspaces)
• Text badges cannot be styled with colors or icons (VS Code API limitation)
• Large files may take a moment to display counts on first load

Development

Prerequisites

• Node.js 16.x or higher
• VS Code 1.74.0 or higher

Building from Source

# Install dependencies
npm install

# Compile TypeScript
npm run compile

# Watch mode (auto-compile on changes)
npm run watch

# Run linter
npm run lint

Testing

Press F5 in VS Code to launch a new Extension Development Host window with the extension loaded.

Contributing

Contributions are welcome! Please:

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Run linters and ensure no errors
5. Submit a pull request

Author

Created for easy visualization of file sizes in VS Code and Cursor.

License

MIT

Changelog

0.0.1

• Initial release
• Basic line counting functionality
• File watching for real-time updates
• Configuration options for customization