Top 10 Best VS Code Extensions (2020)

[Music] in this video we're gonna go over my personal top 10 most used vs code extensions I'm gonna break up these extensions into two categories visual and functional extensions so visual extensions help you to code through visual representation colors and formats functional extensions help you to do something faster now I do have a vs code beginners video where we install vs code from scratch and we set it up for web development so if you're not familiar with vs code at all you may want to watch that video first and then come back here and stick around to the end I've got some extras that I want to share with you alright let's look at the extensions and these are in no particular order so I'll go to the extensions tab and the first one is actually two extensions but they're very similar so these first few extensions are going to be the visual extensions for my theme I use the material theme and for the icons I use the material icon theme so these are the icons that will show up in your file menu and at the top in your tabs a lot of these visual extensions that I'm gonna go over with you our personal preference so for the theme we'll go to our settings and we'll choose color theme and I'm gonna go ahead and just type material to get these sorted a bit and we can just arrow through these so this is the default material theme and then there's the ocean darker lighter I I don't know why anyone would use lighter pale night seems to be a very popular one and then high contrast I prefer the high contrast ones so this is the default high contrast ocean darker lighter pale night again so again pale Knight high contrast that seems to be a very popular one but I actually prefer the darker high contrast so again in personal preference alright the next one that we'll go over is prettier and prettier does exactly what it says it makes your code pretty if format your code uniformly throughout all of your documents so there's one setting that I would recommend on this and that is the format unsaved so to get there I can press ctrl or command , and then just type format on save and by default this is unchecked so just check that and then when you save your file it will automatically format it for you and I can demonstrate that for you let's just let's go to this javascript file and I'm just gonna mess up a few of these lines tab that one over there that one over there alright it's all messed up so now I'm going to hit save and it formats it perfectly for me it will also format your quotation marks so if I change these to double quotation marks and then I hit save it's gonna automatically change them back to single just because I prefer single and that is a setting as well that you can set for whatever your personal preference is and there are several other settings that you can look into here in the prettier documentation all right the next visual extension is going to be bracket pair colorizer now there is the original and then there is a two and I have the second one installed and I will just read this for you in the faq the differences between version 1 and 2 so 2 uses the same parsing engine as vs code which greatly increases speed and accuracy the new version was released because settings were cleaned up breaking backwards compatibility so the second one seems to be the way to go now what it does is it color eise's your parentheses brackets and curly braces so you can easily see its beginning and end and also adds this line and makes a bit of a box around the content that is within the bracket that you've highlighted so this one is yellow and it's showing me the content within that I go down here and click on this one it shows me that one and then that one it's just a visual representation to make it easier to identify what section of the code that you're looking at now the colors are customizable these are the default colors and the next extension which I'm sure you've noticed is these colors here in the margins and that extension is called indent rainbow and all it does is add these colors to the margin to easily identify what portion of the code you should be looking at so sometimes the indentations get a bit out of hand and you're kind of confused as to where you're at and so these help ok so that's all of the visual extensions now let's get into the functional extensions the first one is Auto rename tag all right an Auto rename tag they have a demonstration here if you rename the beginning tag it will automatically change the ending same with the ending if you change it it automatically changes the beginning tag so this just saves time you change it on one you don't have to go change the other and sometimes the other one may be way down the page you don't want to go search for it so when you change the opening tag it automatically changes the closing tag all right the next extension that we're gonna look at is called restclient so this extension is very helpful for a front-end developer or even a full-stack developer when you're working with a back-end API so if you want to see what that API is response is we can get that response from within vs code now this extension is very similar to a program called postman which is an external program the main benefit of using this extension is that it's all in vs code you don't have to go to another program so the way this extension works is let me go to my files and I'm gonna add a new file and I'm just gonna name it request dot HTTP all right now within this file I can just type a request so we'll say this is gonna be a get request and we're gonna use the JSON placeholder so HTTP JSON placeholder typing code comm slash posts and you'll see this button here pops up send request I'm gonna close the sidebar control B and so when I hit this send request it automatically opens another window here and we get our headers so we have a 200 okay and we have the JSON that it returned so JSON placeholder returns 100 posts so we can see all of those with their title body ID user ID and so this is an easy way to test and inspect your back-end api's and we can have multiple requests in here so we'll just separate them with triple hash tag and then this time let's do a post request and we'll use that same HTTP Jason placeholder posts and then this time we have to set our header so we'll set the content type to application JSON and then we'll send the data so we'll just include the title and we'll say new post and then the body this is a moon post all right so now if I hit send request on this one you'll see that we get a 201 created and then we'll get returned to us what we sent it plus an ID so we know that there was 100 posts originally and now this is 101 so that worked so this is just a very easy way to test and look at the responses that you're getting from your back-end api's all right the next one that we'll look at is called CSS peak and this one allows you to peak your CSS definition from your HTML file so this is very helpful if you have a large CSS file and it's hard to search through we can actually hit control and hover over a class and it automatically Peaks the definition for us shows us what it is and then if we click it it will take us directly to the CSS file to that actual class so very helpful speeds up the process and then if there is one that happens to have multiple definitions it'll tell you click to show and if we click that it will actually stay within the HTML file and pop up this new window where we can actually make alterations here and then just close this window without having to actually go to the CSS file so this extension helps you to navigate between your HTML and your CSS much quicker right the next extension is HTML CSS support so this adds class completion to HTML so to demonstrate that I'm gonna go to my CSS file I'm gonna go to the end and I'm going to add a test CSS auto-complete I'm just making the name very long so that it you know it's something that you don't want to keep re typing right so we'll just add something using here color blue all right so we've added this new class to our CSS now in our HTML let's say we want to a new div here with that class will use Emmet will say dot and I'll just start typing tests and there it is it's in our suggestions now so if I just hit tab on that it will automatically create that so without that extension you would have to type this entire class every single time you want to use it so again this extension just speeds up the process all right the next extension is live sass compiler and live sass compiler will compile your sass into CSS now I have a sass for beginners video where we actually install this and set it up we go into a bit more depth than I will go into here but I will show you the basics here so there are a couple of settings that you're gonna want to set once you install this so if you press ctrl or command , go to settings and just type in sass you should see live stats compiler here and then edit in Settings JSON so these are the settings that you're going to want to add so live sass compiled out settings dot formats and it depends on if you're in a production environment or a test environment but in production you'd want to set the format to compressed and then your extension name to dot min dot CSS so it's going to minify and compress automatically your CSS file and then the save path my personal preference is I always set up a distribution folder and then within that I'll have my HTML CSS and JavaScript my main sass file or s CSS file is going to be in the route outside of the distribution folder now I have these set to expanded and just normal dot CSS because in a lot of my tutorials I will write the S CSS and then show the compiled CSS and I don't want it to be minified because you wouldn't be able to read it and then the last extension here is live sass compile dot settings dot generate map and set that to false so by default it creates a map file which I have never needed to use so set that to false and that's one less file that you to track all right I'm not gonna say those settings and so to demonstrate sass let me go to my files here so like I said I would normally in the root create a SCSS folder and then within that folder I would create my main s CSS and then we'll just create some basic s CSS here all right I'm just gonna set the body margin:0 padding:0 and then I'm going to nest so let's say h1 we'll just set the color on that to blue all right so this is obviously not normal CSS we're using sass nesting so I can save this and nothing is going to happen yet because we have to hit watch sass so once we hit that our output comes up it says it's watching you can close that and what it actually did is it compiled it and created my distribution folder and then it created the CSS folder and the main CSS file so now if I look at the main that CSS file it has created or compiled it into normal CSS so if you're unfamiliar with sass there are a lot of great features one of them one of the great features is that it automatically adds vendor prefixes so if for compatibility you don't have to worry about typing all of the different WebKit sands and other things that you have to do for compatibility it does all of that for you all right let's move on to the next extension which is live server live server basically just creates a local development server with live reloading capabilities I use this in just about every one of my videos it's very helpful whenever you're creating a website so if we go to the HTML file here let me just remove what I created there alright and once you've installed that extension you'll see this button at the bottom go live so if we hit that all right the Chrome window pops up and we see our web page close the sidebar so if I were to add a paragraph here and just put type in some lorem and then hit safe it's gonna automatically refresh onto the page and we'll see that paragraph so this is a very helpful tool to speed up your website development and so if you're wondering this page here this is a very simple to-do list that we create in my JavaScript for beginners video so if you're interested in that check out that video as well and we build this from scratch alright so those are my top 10 most used extensions I do have one more extra that I want to show you it's not really an extension it's a built-in feature of vs code but I get a lot of questions about it and that is in it so Emmitt is really a video on its own but I wanted to quickly show you what Emmitt is capable of so let me create another file here and I'll name it contact HTML so within it we can drastically speed up the rate at which we can write our markup so if I type exclamation mark we get this pop up here that says Emmitt abbreviation so if I hit enter it's going to automatically create an HTML boilerplate for me and then I can tab through these highlighted areas and change whatever I would like so I'll say contact me and then hit tab again and it takes me to the body now within the body I want to create an h1 so I'll just type h1 and again and it pops up and I'm just gonna hit enter creates my h1 tag contact me alright and then let's say I want to create a list so I could say ul greater then Li times 4 and it automatically creates a list skeleton for me that I can then fill out let's say I want to create a button with an ID of email me alright so that automatically adds the ID to the button it creates all that for me let's say I want to create a paragraph with an ID or with a class of main content there we go and then within this we can create some placeholder text by using lorem and then typing in a random number I'll just say 30 and that is going to give us 30 words of lorem ipsum all right so there is a lot to omit let me know in the comments below would you like to see a video on just emmitt alright and that's going to be it for this video if you made it to the end thanks for watching so before you go if you like this video a thumbs up is appreciated I upload new content every week so hit subscribe and the bell to get notified and if you think this video or any of the videos on my channel might be helpful to someone else please share them and if my videos have helped you in any way and you have the means to do so check out my patreon I'm also on Twitter and Instagram at code stacker thanks for watching

