VS Code extensions that I can't live without!

[@muhammadalibhatti538]

Timestamps: 00:00 Intro 00:24 Bracket Pair Colourize 02:20 Live Server 03:57 SVG Previewer 04:59 Prettier 06:49 Auto Rename Tag 07:51 Atom One Dark 08:10 One Dark Pro 08:27 Outro

[@jsuddsjr]

Thank you! @Kevin, don't forget we love those timestamps!

[@concretefields]

"Colorize" is really useful for getting a quick preview of the colour you've set something to. It even works with custom variables!

[@keaton718]

Just like the tag colorizer, this is now built into VSC! This video probably should be updated, or maybe it has annotations that I'm not seeing because I have them turned off on YT.

[@mohammedmudassir837]

Auto close tag: Automatically add HTML/XML close tag, Color Highlight : Highlight web colors in your editor Import Cost: Display import/require package size in the editor px to rem : Converts px to rem, and vice versa

[@randy918]

Try the "Biscuits" extensions. They label what closing brackets are from. I cant go back to closing brackets that started screens ago and I don't know what they are closing.

[@techtipsuk]

Thanks man

[@Noum77]

Wow, the extensions I didn't know I needed. The comments it adds aren't real ones and they won't be saved within the file. Thanks

[@markkfinn]

oh this looks great...installed and I'll keep you posted!! Thank you!

[@randy918]

@@Noum77 I really love this extension, I can't believe only a few hundred have downloaded it. And you're right, you mentioned the magical part...the text it adds isn't a part of the saved file.

[@Axuled]

Literally went back to this video again to find your comment. Reinstalled my PC and really needed the extension again. Thanks mate, such a useful one.

[@Anadeore]

I wanted something similar to the bracket colorizer but that worked on html and found one called "color the tag name" and absolutely loved it

[@Z3ROR]

I really loved the color theme of Atom when i used that tool. Now i've moved to VSCode and was very happy that the color theme of Atom was available for VSCode. Best of both worlds for me.

[@danielbark]

Love live server and auto tag rename!

[@JZETH_]

This is my life blood right now especially as a relatively new “coder” lol

[@Brunoenribeiro]

Auto Tag Rename is one of those extensions that make you think: "why isn't it a built-in vs code feature"? So useful!

[@amitse]

@Kevin Powell, if for some reason you want to restart vscode. Maybe for extension or say your typescript language server is not working and you need a fresh restart. Press F1 and type reload window and press enter. Saves 5 seconds.

[@Brunoenribeiro]

@@JZETH_ welcome to the dev world :) hope you have a great time!

[@abdelmonemnaceur7776]

Material Icon Theme is a very nice extension, it changes the icons in the inspector for a Material ui ones!

[@Stabruder]

Thank you so much! Like, this was very useful for me. Especially the Auto Tag Rename and the Bracket Pair Colourizer 2 are the best!

[@madhousenetwork]

8:20 One dark pro is very useful in case of react JS development. differentiates a lot of things with colour.

[@danielhuang8419]

Here's a tip: if live server doesn't appear on startup or when you open a workspace, you can still right-click on an HTML file and then click "open with live server"!

[@crooker2]

I still use a 'full stack' web server in my dev environment. I use Laragon, which installs Apache, PHP and MySQL, for CMS development. And while I used to compile my css with gulp... I now use liveSass in VSCode, which makes my css compiling much easier.

[@rajivpuranwar5541]

Thanks for all the extensions... Really appreciated... Especially the auto rename tag...

[@DylanvandenBosch]

Wow, bracket-pair-colorizer! Thanks a bunch!

[@adrian20065]

I used all the extensions you used except for Prettier. The reason I don't use prettier anymore it redo the way I like my comments. My two suggestions are Material Icon Theme & Duplicate action.

[@justinoneill2837]

Isn't prettier customizable though? I'm not sure the level of customization..but I am curious about it. I have a similar reason for not using it because I like to write my css on 1 line.

[@StarcoreLabs]

As always great video. Thank you for making such awesome content!

[@rubberduckcode]

"Path Intellisense" to get auto complete when writing import statements

[@stylesg7818]

A pretty cool for me is Kite for autocompletion. Definitely deserve a try.

[@andrewglick6279]

Another similar color theme to *Atom One Dark Theme* (the one that I use and initially thought you were using) is the *One Monokai Theme*. It is also based on the *One Dark Pro* theme, so it looks very similar.

[@amitse]

@Kevin Powell, if for some reason you want to restart vscode. Maybe for extension or say your typescript language server is not working and you need a fresh restart. Press F1 and type reload window and press enter. Saves 5 seconds.

