TOP 10 VSCode extensions for WebDevelopers

00:01 hey guys it's David from MD bootstrap 00:04 comm and in this video I'm gonna show 00:06 you top 10 extensions for visual studio 00:08 code which every web developer should 00:11 know before we start if you don't want 00:14 to miss more videos like that don't 00:16 forget to subscribe to our Channel and 00:19 turn on notifications now let's get 00:22 started so visual studio code has this 00:24 amazing feature called 00:26 marketplace although it's interesting 00:28 because I never seen any paid extension 00:31 there but anyway 00:33 video studio called marketplace allows 00:35 us to install extension which makes our 00:38 life much easier so in order to install 00:40 an extension simply open extension tab 00:43 so you can do it either by clicking on 00:46 this icon or just press ctrl shift X 00:50 shortcut then search for an extension 00:55 and simply click install as simple as 00:59 that 00:59 number one live server if I could choose 01:03 only one single extension for my visual 01:06 studio code did most probably it will be 01:08 a live server so if you are bored with 01:11 refreshing your website every time you 01:14 are making even a tiny change to your 01:16 project this will turn your web 01:19 development life upside-down so what it 01:22 does it runs a tiny server for you which 01:25 you can run simply by clicking open with 01:28 live server which will open your website 01:33 with a project in your default browser 01:35 and every time you make a change to your 01:38 project let's say I'm going to add new 01:41 here and save the file it will refresh 01:44 it automatically in our browser second 01:48 very important argument for using it is 01:50 that Ajax requests don't work with the 01:53 file protocol so if you open your page 01:56 just in your file explorer it will use 01:59 this file protocol and Ajax calls won't 02:02 be available for you so thanks to using 02:05 it we are using a proper HTTP protocol 02:09 it can even support HTTP so your server 02:13 and 02:13 I can fetch content through JavaScript 02:16 number two prettier formatting code 02:20 might be painting yes but it definitely 02:23 doesn't have to with this amazing 02:25 extension you can format your code with 02:28 the single comment and it will take care 02:30 about all the space in indian squads etc 02:33 so just look at this messy piece of code 02:38 over here so we have some HTML here 02:40 which doesn't have indents and they're 02:43 messy some comments we also have a piece 02:46 of JavaScript here so as you can see 02:48 there is like space before but not after 02:51 there are some semicolons missing and 02:54 this this for this doesn't also have a 02:58 newline and so on so with a single 03:01 comment just by pressing ctrl shift P 03:04 and then searching for format document I 03:07 can or actually this extension will take 03:10 care of that of everything so as you can 03:12 see it will indent all the code nicely 03:14 format all the comments for us and also 03:17 fix all the issues here so it changed 03:20 the spacing it added missing semicolon 03:24 and even added new lines what is even 03:28 more awesome about it is that you can 03:30 format your code on save which means 03:33 that you will never commit unformatted 03:36 code as before saving the file prettier 03:40 will format it for you so let me just 03:43 revert this change the messy code now 03:45 I'm going to save the file so I'm going 03:46 to click file save and prettier will 03:50 take care of the code on my behalf and 03:54 obviously you'll never copy a whole 03:57 solution from stack overflow 03:59 [Music] 04:01 but let's say that you copy some piece 04:03 of code from a documentation then 04:06 Twitter it will also take care of cult 04:09 pasted in that way 04:11 now have a look at this example I have 04:13 this piece of nasty code here I'm gonna 04:16 copy it and now once I'm gonna paste it 04:22 again it will automatically format it 04:25 for me 04:27 number three better comments it is said 04:31 that there are only two kinds of 04:33 developers those which use comments and 04:36 those who don't and if you are in the 04:38 first group you probably know that 04:40 comments can be very helpful sometimes 04:42 they might be messy sometimes they might 04:44 get outdated but did you know that they 04:47 can be colorful well at least if you use 04:50 this extension with this extension you 04:52 will be able to categorize your 04:54 annotation into others queries to adduce 04:56 highlights and you'll be able to comment 04:59 your comments yes I just said that 05:02 comment out your comments let's have a 05:04 look so if you have comments like this 05:07 you can easily add some colors to it as 05:10 simply as that so if I'm going to add 05:14 some star it will highlight the 05:16 important message if you add the 05:18 explanation mark it will set the 05:20 pre-heated then you can even ask 05:23 questions in your comment easily define 05:27 places where you should get back and do 05:32 something you can bind your parameters 05:35 with your code and as I said you can 05:38 even indicate that this comment is 05:41 unnecessary and it shouldn't be there so 05:44 you just simply comment your comments or 05:46 someone else comments out number four is 05:50 bracket / colorizer 05:53 sentence logic or data structure which 05:55 you implement may be a quite complex and 05:58 require a few level of indents if this 06:00 is case for you you will probably have 06:03 this extension it does tiny but a very 06:07 useful thing it color your brackets pair 06:10 separately so you can easily find a 06:13 corresponding 06:14 closing bracket so if you ever work with 06:17 like huge jason's or other complex 06:22 structure like this one you're gonna 06:24 love it you can see it's showing you 06:26 nicely which code which blog of code is 06:29 included inside this corresponding 06:33 bracket per number five is six code 06:39 snippets do you know that you can define 06:42 your own snippets in Visual Studio code 06:44 let me show you mine for console.log so 06:47 instead of typing console dot log every 06:50 time and sometimes making mistake 06:53 what I did like this i what i did i just 06:57 created a new snippet for it so now 07:00 every time I'm typing log and pressing 07:03 tab key it will create this snippet for 07:06 me so you can define your own snippets 07:09 here in Visual Studio code but what you 07:12 can also do is to install snippet 07:15 created by others so is six snippets 07:19 comes with many predefined very useful 07:22 snippets in different aspects like you 07:24 have snippets for imports variables 07:34 loops and many many other custom 07:42 snippets so I strongly encourage you to 07:47 go and check website of this extension 07:50 and see what kind of snippets are there 07:53 for you and if you're gonna find there 07:55 some snippets for code which you often 07:58 use then definitely you're gonna love it 08:01 and in case you don't you can create 08:03 your own snippet like I did with the 08:06 console.log number six is lint window is 08:12 a tool that analyzed source code to flag 08:14 programming errors back stylistic errors 08:17 and suspicious constructs the extension 08:19 use es library installed in the open 08:22 workspace folder so you have either 08:24 install it inside your project by NP 08:27 or install it globally on your computer 08:31 so what does extension does it actually 08:34 shows you linter errors in a nice way in 08:38 this problem tab so you can define your 08:42 own settings for linter or you use 08:45 predefined ones which are shared by 08:48 other developers like this Airbnb 08:50 JavaScript style guide which basically 08:54 provide you a set of rules and don't get 08:59 it wrong for example it doesn't mean 09:03 that if you are writing code in that way 09:07 it's a really wrong it's just like 09:10 assumption so developers assume that 09:13 this is a better way for some reason and 09:15 they agreed to use this in that matter 09:19 so if you want to learn more about 09:21 linters itself please check the 09:24 description down below where you'll find 09:26 the link to another tutorial dedicated 09:28 to it and don't forget to subscribe and 09:31 turn on notification this way you never 09:34 miss any new tutorial regarding tools 09:36 like linter and as I mentioned there are 09:38 multiple settings you can set using 09:41 linter but it's perfectly fine to start 09:44 with the default one like unused 09:45 variables so if you look here we have 09:48 two variables and we have two errors in 09:52 our problem tabs which says that both of 09:54 the variables are assigned to a value 09:57 but they are never used so obviously as 10:00 soon as we use it the warning will 10:04 disappear 10:06 number seven is get lines if you work 10:10 with git repositories then this 10:11 extension is definitely for you it 10:13 allows you to browse the entire history 10:16 without leaving visual studio code 10:19 window so you can check who made a given 10:22 change down to a single line so you can 10:26 check that this line was done by Bartek 10:28 while this one was done by user Martucci 10:31 and you can see all this name over here 10:34 you can see entire history of the file 10:39 and see which 10:41 Komets it consists of so as you can see 10:44 we have a mix of different comets here 10:46 you can obviously check the history of 10:49 the file you can blame comet you can go 10:52 to in this case to a github repository 10:56 github page so basically you can do 11:01 anything you've been doing so far using 11:06 git common line so if you are working 11:10 with git repositories with your friends 11:13 with your colleagues from work this is 11:16 definitely must-have for you number 11:19 eight 11:20 CSS peak another great extension for 11:24 front-end developers allows us to easily 11:26 check details of a given CSS class in a 11:29 blink of the eye so what we have to do 11:31 is just to press ctrl and click on a 11:35 given class name and it will show us its 11:38 definition all the properties and also 11:42 allows us to easily jump into the file 11:45 which contain this CSS class definition 11:49 number nine code spell checker sometimes 11:54 back I asked you in a Twitter what are 11:56 the most common types which you make 11:59 while coding and I've got dozens of 12:01 different answers so if you want to 12:03 avoid typing again tour instead of true 12:06 or container instead of container this 12:10 extension is for you what it does it's 12:14 simply highlight all the mistakes and 12:21 allows us quickly to fix it by pressing 12:24 ctrl + dot key to suggest us a proper 12:30 name like 12:34 container instead of constant in number 12:39 ten material team so the last one isn't 12:42 actually an extension but team however I 12:45 really love it and many times you ask me 12:48 why my V is she looks different than 12:50 yours so this is actually a team which 12:53 changes how V s code looks like well it 12:56 also does it adds support for many 12:58 languages in terms of coloring syntax 13:00 provides you file and follower I con so 13:03 you could fast refine your files you are 13:05 looking for and many many more and 13:08 obviously we as an MDB team we are big 13:12 fan of material design even when it 13:14 comes to VC design so if you want to try 13:17 it just go to extension and search for 13:21 material team and you will be able to 13:24 install it with just a single click okay 13:28 thank you guys for watching this video I 13:30 hope it was useful for you and he gonna 13:33 find all this extension very very handy 13:36 in your web development journey if you 13:38 join it please leave a like and 13:41 subscribe to our channel down below 13:43 turn on notification there are just 13:46 top-10 extension but there are more 13:49 fantastic extension so let's make a deal 13:52 if this video hits 50,000 views I'm 13:55 gonna create a follow-up video with next 13:58 10 amazing extension for developers 14:01 which I use on a daily basis and once we 14:04 reach 100,000 views I'm gonna create a 14:07 new one this time including extension 14:10 not only for the front-end developers 14:12 but also for a full stack so deal so 14:16 these were my top 10 extensions for jaws 14:19 to your code and what are yours let me 14:22 know in the comments