Channel: codeSTACKr

Views: 806,323

Rating: 4.942924 out of 5

Keywords: vscode extensions, visual studio code extensions, best visual studio code extensions, top 10 visual studio code extensions, best extensions for visual studio code, top 10 vscode extensions, top 10 extensions for vscode, top visual studio code extensions, top vscode extensions, vs code extensions, top 10 extensions for visual studio code, best vscode extensions, top 10 vscode, vscode plugins, vscode, visual studio code, synthwave 84, vscode sass compiler, Vscode tutorial

Id: c5GAS_PMXDs

Length: 17min 36sec (1056 seconds)

Published: Sat Oct 19 2019

Reddit Comments

[u/codeSTACKr]

Visual Studio Code is an amazing code editor. It's open source and the community support and extensions are awesome. In this video I will cover my personal top 10 VS Code extensions that I use daily. I'll break them down into two groups, visual and functional extensions. Visual extensions help you to code through visual representation, like colors and formatting. Functional extensions help you to do something faster. I'll explain to you how they are used and why I use them.

• 00:55 - Material Theme, Material Icon Theme
• 02:10 - Prettier
• 03:30 - Bracket Pair Colorizer 2
• 04:40 - indent-rainbow
• 05:06 - Auto Rename Tag
• 05:38 - REST Client
• 08:17 - CSS Peek
• 09:17 - HTML CSS Support
• 10:21 - Live Sass Compiler
• 13:46 - Live Server
• 15:01 - Emmet

Hope this helps at least 1 person! Don't forget to SUBSCRIBE. Thank you for your support!!

[u/Tbagho]

Code runner is another best extension.

[u/[deleted]]

Thanks for this

[u/tehjrow]

I use it as a php dev and the php support is amazing!

[u/xzero_3]

👍

[u/Hi_ta]

How does it work with Java?

[u/AnonyLance]

I haven’t been able to get .ipynb to work in vs code sadly.