CSV

Experience a whole new way to work with CSV files right inside VS Code. CSV transforms your CSV files into an interactive, spreadsheet-like experience—making it effortless to view, edit, and navigate your data with precision and speed.

Screenshots

Why CSV?

Working with CSV files shouldn’t be a chore. With CSV, you get:

• Direct In-Place Editing: Click on any cell to edit its content seamlessly. Your changes can be saved immediately to the CSV file, ensuring data integrity without extra steps.
• Smart Column Sizing & Dynamic Color Coding: Columns automatically adjust to fit content while being visually distinguished by data type. Whether it’s boolean, date, integer, float, or text, each column gets its own adaptive color that adjusts for light and dark themes.
• Sticky Headers & Fluid Navigation: Keep your header row always visible as you scroll. Effortlessly move through cells using intuitive keyboard shortcuts like Tab, Shift + Tab, and arrow keys—just like a full-featured spreadsheet.
• Efficient Multi-Cell Selection & Clipboard Integration: Select a range of cells with click-and-drag and copy them as well-formatted CSV data using Ctrl/Cmd + C.
• Robust Data Handling: Leveraging the power of Papa Parse, the extension handles complex CSV structures, special characters, and various data types gracefully.
• Theme-Optimized Interface: Whether you prefer light or dark mode, CSV automatically adapts its styles for an optimal viewing experience.

Features

• Interactive Editing: Two modes — type to start a quick edit, or press Enter/double‑click for detail edit. Saves on blur.
• Smart Resizing: Automatic calculation of column widths for improved readability.
• Dynamic Color Coding: Visual cues based on data type help you quickly identify numbers, dates, booleans, and more.
• Sticky Headers: Keep column titles in view as you scroll through large datasets.
• Enhanced Keyboard Navigation: Navigate cells with arrows and Tab/Shift+Tab; quick edits can commit with arrow keys; Ctrl/Cmd + A selects all; Ctrl/Cmd + C copies selection.
• Advanced Multi-Cell Selection: Easily select and copy blocks of data, then paste them elsewhere as properly formatted CSV.
• Add/Delete Columns: Right-click any cell to add a column left or right, or remove the selected column.
• Add/Delete Rows: Insert above/below or remove the selected row via context menu.
• Edit Empty CSVs: Create or open an empty CSV file and start typing immediately.
• Column Sorting: Right-click a header and choose A–Z or Z–A.
• Custom Font Selection: Choose a font from a dropdown or inherit VS Code's default.
• Find & Highlight: Built-in find widget helps you search for text within your CSV with real-time highlighting and navigation through matches.
• Preserved CSV Integrity: All modifications respect CSV formatting—no unwanted extra characters or formatting issues.
• Optimized for Performance: Designed for medium-sized datasets, ensuring a smooth editing experience without compromising on functionality.
• Large File Support: Loads big CSVs in chunks so even large datasets open quickly.
• TSV Support: .tsv files are recognized automatically and use tabs as the default separator.

Compatibility

This extension is built for VS Code 1.70.0 and later. It has been tested with Cursor (built on VS Code 1.99) and the latest VS Code releases (1.102).

Getting Started

1. Install the Extension

• Open Visual Studio Code.
• Go to the Extensions view (Ctrl+Shift+X or Cmd+Shift+X on macOS).
• Search for CSV and click Install.

2. Open a CSV or TSV File

• Open any .csv or .tsv file in VS Code.
• The file will automatically load, presenting your data in an interactive grid view.

3. Edit and Navigate

• Edit Modes:
  • Quick edit: start typing any character to edit the selected cell immediately. Press any Arrow key to save and move the selection to the next cell in that direction.
  • Detail edit: press Enter on a selected cell or double‑click to enter a focused edit. Arrow Left/Right move the text caret; Arrow Up goes to start; Arrow Down goes to end. Click outside the cell (or blur) to save.
