CSV Viewer Extension

A lightweight VS Code extension that displays CSV files in a beautiful, interactive table format using Svelte.

Features

🎯 Automatic CSV Detection

• Opens automatically when you open any .csv file
• No manual activation needed - just open and view

📊 Table View

• Clean, formatted table display with sticky headers
• Proper handling of quoted fields and commas within quotes
• Row hover highlighting for easy reading
• Responsive column widths

🔄 Toggle Between Views

• Switch between table view and raw text view with a single click
• Toggle button in the top-right corner
• Seamlessly switch back and forth without losing your place

🎨 Theme Integration

• Uses VS Code theme colors for seamless integration
• Works with any VS Code theme (light, dark, or custom)
• Matches your editor's look and feel

Installation

Option 1: Install from VSIX (Recommended)

1. Download the latest .vsix file from the builds/ folder
2. In VS Code, open the Command Palette (Cmd+Shift+P or Ctrl+Shift+P)
3. Type "Install from VSIX" and select it
4. Navigate to the .vsix file and install

Or via command line:

code --install-extension builds/csv-viewer-extension-1.1.0.vsix

Option 2: Development Installation

1. Clone this repository
2. Open in VS Code
3. Press F5 to launch the Extension Development Host
4. Test with any CSV file

Usage

1. Open a CSV file - The extension activates automatically
2. Table View - Default view shows data in a formatted table
3. Toggle to Text - Click "Show Text" button (top-right) to see raw CSV
4. Toggle to Table - Click "Show Table" to return to table view

Example CSV

The repository includes a sample.csv file for testing:

Name,Age,Email,Department,Salary
John Doe,32,[email protected],Engineering,95000
Jane Smith,28,[email protected],Marketing,78000
...

Development

Prerequisites

• Node.js (v20+)
• VS Code (v1.80+)
• npm or yarn

Setup

# Install dependencies
npm install

# Build the extension
npm run build

# Start watch mode for development
npm run watch

Development Workflow

1. Open project in VS Code:

   code .
   

2. Start watch mode (auto-rebuilds on changes):

   npm run watch
   

3. Press F5 to launch Extension Development Host

4. Make changes - Save files and watch mode rebuilds automatically

5. Reload - Press Cmd+R (or Ctrl+R) in the Extension Development Host to see changes

Building for Distribution

# Package the extension
npm run package

# Or manually with version control
vsce package --allow-missing-repository

The .vsix file will be created in the root directory and automatically copied to:

• builds/ folder (for version control)
• ~/Desktop/ (for easy installation)

Project Structure

csv-viewer-extension/
├── src/
│   ├── extension.ts          # Main extension code
│   └── webview/
│       ├── CsvTable.svelte   # Svelte table component
│       └── main.ts           # Webview entry point
├── builds/                    # Packaged .vsix files
├── out/                       # Compiled output
├── esbuild.js                # Build configuration
├── package.json              # Extension manifest
├── tsconfig.json             # TypeScript config
└── sample.csv                # Example CSV file

How It Works

1. Custom Editor API - Registers as a custom editor for .csv files
2. Webview - Displays CSV data in a VS Code webview panel
3. CSV Parser - Handles quoted fields, escaped quotes, and embedded commas
4. Svelte - Reactive UI framework for smooth interactions
5. esbuild - Fast bundling for both extension and webview code

Configuration

The extension uses default priority for CSV files, making it the default viewer. You can still:

• Open in text editor: Right-click CSV file → "Open With..." → "Text Editor"
• Change default: Right-click CSV file → "Open With..." → "Configure Default Editor"

Keyboard Shortcuts

While viewing a CSV file:

• Cmd+R / Ctrl+R - Reload the extension (when in development mode)
• Use the toggle button to switch views (no keyboard shortcut yet)

Troubleshooting

CSV file opens in text editor instead

• Right-click the file → "Open With..." → "CSV Viewer"
• Or set CSV Viewer as default editor for CSV files

Changes not reflecting

• Make sure watch mode is running: npm run watch
• Press Cmd+R in the Extension Development Host window
• Check the build output for errors

Extension not loading

• Check VS Code version (must be 1.80+)
• Reinstall the extension
• Check the Output panel (View → Output → CSV Viewer)

Roadmap

Potential future features:

• Search/filter functionality
• Column sorting
• Column resizing
• Export to different formats
• CSV editing capabilities
• Large file performance optimization
• Keyboard shortcuts for toggle
• Customizable delimiter detection

Technical Details

• Built with: TypeScript, Svelte, esbuild
• VS Code API: Custom Editor API, Webview API
• Bundle size: ~9KB
• Performance: Handles files with thousands of rows efficiently

Contributing

Feel free to submit issues, fork the repository, and create pull requests for any improvements.

License

ISC

Made with Svelte and VS Code Extension API