[@Cyber99221]

Liked this video a lot! Thank you. Especially the live server😂 I hate refreshing my browser. I've always used VS Code I really do believe is the best text editor out there.

[@maelstrom57]

htmltagwrap allows you to select a piece of HTML code and wrap it between tags quickly

[@nikhilmwarrier7948]

Awesome video! I can't live without Bracket Pair Colorizer and Prettier. Live Server too is really helpful... I have two recommendations: Try *Better Comments* and *Path Intellisense* Better Comments will help to colorize comments in a way that will help use them as reminders... Path Intellisense will let you quickly navigate through your project folder to get to files...

[@marcod.643]

Live Sass Compiler is also a very nice one... and MinifyAll a useful one too. By the way... Happy Christmas to everyone!

[@grzegorzt]

1. stylelint 2. indent-rainbow 3. CSS Peek 3, Better Comments 4. CodeSnap 5. Git History 6. and many others ;)

[@shreym03]

Gitlens is pretty good

[@NorthropBtwo]

Try CSS Peek, It helps when you jump a lot between html and css.

[@faythe03]

Make sure to try out Bracket Pair Colorizer 2 which is an improved version that does not slow your IDE as much!

[@donmorris4506]

Kevin, I’m a webstorm ide fan but I bought a new MacBook Air with the m1 processor and webstorm did not work very well at all. So, I switched to vs code exploration version since it was built for the arm64 processor. I have used vs code with no issues on my new m1 Mac for about 2 weeks now. I have to say that even with some robust extensions, webstorm is far superior to vs code. I think it is another example of you get what you pay for. Vs code is free and webstorm is not, but webstorm is much more robust and feature laden. I would encourage everyone to give webstorm a try if you have been using vs code. Webstorm is well worth the price.

[@crooker2]

Hey Kevin. Do you have a 'practical JavaScript' course? I. E. JavaScript for front-enders? I want to learn basic front JavaScript without jumping down the rabbit hole.

[@KevinPowell]

Nope, sorry. Check out Web Dev Simplified for JS content though, I find him really easy to follow :)

[@crooker2]

@@KevinPowell Oh, but come ON, Kevin... Your fans love YOU!! :) I have looked into Web Dev Simplified (Good channel). Honestly, I would pay you for a basic front-end Java course. You deserve my money. :)

[@DanteMishima]

Indent rainbow Highlight matching tag These two help when I'm modifying files or they're really big

[@codingwithbasir]

thanks for this helpful video. I use the kite for better suggestions in the autocomplete box.

[@aleksandrkanygin2672]

If pretter doesn't work on save, search for default formatter in settings and set it to esbenp.prettier-vscode and also search for format on save and enable it

[@Yami69]

Thanks man, this helped as it wasn't doing anything for me on save by default.

[@mohammeda7667]

I'm using live preview but devtools pane wad brought out from vs code window, how can I bring it inside the window? but make sure that dock side does not appear in devtools window and the command dock to left or bottom and others not working please help me in this?

[@BeatofIke]

The "Settings Sync" extension is also useful if you want to sync all of your vscode settings from one device to another. I believe vscode has this feature already, but I'm not sure if it is the same thing as the extension itself.

[@KevinPowell]

Yeah they added something with it recently, but I'm not sure how good it is since I'm always on the same machine.

[@SunnyVakil]

Also check for css peek and Html Css support, cool extensions!

[@simplesoul6143]

The Bracket colorizer, Does it work with tags, especially with divs inside other divs, container elements like span who inturn can contain labels or even iinput fields. Does it color the opening and closing Tag. That to me will be usefull in HTML

[@justinoneill2837]

No it doesn't work with html tags

[@benjaminfortune2707]

Regarding the auto-rename tag extension: It's really funny that a feature that's been in the Visual Studio IDE for years doesn't just come preloaded & working in VSCode; do they not have access to the original's codebase, lol? Or maybe they just didn't feel it was universally useful enough? Also, out-of-the-box in VSCode you can just put the cursor on either the opening or closing tag & press F2 (on Windows) and it'll open a quick rename dialogue that updates both (also works elsewhere in most of the OS, e.g. File Explorer). Allegedly MS has also added HTML tag rename functionality to VSCode, but it's disabled by default, google "Synced Regions". But apparently both the auto-rename extension & even the built-in synced regions have some quirks that can break code under certain circumstances, see an SO thread named "How to disable VS Code auto-rename-tag / HTML mirror feature?" & the reviews for auto-rename.

[@francescociulla]

Thank Kevin!!!

[@Dan-The-Orange]

Synthwave, I can't live without Synthwave.

