 Hi, welcome to Visual Studio Toolbox. I'm your host Robert Green and joining me today is Mads Christensen. Mads, welcome back to the show. Thank you. Glad to be here. It's been a while. Yeah, I think March was the last time. And in that while you've no doubt We're in a whole bunch of extensions. I have. So the way it works is Mads goes and writes a whole bunch of is constantly writing extensions and then every now and then either I ping him or he pings me and You come on the show and show us what you've been working on. Yeah So I'm gonna just show some of them. Okay, because I so I I looked at sort of what I've done this year You can get your own show. Mads's extensions. Almost because I think I write an extension every two weeks like on average in this calendar year. So There's a lot of stuff and we're gonna skip some of them. All right And look at sort of the most the highlights. Yeah, the highlights. Just the good ones. Yeah, I think so. Yeah, right So let's just jump into it. All right Okay, so let's take a look here. This is an extension that I wrote called the file icons So one thing that is, you know, my extensions always have boring names. I realize this They always just have them. They always just describe what they are, right? There's nothing. Yeah So file icons add icons to files. Okay, it's pretty simple But you I undoubtedly if your visual studio user you've Notice that some files they don't have an icon in solution Explorer They just have sort of the default white icon and visual studios is I don't know what that is right and so here I have Languages check this out. Oh So that's kind of cool. Yeah, so What is happening here is that this extension I have Maps file extensions to icons and some of the icons visual studio already has built in and sort of just reference the existing icons Some icons are for something that is not supported at all in visual studio And so they're custom and so here we have a list of a lot of the custom ones I said, did you make up these icons? So you decided that? Oh, well that plug obviously is a dog. That's a jade file. Yeah, okay So the yeah, so these are like the official icons, right for these different languages or file types So this is what they look like. This is but this is very very nice It's you know, if you're dealing with other file types and you know the usual suspects this is just nice and Actually, so here's the github repositories all these extensions that are right. They're always open source this one is called file icons and If we look at just the different files here, there's over 350 file icon mappings So these aren't there's a long list So it's something that I you know, ultimately I want this just to be in visual studio I think it's it's nice to have so even though there might not be support for the language Right, at least we can show the icons to say, okay We know that this is a pearl file or a Haskell and then if you wanted to use your own icons You could just edit the source code or is there a dialogue to do that mapping yourself? Well, you cannot do that mapping unfortunately But let's take a look here. So but I kind of I kind of build in like a thing So let's say let me just add a file here. Let's add something that doesn't exist, right? test.robert Okay So where did that go? I'm under teeth the very bottom. Yeah. Yeah So okay, so here this one this has that you know default icon. We don't know what this is But you can right-click this thing and at the very top you can report missing icon So if you click that it basically What is the internet broken? It appears to be okay. I'm not I'm not online. Yeah, I can see my internet. It's not here Anyway, that's not important the important part is what it does is that it takes you to github and it opens an issue saying Missing support for dot robert files. Okay, and then I picked that up I find out okay What's the appropriate icon and I release a new version of the extension that automatically gets into visual studio, right? This is do you auto-updates extensions, right? And so a week later you're gonna have you're gonna open this project and all of a sudden you have an icon for Dodd-robert but you could You could add the ability to add your own custom icon if you wanted to right? Could you know now? I don't think you can okay. This is all This is all like something that has to be registered with okay. All right, so it can't be swapped out at runtime It's no unfortunately hard-coated all right So that's how visual studio works in this case And that's why I think this extension is so interesting because it just lists like as is it 350 of them And like every week the list grows and grows right so That's kind of nice now So that's kind of cool. I'm gonna create a dot robert file and put my face on I should do that Should do that like a little Easter egg Now for some of these Files like we don't have In visual studio. There's no Extension or there's no native support in visual studio for a lot of these languages right like Haskell and Scala and so on and It would be really nice if we could get at least syntax highlighting and maybe even snippets for these files And so let's open this pearl file pearl dot pl right here So what? Visual Studio 2015 has which I think very few people are aware of is that it has support for text made bundles and Text made bundle is something that was born for the text made editor You know years ago, and it's basically either a JSON or an XML definition file that describes a language So what are the keywords? What are you know? How to syntax highlight a language right and also it can has have snippets and other things and so vision studio actually has support For this and so I have an extension called the syntax highlighter pack that Basically just adds a lot of these text made bundles. So for instance for pearl That's a zoom in here You know I can get snippets. Oh, and so there's one called test And you see here and we even get like the full snippet I can move between these here, right? Nice So that's kind of cool So I get full syntax highlighting for languages that are not traditionally supported in visual studio So you can see this extension Married with the file icons extension provides like a whole bunch of really nice features to vs for working with languages So did you how many languages did you get supported for in that extension? I think I'm close to 50 It's at least it's 45 to 50 I think right now And did you have to create the XML files yourself or did they exist somewhere they exist? I don't I actually don't know how to create those files. Okay. I could learn like it's basically some red-egg singing Yeah, stuff you need to specify so it's doable But somebody already did the work someone did the work. Okay, cool and when you open a file that Visual studio has no idea what is like it's plain text like the dot robert Now because I've had this extension. I don't see it right here But if I just installed the extension I would get a little alert that says hey You can now when you open a file that we don't know about you can right-click inside the editor and Report missing language for dot robert file. Cool. And just like the file icons if you click this it will open github and create an Issue on the github repo for this and I think I've at least 10 if not more 20 Languages have been added by people raising the issue on github through this button right here So it's kind of a cool way to to add features like the users literally ask specifically for the individual languages So that's kind of cool So that list is gonna keep on growing you know and Those are also so visual studio supports it but also like sublime text which was to do code text mate Adam brackets all these different editors all support text mate bundle So there's a lot of them out there, but I don't just blindly take all of them You know I have to test them out. Do they work? There are limits in what visual studio supports So I have to test each individual language okay, so That was those two extensions. Let's create a new file in here You know a lot you have dot get ignore files and all that so there's also dot tf ignore So let's just add one of those You see here it actually of course it gets a nice icon. Yeah, because I have the file icons extension But this file is used for me to when I you know commit to source control I can say ignore certain files and folders and the problem is how do you know that whatever you type in this file actually hits Files and folders that you have Let me illustrate So I'm gonna just zoom in here So let's take a look at this Actually this I should have put this file in the root of my projects. Let me just do that Let's just close it. Here we go. So in the root of my project. I got a few folders I got views. Let's say I want to ignore views. I would simply go in here into my tf ignore and write views Okay, now let's say that let's say I made a mistake. I made a typo here It's getting grayed out like this. Okay So I can fix it like this and if I hover it It will show me exactly what files it hits Isn't that nice? You know when I have floors I can just search in here and it's super fast And I can also if I then click one of these files here You see solution explorer. Uh-huh. It synchronizes. So I can very easily find and identify these files So that's really nice and if I have something that doesn't exist, right? This doesn't exist This file for instance. I get a light bulb. So I can say hey remove this bit of specific entry or Remove all non-matching so we'll go through my entire ignore file whether it's tf ignore git ignore npm ignore Like there's a lot of dot ignore files And it will just remove all the entries that don't point to anything Excellent, right so you can clean it up and and verify that everything is is as tight as it can possibly get cool So this is an extension called dot ignore. Okay, not do t, but that you know the dot Dot ignore Okay, so let's close out all of this Let's look at another language that that's in here markdown So this is an extension called markdown editor, which again very creative naming. It's an editor for markdown and It's actually really cool. It supports the full github flavor of markdown plus an additional some additional syntaxes mm-hmm and Instead of it just being a plain text editor with a preview Which is sort of what you see here. You have the text on the left the source Yeah, and you see the browser rendered HTML on the right We have a lot of things we can do here for instance Here's a checkbox list If I hit control space It checks it for me. I don't have to manually go in here and you know mark this with an X, right? Okay, I have a shortcut control space Also, if I want this to be both Control B, right so these sort of text editing we know from word and whatnot are carried over here So that's really really nice. I automatically get completion if I'm writing a list here So foobar hit enter it will inject the three dot for me here So we can do something like this and notice how as I type yeah the preview updates. I don't have to Save or anything. It's as I type which is really does it teach you the markdown syntax or does it expect you're familiar with it? It does not teach. Okay, so But it does a little bit actually so let's look at a feature here So notice here now I scroll As I scroll the source the preview scrolls Instantly with me, so I always see the preview of what I'm currently editing which is nice But here's where it helps you. Let's say I want to add an image to this file And say I'm just going to create an image here I'm going to just do a have a little image selector tool here, so let's grab this copy it So now I have an image in my clipboard. I Can simply just go in here and Just paste it in control V and it will now ask me where do I want this image? Let's just call it file It's automatically created put on disk and referenced and We even have validation here, so if I make a typo I get an error So that's kind of nice. Oh, I could also go the other way around. Let's say I have an image already So let's see file. I can right-click this or not right-click. I can use the light bulb Say convert this to an image And it will then ask me well, where is the image? On this case, I put it here, you know, I get the same thing And you know I can do a lot of other things in here converted to a link So all these special syntaxes there are very easy shortcuts to do that So I'll learn as I go along. Yep. Yep And of course, there's a full syntax highlighting as well So here I have a C sharp code snippet, you know, I can see you get sort of a nice view here. Yep so You can add custom style sheets all these sort of things you would expect from a markdown dancer and it's this is my primary after I build this and there's a Something called mark dig, which is a dotnet core Parcer for mark for markdown. That's relatively new. Okay, it's like by far the best on the dotnet platform that supports all this and That's what's under the hood. All right, so it's it's super fast all async very very nice very nice Yep all right, let's Let's look at another one. This is This is an extension that I Has been out for like some years like three years or something like that Okay, but recently I took over the sort of stewardship or ownership of it because the original author is no longer Maintaining it and I asked can I take it over so I can Maintain it and it's called multi-editing. I've kind of renamed it to be multi-select mode Just because I have to have a boring name. Yeah, apparently But it allows you basically To have multiple cursors. Oh It's not cool So this is So it already has a lot of downloads people really love this. Yeah, how many can you have at a time as many as you want? Wow, there's no limit to this It's not cool. That is nice. Yeah So it's been out for for years as I said and it has like has a decent amount of downloads But not a lot of people know about this Yeah This is something we keep hearing that people love from let's say sublime tech Yeah, they have this capability of having multiple carrots and I mean to figure out the replace all to use to get text Like that in multiple places right nice, right So Let's go back here. Let me open another file here It actually doesn't matter. I'm just gonna pin it. You know the pinning feature visual studio. That's really nice You just pin it right there, right? So now it stays there It's always to the left Yeah, now their thing is though that if we look at my project here in solution explore like it's all expanded Look at all this stuff, right? I'm just expanding all this So this is might be how I leave my project So now I'm done for the day and I leave my project like this I come in the next morning and open the solution again, and there's like oh now I need to like collapse everything and find it Yeah, you know this problem. Yep. It's more of a nuisance. Maybe a problem is a little bit of a newer statement But to me that's sort of annoying. I want the fresh look of it. I want all this stuff collapsed Right, I don't want anything open unless I pinned it if it I want it open. Oh everything else should just be closed Can you anticipate my future request yet? Something to do with restart Roaming Roaming is this this might be some this might be support. It could be could be I'm not certain. Yeah, I don't know How I said it's awesome if that roamed I could it I think if you use the Visual Studio APIs for storing settings Which I do they may be wrong. There's not something I can as an extension author, right? It'd have to be something that that is in settings, right? That'd be cool, but it could be depending on where the location of setting is. Yeah, I should look into that. Okay Anyway, let's finish showing the feature. I jumped ahead So now you see it's all expanded. Yep, but let's just let's close the solution Okay, the solution is closed Nothing out of the ordinary Until we open it again The exact same solution notice that now it's only my File here that's open the other file that was open is now closed. Yep, and everything over here is collapsed Okay, right so I get a fresh start Pretty simple cool, and it's like it's one of those things that it's always kind of annoyed me Mm-hmm, and so I built it not a lot of people downloaded this I mean this it's for people that are like on the OCD like myself. I don't know But this is this might be my favorite extensions of all time. Okay. Wow. Yeah, something as simple as this All right, it's in my top five. I'll say that interesting. Yeah It's called clean solution. Okay clean solution and there are tools options You can say do you want the projects to be collapsed you want solution folders to be collapsed? Do you want solution Explorer to take focus when you open the solution and I do this? I said that to true I want solution Explorer to have focus because oftentimes when I open something Yes, like team Explorer is open or the properties window, and I just want solution Explorer to be right So now it does that and that's kind of very nice. Yep It kind of just gets it that you makes ready to be used right guess, you know, yeah hit the ground running so Speaking of that, you know sometimes you create a new file and there there are comments in there Mm-hmm, or you you take over a file that someone else wrote and there's a lot of comments on how to do it and how you know to Teach you how this file was built or whatever right? Yeah, and so First it's here. There are some comments in this file. There are three comments actually This is a C sharp file. It could be any file It doesn't really matter, but it has comments in it so I can say Control KQ and Just gets rid of all the comments. Oh, isn't that isn't a neat But the way it happens is Where you grow Here we go comments All right remove all comments Uh-huh only remove the XML commons or remove everything by the XML.com. Okay, right and you can also remove regions this is Something I get asked about every now and again and then It saves them in memory until you save the file. When do you lose it for good? Well, yeah, it updates the text buffer So the file is dirty you have to save it right to make the change and you can always undo it Yeah, there's no difference between this and other text that is in the editor Yep, but remove regions does not mean remove content of the region Right only remove the region lines themselves right the region and the end region Yeah, so it's one of those things that you know I actually use way more often than I thought I did this for a specific Exercise that I did at a conference at one point, but I find myself using it at least once a week Okay, so I kind of like that but speaking of Like editing in the Text editor here, right? Let's let's make some formatting mistakes Okay, so let's say here. This is this is a badly formatted document right now. Mm-hmm. I think we should probably assume a little bit Okay This is very very bad, and I should format the document and so to format the document I don't remember the shortcut right so I go to really it's one of the few that I do remember I well, I do actually do remember it, but just for the case of the argument. Let's say I don't There's a there's like five. I remember that's one of them But it could be anything that I any command That I execute mm-hmm That has a shortcut Associated with it, but I choose to find the button and click it with the mouse instead Okay, okay in this case format document. I'm going to click it with the mouse And it formats the document, but at the bottom it tells me oh I hit edit dot format document which has this Shortcut Okay, okay, so it reminds me if I need to if I want to learn What the shortcuts are for the stuff that I normally do I'll look here, and I wish he goes away, so I set it to 15 seconds so Do we do it again at menu? Uh-huh because it tells you right there Right, okay So you're repeating it. Yes. Well, not every well. Yes, but not everything is shown right Not every command everywhere has this show But even if it there are commands with shortcuts and the shortcuts don't show up in the menu Yeah, not all commands are have menus right for instance. Oh, okay, but it will show you right here Right, and then we'll go away after 15 seconds this case by default five seconds. Okay, but I can always go in and See the history of the different things I did. Oh, I did that that specific one a lot I should probably learn that one right? Yeah, and so this is just a tool if you want to learn Shortcuts, okay of a very simple now. I get it teaching tool Yeah, if you want to we know from telemetry of the visual studio usage that people don't use a lot of shortcuts like right way Fewer than you would think Like like to like the average is like two keyboard shortcuts per person right that they know control shift B One of them control C So this is basically just a friendly reminder. Hey, there's a shortcut for what you did You know, maybe you want to maybe you want to learn how to use it. Oh, that's cool Yeah, so it's like one of those small little nice helpers And I always have it there because sometimes I actually don't know the shortcuts right right so Even though I try to use but it's nice if you it's keeping track of what you do in suggesting which ones That if you learn this shortcut, you could save yourself quite a bit of time of hunting and pecking on menus, right? All right, that's cool And there are settings you can you can specify whether do you want to print it out in the output window as I do here Do you want like how long should the thing be in the status bar or should it never go away? You can also just have it all there all the time or if you're asked 25 times And don't use the keyboard shortcut a lot automatically move the mouse off the menu and force you to learn it. That would be that would be interesting But he's out. Maybe I just want the output thing. I don't want the status bar You can also set that up. Yeah, so, you know, however you learn best this you can configure this board. Cool All right, so These were all like general purpose Extensions, but I'm a web guy. Yes, you know deep down inside. I am a web developer and a web I work on the web team, you know, so I have to do something with web every once in a while You know, even though that what I showed here also works for all web developers, obviously, right? It works for everyone. I'd say But I do have a few Few things that is interesting specifically for what developers and I think at the show We did like a year ago. I think I showed you the image optimizer How to really compress and optimize the images in your project to save bandwidth or file size, you know But there's a other trick we use in web development, which is called image spriting Which is the process of taking let's say three images and combine them into one image and then using CSS to move the background position To match just the same that single image that's inside the large image Right and the point of that is that by serving only one large image That's only one HTTP request right instead of three individual ones And so it's faster reload times those sort of things, right? It's an optimization thing But they're really difficult to do because one thing is you have to create the image spread itself You have to combine the images basically that's one exercise the other exercises. Well, how do you write that CSS? Yeah, right, and what if you don't want to use CSS, but you want to use sass or less than what? so So these ones are icons see here if I hover you get a little icon here So now I have an extension here called image sprite or it sprites because that's what it does And I can simply say create image sprite and they will ask me What do you want to call this? My sprite that's right. That's fine. It's what it suggests and Here I get a sprite file, which is the JSON file and a few things happen It creates a PNG file and then it optimizes it using that image optimizer. We can see that just happened right here Okay, so that happened right here 29% so I'm up. I create a PNG Out of those three source files. You can see it listed here. It has all three of them, right? And it gave me a style sheet a CSS file So I can now include this as part of my payload or as my part of my CSS bundling mechanism And I now have what I need to do to consume this image sprite But as I said, I didn't want to use CSS potentially When I use something else So I in my sprite file. This is how I define this. I said, oh, I wanted to produce a less file I can also do want a PNG Should we have a GIF or JPEG? What's the output? Mm-hmm? And then when I up When I optimized the images should it do the lossless or lossy lossy will give you more compression Yep, but you sacrifice quality a little bit whereas lossless is no change to the quality, right? So let's just keep it at that Orientation which way do we want it to go? Let's change that keep PNG and here is the list of The files. Mm-hmm. So I can at any point in time add another icon and just add the entry in here I Can actually just drop it if I take an image file here and drop it in so I already had this time So it just gives me like a random string here But I can just drag it in and it will be part of my sprint because as soon as I save the file You can now see that I have a horizontal list here Yeah, and I have an image right less file created. Yeah, is that cool? Yeah So this is just one of those things that people don't do because it's too hard to do right But anymore, it's easy. Yeah, awesome So that isn't that it's just nice. I like that That's something that helps me, you know, right? That's usually why I write extensions because I have a need for something Then I figure out that you probably write the extension. We're moving fast here through a lot of stuff Have you ever wondered Robert when you're building applications any type of applications? You're using packages that are the people wrote right and You know, it could be a nougat package could be a power npm package But how do you know that? You know any package that you use with that version of that package doesn't contain security vulnerabilities. Oh Okay, think enterprise or think You know where you want to have some restrictions on you only want to use things that are doesn't have any known vulnerabilities I think that makes sense in most cases, right? Yeah, so I Build this thing called package security alerts Again, that's exactly what it does and here's a power file. Oh look at that. Look at that so You get little alerts here about like some packages that have Security issues so this works for power and for npm and where's this information stored this information comes from retired J S so there's an existing repo that are being used For gulp files and for other no J is basically in the node world. I'd say mostly But it's part of that There's a JSON file with all the definitions like here all the packages and here are the ranges of versions that have vulnerabilities and Here are the link to where the vulnerability and the fix is described And so we can say is something a high security risk or medium or low. So if that gets fixed then That would go away at some point. Yeah, we can fix this so So if I click this says oh this has Risk level high. Yeah, right. So at the time So let's say whoever wrote that package Did they wouldn't fix 1 3 1 or would they just make a 1 3 2 it would make a 1 3 2. That's like December Like semantic versioning, right? You have to create so even though it is a security vulnerability You leave it out there and it's just no longer the latest version, right? They're actually good at then putting them down taking them out of the like the npm or bar registries But not in all cases of a bar here. It still exists. Okay, and if I click it It opens the the description of what it is Here they're the complete description of it. There's even like PDF files and stuff to Know that the files are not PDF files to show what the problem is and how to how to fix it and all that sort of stuff But usually the way to fix it is just to update it to the latest, right? So let's take that one and see that it goes away immediately. Cool This is just a very nice way to you know making sure. Mm-hmm. Hopefully you'll never see that, right? All right, but it's something that's really nice to have. Yeah, just in case and what's the Information icon. What does that tell me? This one. This one is a warning. So medium. It has medium, right, right? So maybe I should make it more clear in the message here if it's higher media make it bold or something like that Yeah, because would you leave a medium security issue in your code? Well, I would say no You wouldn't there's the low risk where it's like for your information, right? If you use it in a certain way, which you may not do Then there could be a potential right, right? I think medium is there's something here, but it's it requires more effort to exploit. Okay, and then high is like, okay You're right. You're just open to failure here, so But that's why you just click the icon it takes you and you can read about right this so this extension makes no effort in Trying to give you recommendations, right because it's all it's different from informational Yeah, it's different from each security vulnerability how to mitigate it and all this thing. So yeah, it's just for information, right? It's a it's a package security alert alert and that's also the name of the extension very nice. So That's kind of nice Do we have time for one more? Of course, okay? So this is an this is an oldie, but goody But it's been updated. It's the one called package installer. Mm-hmm. Let's take a look at what that is So if I right click my project I can say Quick install package. Mm-hmm or hit shift alt zero and it gives me this thing and it's basically a way for me to very quickly install a package From npm or power or nuket or TST Into my project so that so for nuket it installs a nuket package Just as it would have done if I went to you know Manage nuket packages and would search or use the command line to do install package and all that But if you know the one you want like json net right which I've added, you know We've all added to projects over and over and over and over and over again This is quicker than going to the package manager. Although it by now shows up immediately Right, but something like sequel light, right? If you know what you want. It just makes it a lot faster to go and get But as a brand new thing we now have yarn support So yarn You can never have too many package managers Right and well the funny thing about yarn is let me explain to you what it is actually very simple it's an Alternative to npm So it uses the npm registry the content of the packages that you get down or the exact same ones But instead of using the npm CLI tool under the hood it uses the yarn tool Okay, which is a new thing that Facebook and other like Google. I know the Angular team has been involved in It's a lot faster. It does caching better. It does Shrink wrap if you know what that is for how to lock certain versions So you never see the versions never slide based on semantic versioning It does a lot of things better than npm. Okay, and so just to show that we can We can select that and we can we've still got full intelligence, right? We can say give me jQuery and You know that says here what it's doing. It's the only jQuery packets from yarn and done right that was it So that was kind of nice. So Yeah, just an update to an tool one that I think last time I actually yeah demoed this particular extension But it's always nice like for me. It's like really important to always be up-to-date and maintaining these like a lot Right, so I never let my name my extensions go stale like if you look at it None of them have been updated like They're all like in the last month or last two months, right? So they have to stay relevant and all this sort of stuff So this is just to demonstrate that yep, we can react to the market and when something new comes out We add the support as needed, you know, cool. Yeah All right, all is fine. It's a great time. Oh, yeah, thanks. You're welcome. All right We will see you next time on visual studio toolbox