This extensions allows you to edit csv files with an excel like table ui
Execute the command
edit as csv to open an editor for the current file.
Execute the command again to switch back to the source file or to switch back to the editor
Note that the data flow is one way (editor to source file). If you make changes to the source file (.csv) while the editor is open, the editor will not be updated!
On initial load all rows are expanded so that all rows have equal length (number of cells)
Comment row (rows starting with a comment) will only export the first cell
- if you accidentally added comment text to a cell other than the first cell you will notice it (color)
Adding new lines to comments rows (via alt + enter) will have no effect when exporting (new lines are removed in comments)
- leading spaces will be removed in comment rows!
Starting with Version 0.1.0 the table has a context menu (right-click the table)
- (just mentioning it because it is not obvious via the ui)
Plugin Version 0.0.11 had an issue with loading and saving files with more than ~1 MB
- saved files were corrupted (content of the first ~1MB was repeated after the first ~1MB until the file size was reached)
How this extension works
When you click on
edit csv file
the file content is cut into pieced and transferred via
the current config is stringified and injected into the editor (webview) html
a manager stores a reference to the webview, source file uri, editor uri
in the webview the pieces are put together and the text is parsed as csv and displayed in the (handson) table element
When you click on
the current table is transformed into csv, transferred via
vscode.postMessage to the extension and written to the source file
- if you clicked on
apply by accident, you can undo the changes in the table element (with the usual shortcuts) and apply again or open the source file and just do an undo (with the usual shortcuts)
When you click on
apply and save
- the first step is equal to
- then the source file is saved
When you click in
- the injected content is used (when the editor was opened), this does not read the source file again
As you can see this does not scale very well with large csv files (needs to be stringified and stored the whole time)
There are some settings for this plugin. Open the VS Code Settings and search for
if the source file content changes while the editor is open, the editor will not be updated (e.g. take new content)
- if you then apply the editor the source file content/changes are overwritten!
apply and save an unnamed file will close the editor
- this is because the new uri for the new file is not known and for some reason if an extension saves an unnamed file the new file is not displayed automatically
renaming a file while an editor is open for that file will break the reference the the source file
there are probably some issues which enabling/disabling
hasHeader and undoing/redoing that
- there are some issues when switching
hasHeader option in combination with hiding comment rows and and undo/redo
If you want to preview csv files you can go for the extension Excel Viewer. It has some more advanced sorting and filtering features.
How long will it stay in preview?
There are two things missing...
- a pretty icon ;)
- especially for interaction between vs code and the webview
- I added some listeners to handsontable hooks which manipulate rendering, selection...
- use merged cells for comments (rows)
- there are some problems with adding/removing rows in connection with undo & redo, sorting...
- update handsontable to 7.x.x
- with version 7 handsontable is only free for non-commercial use
How to build locally
To compile (and watch) the files in
tsc -w#or just tsc to transpile only once
# new terminal
tsc -w #or just tsc to transpile only once
F5 to run the extension
When you edit
csvEditorHtml/index.html you need to manually copy the changes (everything in the body but without the scripts) into
src/getHtml.ts (past into body)
You can also open
csvEditorHtml/index.html in your favorite browser and play around (the vs code settings are not applied in the browser)