[@aaronedvalson104]

Represent! That theme is the best I've come across so far.

[@badcode8029]

trippy

[@voidmind]

Auto Tag Rename sometime affects intellisense and emmet. Turns out renaming matching tags has complex edge cases that make it hard to implement without bugs. The VS code team is trying to implement it natively in VS Code but they have had to turn the feature off (last time I checked) because it was too buggy.

[@KevinPowell]

I haven't run into any issues with it so far myself, but I could see how it could be an issue. I know Codepen has it as a default, but it's a little more simple that VS Code.

[@voidmind]

@@KevinPowell Maybe the issue was only in JSX / React code. I have noticed it myself when editing JSX and noticed it happening in a Brad Traversy video on React

[@tony-k]

Actually there is no need to use Auto Tag Rename extension. VS Code already has this functionality :) Option 1: In settings enable "Linked Editing". Select either opening or closing tag, Ctrl-D and type new one. Option 2: Select opening/closing tag, press F2 and type new one. As for the additional extensions - I highly recommend SCSS Everywhere. It adds autocompletion for CSS class definitions so you don't have to worry about typos ;) marketplace.visualstudio.com/items?itemName=gencer.html-slim-scss-css-class-completion Merry Christmas everyone!

[@moonbhai3495]

Please can u tell what's theme you are using

[@jacoblockwood4034]

I like "@import-font" for CSS so you don't have to get the google fonts link yourself, but sometimes I will be typing some rule and it thinks I'm trying to import a font.

[@creativereasons7588]

i use a SSH plugin on vs code to help working on remotes, it saved me so much time!

[@hjetwd]

5:14 I turned off these pointless and annoying notifications for myself ... The idea of showing code hints is nonsense! A hint is needed to remind you how to write a tag or property, but if you don't know or don't remember how to write it, the hint won't appear because you can't physically write a tag or property. Okay, I forgot how this html tag works, but I remember how to spell it correctly. I wrote it correctly and want to refresh my memory quickly. Only in this case, the hint can help. But in the other 99% of cases, it infuriates. Why the f*ck does it appear and cover half the screen when I just clicked the mouse in the piece of code where I want to start writing? It was possible to make 1-2 seconds of delay before the appearance of this portal to hell? When the logic of this popup was written in VSCode, the UX designer apparently went out for coffee. in settings "editor.hover.enabled": false or "html.hover.documentation": false, "html.hover.references": false,

[@KevinPowell]

Cheers for that, they drive me a little nuts too, lol. They can be useful though, sometimes we are working on code we didn't write, so it can be good to understand something that someone else wrote.

[@nikhilmwarrier7948]

@@KevinPowell You can just hit ctrl-space to show them....

[@michaelharings9913]

Opposite of a power user: an animated gradient-colored ninja-soft-power user.

[@NaYeah74]

Lmao

[@neallahiany2213]

Hello Kevin, Did you change the font-family in your vs code ? Thanks by advance.

[@rohaidalikhan5391]

Prettier is great but it doesn’t support .php files, been searching alot but couldn’t get the result i want, there is a plugin for php support but i can’t set it up idk why

[@AllanLange]

Hi Kevin. Can you explain to me and probably also others on this channel, what the concept is behind color names with 100 - 900. I still haven't quite understood that part yet? Hope you understand what I'm trying to say.

[@KevinPowell]

100 is very light, 900 very dark, and 400 right in the middle, or the "default". Sort of like how font weights work

[@AllanLange]

@@KevinPowell but is each step a calculated value or do you simply just pick the colors?

[@KevinPowell]

@@AllanLange I just pick the colours, or it's based on provided ones from the design I'm working with. Makes it easy to remember, as every project uses the same system

[@yashichizx]

I use the Live Sass Compiler to compile Sass, but it hasn't been updated in almost two years. Are there any recommended plug-ins that have been updated and can compile Sass?

[@dexterdragons]

hi, prettier end with line?

[@Ouadjet86]

Error Lens is a must have to see directly errors in your code

[@ankitdahiya-bb9qo]

Hi Kevin, been looking for sass content from you. Any chance you could make available your sass course, even if it is all just pre-recorded videos? I have the syntax down, but would like to be privy to best practices from your end. Thanks

[@KevinPowell]

I'll be adding some new Sass content on KZbin soon-ish, and the course will be reopening in a few months from now :D

[@reshadaziz2856]

Check out tabnine it is a really nice extension that gives you suggestions, so you don’t have to write up everything all the time

[@manindersohal5861]

Bad things it on free trial for 30days

[@mallusrgreat]

@@manindersohal5861 huh??? its free in extensions tab

