Announcing Depot

Depot, the structured data editor for VS Code, is available now!

October 11, 2020 Games Tools

depot_screenshot

The work I outlined in the previous posts about building a game data editor inside of VS Code has culminated to an actual release! And it’s got a name:

depot_mark

Install Depot Now

Depot is a structured data editor for Visual Studio Code that leverages Code’s Custom Editor API to allow you to edit JSON data like a spreadsheet. Data you would normally store in raw JSON or XML can instead be stored, edited, and managed, all through a single Depot file.

Features

Edit data normally stored as raw JSON in a spreadsheet style interface
A Depot file contains its data model, making the file itself portable to any other program
Because the file uses JSON with newlines, you can easily track changes to data values or the model itself through source control

Quickstart

Install Depot as an extension in VS Code.
Once installed, use the “Create a new Depot file” command to create a new Depot file in your workspace.
Click on the file, create a new sheet, and start working!

You can also manually create a Depot file by creating a file with this as its contents and giving it a .dpo extension:

{
    sheets:[]
}

Note that once Depot is installed, the extension will try to open any file with .dpo through the Depot editor. If you want to manually create a Depot file, I suggest creating the file as a .txt file, adding the above contents, then changing the file’s extension to .dpo.

Custom File Extensions

You can also use a custom file extension for Depot by editing your settings.json file and adding the following line:

"workbench.editorAssociations": [
    {
        "viewType": "depot.data",
        "filenamePattern": "*.foo"
    },
    {
        "viewType": "depot.data",
        "filenamePattern": "*.bar"
    }
]

In the above example, clicking on a file with .foo or .bar would also open that file for editing in Depot.

Under the hood

A Depot file (.dpo) is just JSON, but unlike normal JSON it’s organized through Sheets, Lines, and Columns.

Sheets

At the highest level, a Depot file consists of some number of sheets. These sheets are invididual collections of structured data, with the added benefit that they can also reference each other.

Lines

A given sheet also has some number of lines. You can think of a sheet’s lines as entries in the database defined by the sheet. Lines have data based on what columns are in the sheet it is a part of.

Columns

Columns define the fields of a sheet that a line can have data for. Columns can be specific primitive types (string, bool, int, etc.), but can also be other special types unique to Depot:

Column Type	Icon	Description	Storage Type	Default Value
ID	None	The ID of a column. These are ideally unique, and Depot will warn you if you duplicate the value.	String value	index in sheet as string
GUID	None	A generated GUID for the given line. These cannot be edited.	String value	guid as string
Text		A standard line of text.	String value	`""`
Long Text		Longer line of text. These fields can be resized in the editor.	String Value	`""`
Float		Any number	Number value	`0`
Int		Integer number	Number value	`0`
Bool		True / False boolean value.	`true` or `false`	`true`
Image		Path to an image relative to the location of the Depot file (displayed in the sheet)	String relative path to the image	`""`
Single Select		Exclusive choice between a set number of choices	String value	`""`
Multi Select		Several choices between a set number of choices	Array of selected values as string	`""`
Line Reference		A reference to a line in a sheet in the current Depot file	String GUID of selected line	`""`
Sheet Reference		A reference to a sheet in the current Depot file	String GUID of selected sheet	`""`
List		An array of structured data	Array of structured values	`[]`

Acknowledgements

Like I said at the start of the game data editor post, Depot would be nowhere without the work Nicholas Canasse did on CastleDB. The whole idea for an editor like this came from him, and I view the work on Depot as a continutation of that mission.

Moving Forward

Depot is also open source. If you’re interested in contributing, you could see some issues and enhancements I’ve already outlined in the github repo here:

https://github.com/kkukshtel/Depot/issues

I’m also planning on filling out the wiki on Github with more specific detail about each of Depot’s parts, and will also make a video soon outlining its features.

Lastly, thanks to everyone who read the series of posts on building the editor! Happy to bring everyone along for this ride and be able to actually release something at the end of it! You can view the previous posts in the series here:

Part 1: Why?
Part 2: Custom Editors, Webviews, and Svelte
Part 3: Getting Data into Svelte
Part 4: Editing Data in Svelte

Download Depot here:

https://marketplace.visualstudio.com/items?itemName=afterschool.depot