• Keyboard Navigation: Use Arrow keys to move between cells when not editing. Use Tab/Shift+Tab to move horizontally (wrapping across rows as needed).
• Multi-Cell Selection: Click and drag or use Shift + Click to select multiple cells, then copy them as CSV using Ctrl/Cmd + C.
• Find & Highlight: Press Ctrl/Cmd + F to activate the find widget and quickly locate data within your CSV.

Commands

Open the Command Palette and search for:

• CSV: Toggle Extension On/Off (csv.toggleExtension)
• CSV: Toggle First Row as Header (csv.toggleHeader)
• CSV: Toggle Serial Index Column (csv.toggleSerialIndex)
• CSV: Change CSV Separator (csv.changeSeparator)
• CSV: Change Font Family (csv.changeFontFamily)
• CSV: Hide First N Rows (csv.changeIgnoreRows)
• CSV: Change File Encoding (csv.changeEncoding)

Settings

Global (Settings UI or settings.json):

• csv.enabled (boolean, default true): Enable/disable the custom editor.
• csv.fontFamily (string, default empty): Override font family; falls back to editor.fontFamily.
• csv.cellPadding (number, default 4): Vertical cell padding in pixels.
• Per-file encoding: use CSV: Change File Encoding to set a file’s encoding (e.g., utf8, utf16le, windows1250, gbk). The extension will reopen the file using the chosen encoding.

Per-file (stored by the extension; set via commands):

• First row as header (default true) — CSV: Toggle First Row as Header
• Serial index column (default true) — CSV: Toggle Serial Index Column
• CSV separator (default inherit: .tsv → tab, otherwise comma) — CSV: Change CSV Separator
• Hide first N rows (default 0) — CSV: Hide First N Rows

Editing Modes and Shortcuts

• Quick edit:
  • Start: type any character (not Enter) on a selected cell.
  • Save and move: press Arrow Up/Down/Left/Right to save and select the adjacent cell; does not re-enter edit.
• Detail edit:
  • Start: press Enter on a selected cell or double‑click a cell.
  • Caret navigation: Arrow Left/Right move one character; Arrow Up moves caret to start; Arrow Down moves caret to end.
  • Exit/save: click outside the cell or move focus to commit changes.
• Global:
  • Copy selection: Ctrl/Cmd + C
  • Find: Ctrl/Cmd + F
  • Select all: Ctrl/Cmd + A

Release Notes

v1.2.0

• Edit modes: Quick edit (type to start; arrows save and move) and Detail edit (Enter/double‑click; arrows move caret, Up/Down jump to start/end).
• Virtual rows and cells: Always shows one extra empty row at the bottom; short rows display empty editable cells up to the widest column. Empty edits do not create real rows/columns.
• State persistence: Keeps scroll position and selection across tab switches and configuration refreshes, including large files with chunked rendering.
• Selection improvements: Shift+Click on headers selects column ranges; Shift+Click on the serial index selects row ranges; right‑click preserves current selection.
• Batch actions: Context menu adapts to multi‑selection (Add/Delete X Rows/Columns) and performs exact counts in a single operation.
• Delete to clear: Press Delete/Backspace to clear contents of selected cells (skips serial index column).
• Copy fidelity: Copies with the active delimiter and skips the serial index column for full‑row copies.
• Encoding: New command “CSV: Change File Encoding” integrates VS Code’s encoding picker and returns to the CSV view.
• Enable/disable UX: Toggling the extension on instantly upgrades open CSV/TSV tabs to this view; toggling off reverts immediately to the default view.

See full history in CHANGELOG.md.

Development

Clone the repository and run the following commands:

npm install
npm run lint
npm test

To create a VS Code extension package, run:

npm run package

To compile without running tests:

npm run compile

Support

Have questions, suggestions, or encountered an issue?

• Open an issue on GitHub and let us know how we can help!

License

This extension is licensed under the MIT License.