[@axMf3qTI]

I need the vim plugin.

[@vinudevaraj8884]

Amen

[@McEiring]

How does Auto Rename Tag work compared to ctrl+D?

[@brainz80]

'gitlens' is a must if you're a developer that uses git versioning. Also 'version lens' if you're using npm.

[@abhayganti8662]

the Live Sass Compiler is a life saver but since you use prepros, it's probably not the same story lol

[@FinallyCanuck]

Prettier pretties your code...pretty much.

[@AdalbertoHernandezVega]

Maybe off topic here but, can you please explain what is the difference between div ans span?

[@DFPercush]

div is a block level element, and span is inline. You can change that in CSS though. You can make a div behave like a span and a span behave like a div using display: block; or display: inline; But typically spans are just part of the text in a paragraph, and divs are for areas of the screen.

[@3vonline]

Nice video. But I can't find the link for SVG preview in the comments

[@KevinPowell]

Oops, sorry about that. marketplace.visualstudio.com/items?itemName=vitaliymaz.vscode-svg-previewer

[@frederic_millenial]

Bracket Selection : marketplace.visualstudio.com/items?itemName=guosong.bracketselection Very useful where the built-in expand selection fails when you want to select content from (), [], {}, "", ' ', etc.

[@Artix9]

Is there an extension that changes the name of classes/id's in css when you change it in html?

[@kyushirokun]

That's pretty dangerous though, how would it differentiate whether you actually want to change the class name or just want to assign a different class? The other way round though (change in css, impacts html) could be useful ^^

[@castlemoyle]

I REALLY want to use something like Prettier. But I've installed it multiple times and nothing ever happens. It doesn't format on saves, I don't see any difference after selecting an area then using the P, Format keys. Nothing. Frustrating.

[@antifa_communist]

You need to turn on "Format on Save"

[@dukestt5436]

found one for Regions in CSS, I cant get it to work the way I want it though. I might write my own!!

[@KevinPowell]

I think regions work out of the box in VS Code now. I've played with them a little, but I always forget about them.

[@dukestt5436]

@@KevinPowell ok well I was doing that completely wrong lol

[@HanielBDaniel]

Hey Kevin, if the live server doesn't show up on the bottom of the editor, instead of restarting, you can try right clicking on the file from the file tree and selecting 'open with live server'. Might work.

[@darkbluebossa]

I installed some extensions, but I am having trouble with some keyboard shortcuts that dont work when I try them. I wonder if it´s some Windows configuration or something like that, because I dont see many people with this problem. Does someody here had this thing too?

[@frederic_millenial]

Open keyboard shortcuts (CTRL+K, CTRL+S). Enable record keys in the input and use the shortcut that doesn’t work. See if there are conflict.

[@joeldcanfield_spinhead]

7:00 I LOVE Autorename Tag. Lifesaver.

[@michall996]

You actualy don't need rename tag plugin. There is a feature in vscode that can do this already. Just select tag you want to rename and click f2 or ctrl+f2

[@xxGravitonxx]

The extension allows you to rename it a lot faster though, usually it adds up quite a bit of time if you have to press a keybind to rename every time

[@KevinPowell]

Like Galactus said, it's nice not to have to bother with the extra keystrokes. It just works :). Good to know that it's in there though.

[@canpolatyavuz4086]

thank you man

[@insPIreMath]

5:09 Except PHP :(

[@kd4dpb]

cant get prettier it wont do anything i am new at vscode

[@CharlesSmall]

Thank you Kevin

[@viniciuscosta6674]

Great video! See also Debugger for Chrome...

[@JeffLundberg0]

Error Lens

[@kgaming7599]

You should try the Github Dark theme. It looks noice

[@JayantBB78]

Its time to make 2024 version of this video.

[@carolmckay5152]

1. Auto close tag marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag 2. Margin Colours marketplace.visualstudio.com/items?itemName=chinchiheather.vscode-margin-colours 3. Material Icon Theme marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme 4. Todo Tree marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree 5. Twig An extension for VS Code which provides support for the Twig syntax. marketplace.visualstudio.com/items?itemName=whatwedo.twig 6. vscode-pdf preview pdf in vs code marketplace.visualstudio.com/items?itemName=tomoki1207.pdf 7. sass-index-creator this one is kind of useful but have to change the @import to @use marketplace.visualstudio.com/items?itemName=q.sass-index-creator

[@AmodeusR]

7:15 That's kind of unnecessary... You can just select what you want to change, press ctrl + D twice and change just like the extension does.

[@avi12]

Quokka Another extension: IntelliJ Key Mapping, if he's coming from an IntelliJ IDE

[@miku6701]

Please make tutorial on Gulp

[@KevinPowell]

I have one :) kzbin.info/www/bejne/h5iwgpiCrtJ0mrc

