![]() ![]() Then we have the TreeView itself, where ancillary extension functionality lives. ![]() This is the bar with all the primary activation elements for extensions. On the left we have the TreeView container. UX is always tricky, but the established language of extension design in VS Code means that if you place something logically, the end user will likely find it as they get to lean on the pre-existing design language. This rigidity is one of the best things about it, as extensions function in predictable and reliable ways. From these restrictions, it quickly became clear the sort of functionality the extension could provide, and the first thing I needed to tackle was how we would display the core of SwaggerHub: Organizations, APIs, and Domains. Thanks to our public API, a lot of the boundaries to functionality are known and I can only build what’s available in the API. So when the opportunity came along, I grabbed it with both hands and got to work. Most of us have little passion projects or improvements we want to make to SwaggerHub, but rarely get the time. It's rare enough that we have down periods in SwaggerHub – there are always new features to build – but one sprint we were given time to work on personal projects for a few days, a sort of mini-hackathon. We already have a public API for anyone with a SwaggerHub account, so why not bring it onboard and into the IDE? At the time, the VS Code API seemed a bit much to get my head around for the sake of a hackathon (as it turned out later, I was right), so the idea didn’t come to light during that event. So, while brainstorming ideas for one of our yearly hackathons, I thought why not combine the two and write an extension for VS Code that would fully integrate with SwaggerHub. ![]() It didn’t take long before I abandoned this tack altogether and stuck to leaving SwaggerHub open on one screen, VS Code in another.ĭespite this being functional, I always thought there could be a better way. If I don’t want to lose context, I must download the YAML, open it in the editor and quickly find myself out of sync with any changes my fellow devs had made. But that’s always been a tedious affair in the past. You see, being a front-end developer on SwaggerHub who consumes SwaggerHub APIs, my natural inclination is to read, use, and work with those APIs in VS Code. That’s all preamble to the core conceit of this blog: VS Code and SwaggerHub. If I’m unsure about something, I can poke around at the open source innards and see what’s making things tick. It’s fast, it’s neat, and as a JavaScript developer, it’s also very handy that it’s written in JavaScript. Now as a front-end developer, my IDE of choice is Visual Studio Code. They’re everywhere! We use them ourselves to write the application that documents the very APIs we’re using! I’m a front-end developer for SwaggerHub, and this means my exposure to APIs comes primarily as a consumer – I help sculpt the result of our APIs by being a first-party user. If there is a better format, the json file can be adjusted anytime.One of the best things about working with SwaggerHub is the exposure to APIs. Here is a copy of the json file I'm looking at. The desired result, missing icon and menu: NewDarkIcon = path.join(_filename, '.', '.', 'resources', 'dark', 'dna.svg') NewLightIcon = path.join(_filename, '.', '.', 'resources', 'light', 'dna.svg') This.tooltip = `Agent Details:\n - Datacenter: demo\n - OS: Linux \n - Version: 20.22.04.00\n - Status: Available` I've tried to modify the constructor()Ĭhildren = undefined ? : For each type I'd like to have a custom icon and nu similar to what I found here dynamic context menu. I have only three types of objects: Server, Host and Group. ![]() I'd like to build a TreeView based on a JSON file / REST Call and have an icon for each type of my objects. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |