Writing Visual Studio Extensions with Mads - Creating a tool window extension

[Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] hello everybody and welcome to this week's episode of writing visual studio extensions with mats that's me welcome and uh i was about to say as usual i'm joined with uh james the producer but not today today we have a star you got you got the backup today james is out and and i was really happy to to join so this is this is really fun i'm very excited john so uh welcome um who knows maybe uh maybe this is not gonna be your last time producing all right so so you're starting a new thing today right you're doing a yeah that's right john was asking me is this uh do you have any links to share for the stuff you're going to show today and i said no john no i don't because today we're going to write a new extension i think it was jonas that suggested this extension and jan also had some input to what this should cover and so today we are writing a new brand new extension where we're going to do a tool window and why is the tool window interesting you say well because it touches on a couple of very interesting things when it comes to visual studio extensions one of them being um theming so how do you do custom ui in visual studio and theme it such that when you go between light theme and blue theme and dark theme and all that stuff that it looks all right in either theme and of course that's important uh i'm looking down here a couple of times just to make sure that you know i catch all the comments so um that's why i look down here i have a little ipad here and so um feel free to comment uh as much as you want i'll read them all and the ones i don't catch john will right john all right that's right that's right okay yeah so so i guess do i uh do i disappear and you start writing some code yeah sure sure i i don't know am i jumping into it too fast [Laughter] yeah let's do a let's do a uh me little picture or us a little picture and and my screen larger picture and then when i go into the code we just go my screen uh full full screen on my screen okay um okay so let's talk about tool windows we're going to create one so a tool window is basically anything that flows here's one i use this all the time tool window is this so it's a piece of ui that you can dock anywhere you can dock it in up here if you wanted to for some reason or right here that's a great spot for it so anyway this is a tool window so even a document is actually a type of a tool window right because it's doggable and all this stuff can i ask one question while you're showing this because it's cool to be able to move them around but occasionally they get all mixed up right like i'll accidentally drop something in the wrong place and then i'm like oh no everything's ruined i need to reformat my computer but there's probably a better way to do that i don't think i fully understand your statement you're saying that you get you're confused about tool windows if i if i dock my tool windows somewhere that i didn't want them and and i like sometimes i can like get them all mixed up is there a good smart way to like reset them uh yes there is i actually have a video on that on the visual studio tips and tricks uh but you can save your window layout so once you have a right one you can save your window layout and that means you can now go back and forth between them so i have one called default ctrl alt one that puts me in my perfect state of like uh sort of minimalist statement i have control two that puts me in extensibility window layout and three puts me in web development layout and four was something i used for a demo video at some point so that doesn't count i've actually never done that before so i'm glad i asked oh you could put that pro tip on there john oh yeah that's right oop i'm looking for it and there should be music that plays when a pro tip is like a little chime yeah cool all right so first things first let's go full screen here and let's take a look we're going to create a new v6 project and um we're going to use the one called just music project nc sharp of course and we're going to call this we're going to do something um we're going to do an actual real world kind of useful maybe potentially thing we're going to create a pomodoro timer i can't build pomodoro is it like this pomodoro that looks right to me okay so let's call it that it means tomato right in what language in italian i believe right nice yeah okay so now we have our uh now we have an extension john did you know that it's this easy to create an extension i didn't know it was quite that oh i do know there's goods involved okay so i'm just gonna just sort of touch this stuff up i'm gonna say what is this gonna do this is gonna oh what is it a pomodoro timer does it um uh this extension uh keeps track of your time using the pomodoro method the should we say famous right that seems sacred right so now we're here let's do a resource now let's not do that right now um okay so far so good now we're gonna add something so i'm gonna say i'm just gonna do it manually here right click add new item and we're gonna go to extensibility and look at this async tool window boom it's right there so and that's everything you want everything to be async whenever you're given a choice right yeah well we we yes so the tool window is the old tool window is here because if you are gonna write an extension that needs to work with with versions of visual studio lower than 2017 update 6 or 7 then you you know that was when async tool window was invented so you need a way to be able to create a synchronous tool window if you if you can't if you need to support all the versions obvious but we don't have to do that so we're going to do that and we're going to call this we're going to call this uh timer timer window i think it's the primer tool window even just because you only live once right but this is magic now check out what's happening this is like doing a lot of stuff now boom this is almost like it's a project template right it's that much stuff happened here we got a new folder with a png inside of it uh we got uh a vsct file we got the tool window right here and then we got one more a command and then the saml custom saml so what's the command for well that's because we want to have a button that opens our tool window right so let's just start with that um let's see here we define the button right here in the vst file i'll just strip all the comments away and we bring in the png here with all those different little icons and that those images are used up here in the button and so let's just take a look at what happened and while that compiles and runs i'm going to open the package class here and strip all the comments away and we now have a provide tool window uh attribute here that was added by this item template jonas was that your timer suggestion i think so right the pomodoro thing it's the pump for for people that don't know i don't know if you've talked about this before but i really like this it's a technique where you set a a timer and it came from the old there were tomato timers you would sit on your like for cooking but you set a timer for 20 or 25 minutes and you just focus you don't check your email you don't look on your phone you don't you know you do whatever you can to just do one thing and then if an interruption comes in you just write it down on a piece of paper or whatever you you but you set it aside and you focus on that one thing and then when the timer goes off your reward is you get five minutes to do whatever go get some coffee or you know practice some yoga or whatever you want to do and then you do it again and and you try and do as many of those as you can in a streak so i i've been using that lately it's it's pretty helpful all right so if if we do this right john maybe you're going to be a user of this yeah yeah i'm a fan nice all right so we have visual studio startup and let's just see here what we did we have a button right so we need to find our button and it's a little cryptic it's the button is parented under the main menu under something called vs window other windows i maybe you couldn't guess that but i that's i know that so it's over here other windows and we now have a timer tool window let's click it boom whoa should we click me sure oh my god okay that's actually impressive because before you're like we just created an extension i'm like yeah but it's just a bunch of generated code but this is actually like yeah that's pretty cool so um let's uh just do dark theme okay so the background change that's nice but the button here did not right so that's not so good so theming is not for free we don't it just doesn't just work sort of out of the box and um so let's let's uh that is now what we get okay so when you add a new tool window this is what you've got so now we're going to take a look at some tips and tricks if you will so let's close this down so we're going to start with the command the button that i clicked to open the tool window so if you look at our package class now package packages is kind of our starting point this is where uh our extension where we register things from our extension um and one of them being timer tool window dot initialize async so this here line was added by that item template for async tool window and it's just a command like other commands that means that it is full of all sorts of stuff that we don't need it's overly complex and we could clean it up maybe i'll we'll have time for that but basically what it does is that it creates it re it gets the command service and then it news up a new up my tool window command here and passes in my command service right here and right here it registers the command and when you click it it executes the execute or invokes the execute method which is right here and what does it do it basically asynchronously runs the show tool window async method that is hanging off of the package class base class okay and it does that in an async way so what's really important about tool windows is that um you have to um the reason they have to be async is that if they're not then when visual studio starts up they're gonna consume resources and start loading if they're visible and you want to make sure that that doesn't happen until visual studio is fully loaded or your solution is loaded so it doesn't take any you can't use your tool window anyway right when it's loading a solution or something like that so it frees up a lot of the ui threat and stuff like that so async tool windows are super duper important so if you have the choice to use async tool window always do async tool window okay so let's start by cleaning this up a bit so let's do a new icon so right now we have this icon here notice how it was um this is actually an icon that has multiple in it let's see here if i hover see it has like five icons and we had icon number one so the first one in the list we don't really need all of those um but you know so let's do something else let's just completely uh should i show yeah let me just show one thing we can do i'm just gonna add a this is a tomato icon and i want to make sure that i do the same thing here so it needs to be content and content okay so what i can do is i can go into my vsct file i can go down here and say you know give me the logo.16.16. now it has to be 16.16 to do this and my list here i only have one there's only one image in this image strip if you will or bitmap strip um so there's just one that means i only want to register one so down here the gluetts for this image and again i want to delete the stuff i don't need so what this is doing is basically saying that we're now going to change the icon to this one that we've got and it's 16 by 16. now john you probably run a an extreme monitor with like a super duper graphics card and you run in like your dpi is at least 200 percent is that right 200 probably even more and so 16 by 16 becomes blurry uh yeah let me check actually i am not i am a i'm actually running at 100 so i'm on two uh 1080 or i'm on three 1080p monitors um but i do know like on my laptop i'm also running lower dpi because i'm uh doing 1080p for this video but um as soon as it's over i i bump it up to the maximum and then i run at 200. that's not true i run 135 on this laptop yeah on the surface studio a certain no it's not service studio surface book i ran 200 but i have a smaller screen here okay so now we got this image up here right so that's pretty cool except as i said it's 16 by 16 so it will be blurry when you have high dpi monitors that sucks so instead what we want to do is that we want to create a new folder called icons oops like that and i'm gonna rub in some icons like that so notice this these are all the but same different sizes so if you're running 100 dpi 16 by 16 is what you're gonna see if you run 150 it will be 24 by 24. 200 will be 32 and if it's higher you're gonna do 48 okay so this is this is the right probably the right um if you want to do four different ones um if i should choose just one i might do 30 i would probably do 32. a quick question on this one is i know that i'm gonna not hear the answer i want but i have to ask it anyhow is there ever gonna be a way to do this using vector graphics because i'd love to just use like one svg file yes that'll ever happen no it is already it's possible you can do use this you can use saml oh okay so all the icons in visual studio all almost 4 000 of them these are actually in their saml interesting okay you can take your vector graphics and you can convert your svgs to saml okay similar right yeah and um and then do that instead and then it will work what i do now will still work if you have xaml i'm gonna right click the folder and we did this last time i'm gonna click generate image manifest hey john can you run that banner that asks defer the top one that asks people to install the extensibility center uh yeah good okay so so the thing you're doing there that's part of that this extension the extensibility essentials that's right all right so uh we got a question here so with svg it works too no it doesn't work with svg you have to convert it to saml i think there's an online converter tool out there cool okay i'm gonna click generate image manifest and it did that right here for me so now i have this xml file i have a good and i have an id of zero and they all point and this image here has a bunch of sources this is like if you know html5 right this is like the uh picture element yeah so you have these different sources underneath and then different sizes okay so now i just need to use this from inside my uh vsct file right here and you know there is a way that there is a tool a command line tool i can use that will take my image manifest and generate a vsct file that is the same type of file i have here and if that was the case i could just include that here by doing you know whatever whatever the name was vsct that would be how i would do that but since i only have one or i only have a few images i'm actually going to just delete these just let's get rid of the old way of doing it completely get rid of this i'm going to get rid of the bitmaps here okay so what i'm going to do now is i'm going to do a good symbol and i'll give it a name we're going to call it [Music] my images huh nice right and uh and we got our uh do it right there oh i need to put it in these things and then yeah so this one is called uh tomato or logo rather right that's the name of file name here so let's just do logo maybe i can spell it and the value was zero because here zero okay ah okay if i had if i had multiple images like they had different file conventions like i would have a yeah whatever.png then i would have uh two ids in my image manifest okay so it's smart it knows that that the naming convention with the 16.16 or whatever we're all talking about the same image but in different sizes so now i need to come up here to my image and we're now going to use my images and we are going to get logo and then i need to tell my command here to use monikers image monitors so icon is moniker so john you were asking about how to use this in vsct files so literally i had to google it because i have i've never done it but if you go to the image catalog if you search for visual studio image catalog you're going to end up here that's the first result you're going to see it's basically how to use the image service and catalog in visual studio and it describes all these things and that's kind of what i'm doing but i've actually not tried it so this will be the very first time we're going to see if it works so far it doesn't bitmap slot it's one based wow no no no no i just need to see where the problem is really you're right okay well that's kind of weird oh you know what my experimental instance is running so we're just going to do a clean and a shift f5 we don't need to debug this [Music] and that's all wired up just by creating an extension it automatically does the stuff to launch the experimental instance and all that stuff that's part of the the project template uh yeah so i didn't do anything special there was no extensions that is required for what i did with creating the extension from the project template and then adding the async tool window that's all built in you get all this sort of stuff and you can see our new dynamic higher image quality uh method here now works right so that was that was lucky that since i've never tried it before good job whoever wrote the docs they're understandable shift f5 jonas means start without debugging so i'm not attaching that means it's much faster i don't have to attach a debugger to the process all that stuff okay so off to a good start off to a good start now let's take a look at the saml and i got a trigger up my sleeve here that's going to blow you away so i am gonna drop in a file called vs theme just drop that right here let's just fix up the see i've used it before in a different so let's just put this in the pomodoro namespace now what does this via steam file do well you basically import it into your saml and it goes through and finds dependency objects to theme according to various different um to the theme that's in visual studio it's not because it's all that long but it basically goes through the resources that are there and apply that and in some cases we'd have to like uh go in and like do custom stuff for a few of these properties uh and if you want to see how that works you can find it i use it in several different extensions one of them is add any file so on github dot com slash match christensen slash add any file you can see it uh it's under helpers and via theme okay so this is the exact same file for namespace uh and the way we use it after we now have no that was right after we now have it in our in our namespace is that we do we add local like this i'm just going to strip some of this stuff out here these here see these background and foreground uh they're now set to vs bruh from the vs shell that was why when we changed the theme to the dark theme we saw the background color changed to dark and the text color changed to white that's because of these two things but it only applies it was only applied to the background and the foreground color so instead what we want to do is that we want to do this i'm going to copy in these two things okay i might have to compile for this to show up here oh and also omodoro there it is so now we got that going then we got a stack panel we got a button we got a text block so text blocks are fine i feel like labels are the better way to go and why is that you might ask well i feel like they work better with theming so um is that entirely true maybe i'm not sure uh and so this one actually we're gonna not oh we can give it a label so i'm just gonna hard code time let's say 20 minutes okay all right all right and then let's see here we're gonna make it a font sized it's gonna make it huge like a 40. okay and then the button that's underneath we can call that start and yeah that's that's fine okay so in this class let's just nuke all the comments i do that a lot john did you know that i had to write an extension i did a new comment because uh because all the templates for extensions are full of comments that i kind of are using are some of those like to generate documentation like the triple slash comments or are they just verbs you can choose so if you go to headed comments you can see here here's the example ah i just choose remove all but you can say okay oh remove all except xml docs or i saw on a previous um i was on a previous show you you talked about that that's really cool yeah oh okay so here it is this is the basic um uh basically what we're gonna do here so okay we're gonna do a time timer right so we're gonna do a private time span i don't need the system namespace time and then we need a i'm gonna just do dispatcher timer did i no i didn't fill that right try this and call that timer so because we need to count down right okay so when the window starts we're gonna do anything no let's just we do it here so well i guess we can we can say time equals time span from minutes 20. yeah i could have initialized it up there why didn't i do that i don't know and then what we're going to do is that we're going to say we're going to create a so this timer we're saying nope i did it right i did it right here we're going to say timer dot equals new dispatcher timer is that right and it takes time span nope it should be one second so that could be time span from we want to count down from you know every second we count down and we give it a dispatcher priority dispatcher where is that now is it there are some different timer classes and honestly i lose track of them is there a reason for picking the dispatcher timer um you know i to be fair i i googled how to do a time down time timer and this was it that's cool yeah i just wondered because i know there's also like there's a stopwatch class but that's more for timing that's you don't get a call back on that that's more for for timing things and then there's some timers that i've used in the past that had too fine of granularity and it like too high on cpu use so right but where and now of course i can't remember i found it on staggered flow so oh then it's good wpf here's what i did count down all right uh here it is nice tell me there you go you know i i remember too there's some stuff especially now that you mentioned of course with the wpf thing that the timer and the threading like being able the dispatcher timer is able to like not screw things up with the ui thread um i remember something about like it interacts well with with wpf so that makes sense cool no i don't so actually that's a good point because usually the dispatcher is frowned upon we don't use the wpf dispatcher when you're writing visual studio extensions because that might interfere with the visual studio's own dispatcher from the um joinable task factory and all that sort of stuff within visual studio so generally never use the dispatcher always use the joinable task factory but in this case since i don't think we're i think this is okay cool like you said it was on stack overflow yeah right so okay so he starts a timer but i think what we should do is so i'm actually looking i found i found a link for this um and it's it's talking about guidance and it says if it's used in wpf it's worth noting system timers timer runs in a different thread than the user interface thread and it talks about reasons for using dispatcher timer as opposed to system timers timers dispatcher timer runs on same thread and dispatcher priority can be set on dispatcher timer okay cool okay so now we do if it's enabled is that what it means when you say start and stop yes is enabled yeah we're just going to start without the timer oh we should have a reset but let's just wait for that so this time i'm actually going to do an f5 we're going to attach the debugger yeah the dispatcher is on the ui exactly someone said in the comments pedros i think there's a dispatcher timer start method i didn't see if you called that no that's i call that here boom okay ah right right okay did i click start or did it was it started already what now it stops something weird is happening start and it keeps going down yeah stop nice so that seems to work we forgot to test one thing and that was the um uh theme but we want to make sure that when we stop the time should we reset it too no i don't think so because i think sometimes if you like let's say the phone rings i want to just stop it and then res i don't i think you'd actually want two buttons a star a start stop and a reset uh-huh yeah i think so too so let's do button one text content it always messes me up i don't know which things have have yeah stopwatch was uh with one we could use that too there's a lot of like ways to do to skin this cat i think though with the stopwatch you you control the stopwatch you say start timing and stop timing and it's good for diagnostics but you don't get a call back from the stopwatch i don't think right so i think stopwatch is more for like i want to know how long a method takes to execute or something like that but you don't get an event so i think yeah so let me show you this so if you don't know you can duplicate a line ctrl d duplicates a line like that nice yeah that's kind of nice and i have an extension that when i move a line up and down by hitting alt and then the arrow keys to move a line it also fixes the indentation as i go check this out huh that is cool how do is that something that like rosalind provides you or do you have to i did that it's uh it's in the tweaks extension okay uh we can do so i think first of all that this height and width is like extreme let's do let's do something else let's reset and we're gonna create a new event handler let's do f7 and here we're going to do timer time equals oh this needs refactoring obviously now we have two sources of truth like that we're gonna set lbl can i call lbl no lbl wait is it supposed to be 20 seconds or 20 minutes oh john thank you perfect that's if you have a really short attention span 20 seconds to get it done yeah oh no i need don't need to do any of this i need to basically what i just need to this just needs to take one more ah yeah this needs refinement let's just let's just call it this and then we do timer stop yep okay so this is obviously extremely cool i think we can all agree but we still forgot to test the theming and let's go ahead and do that view wow nice it's backwards right it's backwards no it's just yeah it starts ah we didn't test the theme no this is like too bad but did you see that it was problematic here so this is promo doro omotoro primer if we go to our tool window uh see what we should give it the same promo door timer there we go and then and oh there is a way we can give our tool window the same icon uh i i actually rarely do that but you can like for completeness we probably should do that um so timer equals new dispatcher so so this one just kicks off immediately when i do it this way that's kind of weird so i could just move it to i can just say enable false yeah that is that what you're saying john um okay because then it starts it doesn't start and then we click start if timer then click start yeah then it should work so let's see here we gotta remember to check the theme [Music] check the theme check the theme so this vs theme thing that i did it doesn't just work on tool windows it works on any wpf that you've got wow yeah hosting a visual studio so that's kind of cool oh wow whoa omg start yeah uh formatting changes but whatever well right so before like what test hitting reset real quick oh yeah no it wasn't that it was because that i have i manually originally you put in 20. but i think you want to format it do you want to write ours no i guess not for this heart um yeah so i'm just going to do so is it like something like oh it's one of those i don't know yeah but i think it is okay so where should this be by default so when i open it it just shows up right here that's not so cool right we want it either should we dock it over by solution explorer like right here is that where it belongs or could it be should it be i think well yeah that maybe down at the bottom like down where properties are normally like down here or i would think bottom right okay so there yeah okay i don't know how this is like that particular one but let's see if we can figure it out so i'm just going to detach that right there and now i'm going to do my favorite and most useful visual studio extension skill i'm gonna deploy that right now i'm gonna google i'm gonna search on github to figure this out um known moniker no which one was it developer news i'm going to go find some prior art and i'm going to look at and here's how i would have done it i would have said i would search for provide tool window like this i'm gonna go back to my code and my package class and see we already have a provide tool window right we're gonna now register a little bit more than what we had here there we go so i'm going to say that this is tabbed and it's in solution explorer two window guits where is that where is that i really wanna say 200 goods why would i have a class called that is it in resources no not there it could be you can search the repo yeah i do have it yeah let me just search the repo because i do have it somewhere under github what where's developer news really okay well i'll clone it you could search in the repo in in the upper right corner up where it says search oh yeah yeah they moved to search it used to be on the left-hand side that's all moving all over the place so we did uh martin pointed out that pomodoro normally is 25 minutes and i'm thinking with that we may want to define a constant for it anyhow instead of like hard-coding 20 yeah absolutely sure oh it's silly it's not it's like it's in the sdk yeah nice oh there we go and you know if you want to delete a line some people do control x but you know what the problem with that is it copies it into the clipboard because you're cutting yeah some people do control l which is like remove line or something but if you do control shift l the control l also copies it to the clipboard control shift l does not oh nice so let's remove a line without anything okay so now we're saying it's a tab style document over where the solution explorer is let's see what else we can put with multi-instance orientation uh we can do transient we don't want to do that in this case we only want one in multi instance we just we don't want to use that either so i think uh what's in the tool window oh by the way in the this is interesting this is uh you can click go to source now in github that's just enabled so for c-sharp repos um do you still have that open in your browser so you're you're supposed to like now if you click on like x click into that c sharp file and then you're supposed to be able to like navigate through or maybe it's not no that would be cool they did just they enabled some news like the semantic search stuff i haven't played with it honestly i've been following it for a while the rich nav stuff yeah yeah so we i think i demoed that in in my build session this year uh very briefly and i'm sh and it's it's in private preview i believe still so it's not out yet so i'm gonna do something else we're gonna we're gonna put provide two window visibility in here as well and uh block select nice yeah here's confidence boom so we're going to say when is the tool window visible i'm going to say when there's no solution that means you just start visual studio then we're going to say when there's a single project or multi-project basically that means whenever there is a solution loaded with projects and then finally we're going to say it should also automatically load and be visible when you have an empty solution okay so that kind of just covers our basis but we don't have it on debug for instance so if we start a debug session we hide the pomodoro actually should it be part of that i think debugging might be because just because you're debugging doesn't mean you don't want to know how much timers left right yeah i think you want to run it all the time so running this um so i do this with a couple of my extensions where because it can be hard for people to know exactly where they go okay so let's get rid of that one so the problem here is and i forgot to do that we need to go to the tool window because i i already have a tool window that i put somewhere i was playing around with its location before and that always overrides whatever the extension author says should be the default so at that point it doesn't matter if i change the default the user's own settings now take over and so i'm going to say no no you don't know this new tool window we're going to do a new one but we're just going to change the good of the tool window and run it that's just a random good but you don't want once you once you've released this into the wild once people have this installed you don't want to change yeah actually i'm pretty sure i've used that good that looks pretty familiar you know i did i did pick it up from one of your favorites [Laughter] there's a um secret geek on twitter he has this it's like hot goods and it's like rate this good is this good hot or not and it's like you know this good has appeared in zero searches and it's like some pretty good stuff yeah so check this out pomodoro timer whoa yep so the whole bottom thing that i did before i'm not sure what that was so let's go check that out i said two window at the bottom it could be that it should not be i don't know what this is right let let's do right try again i've never used this particular the orientation i don't know what that is about hmm yeah petros exactly like this is this is super valuable because you want to be visible when people install your extension you want to pop that tool window oh so now it doesn't even show up here so that's how useful that was um you want to be able to show that tool window so and then let your users decide if they want to hide it show it place it somewhere else dock it you know and so on okay so we're just going to not do orientation at all so um we almost have a perfect extension but of course we need to put an icon in here all right nice yeah yeah and that we just put that in here i always do that for preview image as well even though that's a not used anywhere anymore so that goes in there if we were to put this on github i would put it on i always write it more in for url here i would put on getup.com and then pomodoro timer is what i would call it um one thing we need to do we need to make sure that our uh images here are as small and compressed as possible so right-click image optimizer and let's optimize for best compression that gave us some pretty good here so 27 i just shaved off here that's pretty decent nice well here's here's a there's been mention you need some sort of noise when it goes off and maybe i don't do you know the wilhelm scream yeah it's a yeah so maybe you need the wilhelm scream in there you know that's not a bad idea i i have another extension use the sound john you might know this i do i do is it farticus it is so maybe that too a drop down to select yep okay so when it stops there we go so when the timer stops we want to do there used to be like a class called beep system beep come on where is it i don't know system io i don't know if it's avail [Music] okay let's just i'm just going to play around with this first thing system sounds system sounds dot beep it's in system.media ah but i no oh but i probably don't have system sounds there it is oh that's probably the enum and then dot beep oh that's the the name space that that looks right okay wonderful oh and that'll that's nice because that integrates in with the system sounds yeah an asterisk what's available here let's take a look take a peek that's interesting there's system sounds dot hand i know what is a summation what sound does a hand make yeah is it clapping oh that'll be good hey pomodoro what happened oh i closed it down is that right well we can't wait for that long that was kind of silly yeah so um there is one thing we can do you just attach to the process so dev and vexi it's it never suggests itself by the way if you do this in here you know it only will show uh other processes and that's kind of nice so here's what i was thinking we do we basically go in here oh intercept the and yeah oh and then set the time time span from seconds five okay okay but i think you actually have to change the timer why interval no why okay i don't know oh there you go yeah you're right nothing i didn't hear anything nothing we've been we've been duped well what sound does an acid rig make i don't know there's beep yeah it just says that it can do okay so anyway we have an extension so uh that's pretty fantastic um this doesn't look as good as it could but let me what are some of the other stuff we've been doing recently let me just do this this stuff here and we're going to put that put that here so here's a thing that i always do yes safe here's the thing that i always do i always and rename my folder to source if i can spell it and then go into here and open this notepad there we go and then we can open it back up and we we're almost done we could uh we we couldn't ship this no it's it's really cle i think you do need to make it 25 minutes well i think i need it yeah but it has to be configurable right it should be like a text box or something right yeah you should be able to like select your time right there no settings no like tools options how long do you want it to be none of that stuff uh but it could also be a drop down with minutes you know 10 minutes 15 like five minute intervals up to an hour or something uh yeah maybe that's in the pro version that's the page queue and then we add existing items let's do ab bear and read me and let's just check out bear we haven't even cleaned things up yet i need to do that so to clean things up first thing i want to do is i want to right click my v6 manifest that was this file here i want to right click and say synchronize to code file and that gives us a code behind with all the same information but like hard-coded and available in c-sharp so that i can go into my assembly info to remove the comments and now i can access all the stuff in the v6 manifest by saying v6 and you can call it from there yep yeah your screen went away i know is it back uh not yet but while it's loading i would like to take this opportunity because there are two people celebrating their birthdays today by watching your show oh my god which is pretty cool yeah so quinn that is cool and then we also quinn said it's my birthday and then steve from walter also stephen walter so very cool happy birthday yeah that's wonderful what a great way to celebrate your birthday there you go so this is nice so what you did was you took the properties and now they're c-sharp constants and you're able to set them here so you don't have hard-coded strings right and if you update them yeah this is about having a single source of truth yep and it's just i feel better doing it this way so that make lets us clean up here bill i found that if i said the assembly culture all my wpf stops working like immediately it just would never load and visual studio explodes i can't tell you why that is i wish i could i but i can okay so that was on our package we can now go in here and use that same information by doing product registration we do v6 name v6 description and v6 version and that will make sure that we are registered up in the help about box right here correctly oh i'm going to do the same thing with my vsct file oh it already did but i'm actually going to rename it i like to call my vs command table it's what i always call it not always only when i remember but i really prefer this and the same thing happened here see everything all the guides and ids inside of it is now captured here in sharp exactly the same way so i want to go in here and we actually have the package guide right here so 80 80 96 96 that's that's good and it's also in here and that's wrong right because we should have only one source of truth and so i'm just gonna get rid of that and we can now say package goods we have a package string and it's 80 80 80 96 boom so magic strings be gone we had one more to do and that was in our tool window we could move that one out right i don't know we could um okay so now we just need to add to like add the license so add existing item and we will go one up we say show all files here's our license we're going to add that as a link we don't want to add the file itself and we want to make sure that it is specified as content and included in the v6 same with the logo png there and now we can register that license right here uh okay we're not gonna get um help with this one because it doesn't have any uh file extension and this silly one only looks for rtf or txt files so now we're kind of there and now we can look at our app there that says do this or that that looks good so let's create git repository have you ever done this uh john create from the you know honestly i almost always do it the other direction i like create i create it on github and and clone it yeah oh really okay i'd never do that i always i always write something and then i'm ready to when i'm ready to either stop for the day or whatever i commit it so we can just go to bit and say create git repository it's really nice the new kit tooling so if you don't have that at home out there uh anyone you have to go into you might need the preview version of visual studio but i think even the release one under uh preview features right here has i think if we go to the bottom and somewhere it says use new git tooling could you do search in the upper left oh there you go yes i use i use search and options a lot and it finds just about everything yeah it's pretty good so anyway so that gives you this i can say create a new git repository it already suggests everything here it's not private and it says pomodoro but i kind of want it to be pomodoro timer so now we do this and um that's pretty sweet i'm going to go to app there oh i need to figure out how to do this with github actions but yeah i was going to say huh let's take some questions if we can all right let me see um i don't know steffy says would like to code an extension but doesn't know what we what we could need when you say we do you mean like in your company or is our more general we as the visual studio users in general uh i do have a thing for next week which will be something that everyone can use and that's basically an extension for an internal extension for your company that lets you share links to like your build server your wiki pages and all that sort of stuff uh imagine you're a new employee like finding links to all those developer resources that you have internally can be hard so why not have a my company extension that basically gives you very easy access to all those resources let me see we had another question here what was the extensibility toolkit we needed again so i can share the link to that banner um and that's just right in the marketplace and then what all does that provide you the extensibility essentials let's take a look so let's see here sorry i switched away from the screen so if i go into let's go online in the extension dialog and search for what should your research for extensibility oh my search might actually not work because i have a frank and build a visual studio so we'd go installed instead and we have extensibility i have a lot of extensions where'd it go do i really not have extensibility essentials i guess i have all the individuals oh right because that's that's a pack that packages a bunch of them up right yeah so here's what you get you get text-made grammar so you can easily create a new language we did that last week um then we need uh you get an extensibility margin that's the one you see down here you get like information about the editor classification and stuff like that so if you're writing extensions that touches the editor you get some item templates uh for adding uh different meth components you get a language servers service for the package dev language you get intellisense and vsct files then you get command explorer clean meth component cache that's kind of nice the image manifest that's how i generated that image manifest before and then synchronize v6 or v6 synchronizer was the one that will create that code behind based on those xml files so you have like that single source of truth we have our image optimizer that i use that one too known moniker explorer helps us find all the icons that are in visual studio that we as extenders can use there's almost 4 000 of them you click them you see them big you can export them and whatever file size you want and you you know png jpeg gif or whatever format you want we got some good questions uh just came in okay so we'll start with this one so martin tried to to follow but couldn't find async tool window in visual studio is there a specific workload you need to install yes you need the extensibility workload so let's just show so for anything that has to do with extensions you basically need the extend visual studio extensions workload i believe it's called so if you open up the there we go this is i i love this installer too it's so nice to be able to browse what you have and yeah so here it is cool okay this is the one that you want okay another question another question pedros pedros is saying are you able to provide a generic overview of the structure of an extensibility project yes um i can do that so let's first go ahead and say coming soon so i'm just going to kick off the build so i registered my app there i didn't want to show you because that's logging in logging in and taking forever so add it build badge here now i've heard people say recently i don't know how well this would work but i think now visual studio has right-click publish github actions yeah which wow it's pretty amazing uh you can do that so it's again it's under preview flags so yeah so here's my bear build nice oh it's right it uh what did it do it it it's doing magic stuff so it's like let's just talk about this for a second so it cloned my git repository here then uh okay let's not do that let's do this type of zoom then it downloads an extension script that i got here that i'm hosting on my github and that gives me some new commands in powershell that this runs that's increment v6 version so notice here how it says version is 1.01 and then it says update build version that's the version that we have up here to match so my version that is in controlled by my v6 right here is 1.0 okay it automatically appends the build number which is this the one to that and it updates my v6 manifest and so now when it goes in and builds my extension using just regular ms build it will now have the version 1.01 so that increment always happens so let's just do 1.1 so if i if i have explained myself right what version would that become 1.1 john any or oh sorry 1.1.1 is all right no no jonas the same guess because the build number one already executed that was the first build we did yes thank you 1.1.2 that's exactly right so you can see right now build this version 1.0.2 until it gets down here now it's 1.1.2 until it gets that down and executes these things okay uh let me see there's a question here i think i know the answer for it but it's worth calling out so just installing the extension workload doesn't install essentials because essentials are the essentials are extensions that you've written that are extra things you can add on so there's two things you reckon like one is you need that workload to just build an extension at all but then to have a good time you're gonna want this extension extensibility essentials it packs a bunch of stuff here i need to update this i think there's two more uh so it's very meta it's extensions for extension authors so now that is built and the last thing it does it says publish to v6 gallery so v6 gallery is not the marketplace like this the v6 gallery is the open v6 gallery which is a completely separate website and something is wrong with that this image wait i missed that because i was reading a comment there's open v6 gallery is different than the marketplace the visual what's what's the reason for this so the marketplace is the official thing where you upload your your the thing you want your users to try or to use this is sort of like a nightly builds ci built that you can use so you can if you fix a bug you can ask your users to hey go try out this uh particular one let's just click this you can send them this link this link never changes based on the id of your extension um and so you can just um send this out and now you have a ci build um so but anyway i got very scared there for a second because uh john uh what happened yeah icon where's that icon that's a nice icon i think so including v6 true what gives control f5 in the browser i blame the website yeah it could be oh and so this is a neat thing v6 is a zip file yeah it's a zip file a lot of stuff is zip files yeah see so it it's not in here neither is the so it says content build actually copy uh copied output directory no yeah that's fine you don't want to copy it shouldn't matter uh oh hang on oh embarrassing yeah so um d john's asking is interested in a demo for a markdown editor preview and property window so that seems pretty i know there are some extensions out there that do markdown editing yeah yep so there is one it's fantastic whoever wrote it is a genius right and it's kinda popular look at this i didn't even notice wow it's on the githubs so it's um it's right here go check it out it's a full language server implementation with the preview window just like we saw here right you see the rendered preview and a bunch of things um yeah so can you use a um like an open source markdown renderer for that like a yes i use something called markdig ah nice yeah which is the best yes alexander did that one yeah um it was like early days he did it.net standard and i really wanted to make a uh markdown editor for visual studio oh now they're there okay uh and so it ended up being that i actually sort of real world tested that thing and there was a lot of bugs and you ended up writing a bunch of the implementation for the markdown editor extension um and it got refined there and and then it was i think not long after it was it became very popular because it was by far the best one it was better than common mark and all these other ones so so let me see martin's having problems still add new item installed some things i'm i'm guessing so it says uh okay martin do you have a v6 uh project so if it if you do it with a regular class library or a console lab that might not show up so if you have to if you create a project that is a type of v6 project then you can see here what mine looks like it has a bunch of stuff here um okay so it's already building cool okay okay so now it's done building so you can see it takes like less than a minute for from when i commit code until i have a downloadable installable extension on the open v6 gallery right here i can install that right now if i knew you're good oh all right just go to musicgallery.com and click it and click download yeah that's it there isn't an icon it's a beautiful one so shout out by the way i don't know um john do you know iconfinder.com no this is the premier awesomest icon thing in the world so you come in here you search for your uh tomatoes and then you spell it right too like that and say only show me free ones but you can also subscribe and get like really fancy ones so you see that's this one you get svg png you're gonna have elements if there's other formats you get those uh yeah this is really cool uh i've been using iconfinder for years years and years i think longer than i've been at microsoft so more than ten years some people have asked for like so you can search for extensibility essentials but people ask for a link in the chat so i'm i'm i post i pasted that in it's the 2019 one because you also had a 2017 one as well right yeah the reason i don't yeah in the chat is fine the reason i don't have them as we put them in on top of the video is that they're so long it's hard to yeah what about an akams link yeah i should do that i should totally do that yep all right so i have just installed this extension it's this is amazing now i can have pumpkins i think the ui needs a little improvement i think uh right now the two buttons are uh sort of uh full width and i think they should be next to each other and stuff so there's work to do you know that's very cool so now do you know this is normally like a one-hour show one hour yeah we're yes this is like we don't have a heart stop but i try to keep it at an hour but um we had a lot of live uh people tuning in live today and we had a lot of um questions so i thought yeah this is great a lot of great questions it's cool that people are following along and and you know doing this like as you're coding so right awesome any last questions here i don't see any more other than your people are just um yeah now looks like uh this is great this is a great start and and i learned a ton like a lot of um both understanding what's in the you know like file new project but then also some things that you did that i thought was cool like one is going through and removing the goods like and replacing those with constants um a lot of the theming helper which we pasted in the um chat that's that's super helpful um and the theming just in general is pretty neat and then it was it was cool to also see how you docked it on the side i think that's really really nice yeah uh it's fun the theming is one of the things that come up all the time because it's really hard to do theming this helper class that i showed is um and again it's checked into this prod uh project right so go to github and find it um in the chat it is a match christmas and wack pomodoro timer on the youtubes yep sorry youtube's on the uh the githubs on the githubs yeah i've i've got it here i'll put it down at the bottom it's it's long but yeah yeah but i'll i'll show it here this might this might help get up slash um so it's not perfect so if you're doing like advanced stuff if you're doing data grids if you're doing i think some advanced tree views and like all sorts of or custom controls it will not work right it works on the common stuff like buttons and labels and and basic stuff but it basically takes you even if you still have to do some custom stuff it takes you a lot of the way there and so it's just a real good time saver i can't take credit for it it's a friend of mine called uh mike lorbetsky that wrote it oh cool mike's great yeah you know him yeah yep so mike if you're watching this thank you i'm still using it he wrote it like i don't know four years ago with him you know that's one of those things where it's like it's nice enough when you see it there it feels like that should maybe be in the file new product like do we update those extension templates to add in some of those helpers or um yeah sometimes uh it's not we can't just put something like that in there because um well i don't know it has worked for me but i also heard from people that have tried it that it didn't work for them like they have to do custom stuff so it's like it's almost like we're promising theming out of the box but then it doesn't talk deliberately it's not good it's cool enough to share as here's something that works for me but it's not productized enough yeah it's a tough balance because it will help people out there and so uh but then we're on the hook for maintaining it and for like 10 years and stuff so there's a lot of there's a lot of pros and cons to for something like this um yeah yeah cool yeah it almost feels like it would be nice to have a an opinionated extension you know that does a lot of the setup that you're doing there yeah um the i think that will that will happen so i so i'm no longer on the extensibility team but one of the last things i did was that i opened some user stories for the team where i basically took new project templates and item templates and said this is what they should look like okay and so where the comments are already removed except if they make sense where the command class is not like i said that it was very complex it's super duper simplified um just a lot of simplifications and um and and you know they're gonna get there but they're busy and they're prioritizing all sorts of stuff this is what it seems when you're seeing this from home and you're just watching me talk about you're like or you're watching a bug report on developer community or something like that anything why don't they just fix it well there's a lot of reasons why we don't just fix things right they have to reach high enough in priority and some things are just more important you know this from your own job right this is just the way things are but then there's other things that like what i talked about with the theming where it's not quite right and we don't know necessarily how to then handle it and um then stuff like i'm me sharing it here is a potential it's an okay solution for now right um so so it'll come it'll be there don't worry um but um maybe it's something for the community to create a new template that's yeah that's interesting and you know it makes me think too like with the dotnet core templates those that like there's now support for loading those custom templates but those are net core projects no um it can be any project oh any so that would this would be an example then yeah wow so so but you so that means and i've created several of these uh before these templates before that are not done at core and you just wrap them in a nougat package and put them on nougat and now they're just will be discoverable in visual studio and again that's on the preview right now so you need the preview version and check the checkbox under preview features called can you show that real quick because that's that's a really useful thing like i um that's a yeah it's been a long time coming too people have really you know we've had this support for these making your own project templates for a while but it's been like you have to do a command line or it's not you know like right out of the box like this so see here's the github action support in public so you can just publish with github actions um here showall.net core templates in the new project dialog that's very cool yep so that means but that means that once you have installed so if you do so you actually need to yeah yeah if you do net new or you've done dot net new install what's it called dotnet install done a new install dotnet new installed yeah yeah so you acquired the templates they will now show up yep cool well uh that seems like a good place to wrap up then huh absolutely and john um i attribute this fully to you because you're the you're the difference today but we have a lot more live viewers than we normally do so thank you well this has been a great show and we've got a lot of you know a lot of happy comments uh here so i think i think this is a fun series and and you read i mean a pretty good beginning of a of an extension in a little over an hour so this is this is a it's a great class if anyone wants to take this i i don't plan on finishing this and it was it was not even my idea right it was jonas's idea but if anyone wants to take it fork it and do your own spin on it and finish it up and polish it off and publish it there's a lot of peas and feel free to do that right it's uh that that license i put on it is apache 2.0 i believe which basically means do whatever you want with the code pretty much great great so all right well i guess it's time to wish everyone a a nice weekend huh yeah it is i guess you have to go huh you're like eager to leave i mean no i don't i don't know how these work normally like um i mean this is amazing i just found by the way there's a logo here that i could have been flashing on the corner yeah i don't i don't know why james yeah that's amazing do you have big plans for this is this is this a show where i have this thing where i do my glasses like that it is that would have been a fun logo yep or yeah in the pipe let me go here wait we need we need full screen and then i can screen cap oops not that one i need that that's beautiful all right all right we'll have to get that set up okay everybody uh it's time to wrap up and uh thank you so much for joining us today and john uh it's been a pleasure i hope to see you here again as producer or our guest or something um it was a pleasure sounds great all right thanks everybody take care and happy birthday to those of you with birthdays today all right thanks friends see ya [Music] [Music] [Music] [Music] you

Channel: Microsoft Visual Studio

Views: 6,574

Keywords:

Id: oDTF7Zh_Y5k

Length: 89min 4sec (5344 seconds)

Published: Fri Oct 23 2020