[@MaheshKumar-lq1xm]

In a day I atleast click the "MDN Reference" atleast 50-60 times. I thought it was my problem. Even KP has the same

[@thiagoneves50]

htmltagwrap: Wraps a selection in HTML tags.

[@mohan9285]

I use "Highlight Matching Tag" extension marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag it helps me lot in highlighting the matching tags / matching words throughout the file.

[@abhishekjawanpuria4019]

live server is great for creating CSS Arts

[@AbdulBasit-xn9ld]

Don't need auto rename tag anymore vscode now has built in functionality for that

[@supertech8395]

Can you elaborate?

[@supertech8395]

Ok figured out. F2 does the trick

[@AbdulBasit-xn9ld]

Don't need F2 just enable it in the settings

[@brentmcanney2868]

@@AbdulBasit-xn9ld How about telling us where exactly to find that setting?

[@AbdulBasit-xn9ld]

@@brentmcanney2868 its editor.likedEditing set it to true

[@shashankagrawal5908]

Cool Sir

[@yashptel]

Let's be honest here, Atom one dark pro needs to be the default them on VS code.

[@rajeshpandey751]

Bracket pair colorizer is outdated. Use bracket pair colorizer 2

[@maria-lm8ze]

WakaTime, it helps me keep track of what I'm doing with my life

[@GUN2kify]

needs an external service ...

[@numerobis3949]

don't forget `the East European cheap 12 hours a day coder` extension

[@vishallondhe7298]

same for indian

[@edilebert]

I was checking out the extensions on the comments and I legit typed that whole sentence on VSCode

[@voidmind]

Prettier is overrated. VS Code already has a format on save feature that works really well. I find prettier has annoying default formatting for Javascript and I have no incentive to spend time learning the Prettier config to change it since VS Code without Prettier does a great job.

[@KevinPowell]

It's *very* useful when working in teams to make sure there is consistency throughout the team. If you're working solo, then yeah, might not be worth it.

[@Deriathan1]

I so hate Prettier. Some devs have it set on auto when saving and is making total mess of the code, mainly of HTML. It puts ending symbols ">" on new line keeping rest of the tag on previous line, etc. Also it breaks arrays that contains numbers and nulls. Number values are kept on one line and null are separated to new lines. And forget to align something out of the ordinary way, it will break it too. I know that devs are lazy, but please never use it on auto and every time you use it check the result!

[@truvc]

WebStorm or PhpStorm IDEs are far better. I tried to get VSCode to a similar level of functionality for several months. A simple example of how much better WebStorm actually understands the code you're writing: In Webstorm if you copy and paste some JS from one file to another, WebStorm automatically adds the imports you need for the code you pasted to the file you pasted into. When you autocomplete the name of a function from another module, WebStorm auto-adds the import you need. Having to manually type out imports with VsCode and getting garbage autocomplete was the most maddening part of using it.

[@amitse]

ctrl + period auto imports, right?

[@KevinPowell]

Totally get that! Not much of an issue for me based on what I do, but if you've got something that works better for you, no reason to switch!

[@heinzerbrew]

And it's free of course. right?

[@badcatdesign]

What's a good plugin to do W3C validation for both the HTML and CSS? I usually use jigsaw.w3.org/css-validator/#validate_by_input and validator.w3.org/#validate_by_input - I'm looking for something similar to github.com/Umoxfo/vscode-w3cvalidation but without the reliance on JDK.

[@KevinPowell]

No idea to be honest! Hopefully someone can chime in.

[@yurikaradzhov5202]

LiveServer is abandoned for several years, try HQ Live Server marketplace.visualstudio.com/items?itemName=hqjs.hq-live-server&ssr=false#overview it supports metalanguages and frameworks out of the box with no configuration required.

[@gregscolumn]

thanks for this

[@mrx-qi8th]

Cool,material icon theme,check that out

[@Bread-vk8fl]

I just dont like Prettier organize my comments. I like having a huge space :(

[@shivenagarwal3886]

Hey kevin How about a challenge Making a beautiful website in pure HTML No CSS no JavaScript Time for pure HTML to gain respect 😂

[@KevinPowell]

Not sure you can make something beautiful with just HTML! It's just... a black and white document, lol.

[@shivenagarwal3886]

@@KevinPowell isnt it amazing how html itself is so ...... bad, but with js and css, it go brrrrrrrrrrrrrrrrrrrrrrrr

[@_faridjunior1]

HTML End Tag Labels