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
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.
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.
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.
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"!
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.
@@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.
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.
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.
@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.
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.
@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.
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...
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!
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.
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.
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.
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.
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 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. :)
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.
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.
@@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
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
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.
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
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
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,
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.
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
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.
@@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
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?
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.
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?
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?
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.
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.
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.
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
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.
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
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.
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 ^^
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!
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.
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.
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.
All personal preference. If I'm working on a project, rather than a tutorial, I'll set up browser sync as it makes it easier to preview across browsers and different devices. For quick things, anything that let's you preview it live is great.
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
"Colorize" is really useful for getting a quick preview of the colour you've set something to. It even works with custom variables!
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.
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
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.
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
Thank you! @Kevin, don't forget we love those timestamps!
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.
1. stylelint
2. indent-rainbow
3. CSS Peek
3, Better Comments
4. CodeSnap
5. Git History
6. and many others ;)
Gitlens is pretty good
Material Icon Theme is a very nice extension, it changes the icons in the inspector for a Material ui ones!
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"!
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!
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.
Thanks man
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
oh this looks great...installed and I'll keep you posted!! Thank you!
@@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.
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.
Live Sass Compiler is also a very nice one... and MinifyAll a useful one too. By the way... Happy Christmas to everyone!
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.
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.
A pretty cool for me is Kite for autocompletion. Definitely deserve a try.
Thanks for all the extensions...
Really appreciated...
Especially the auto rename tag...
@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.
8:20 One dark pro is very useful in case of react JS development. differentiates a lot of things with colour.
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.
Wow, bracket-pair-colorizer! Thanks a bunch!
Love live server and auto tag rename!
This is my life blood right now especially as a relatively new “coder” lol
Auto Tag Rename is one of those extensions that make you think: "why isn't it a built-in vs code feature"? So useful!
@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.
@@JZETH_ welcome to the dev world :) hope you have a great time!
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...
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!
Make sure to try out Bracket Pair Colorizer 2 which is an improved version that does not slow your IDE as much!
thanks for this helpful video. I use the kite for better suggestions in the autocomplete box.
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.
htmltagwrap allows you to select a piece of HTML code and wrap it between tags quickly
Thank Kevin!!!
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.
Try CSS Peek, It helps when you jump a lot between html and css.
Prettier pretties your code...pretty much.
i use a SSH plugin on vs code to help working on remotes, it saved me so much time!
As always great video. Thank you for making such awesome content!
Also check for css peek and Html Css support, cool extensions!
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.
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.
Yeah they added something with it recently, but I'm not sure how good it is since I'm always on the same machine.
"Path Intellisense" to get auto complete when writing import statements
'gitlens' is a must if you're a developer that uses git versioning. Also 'version lens' if you're using npm.
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.
Nope, sorry. Check out Web Dev Simplified for JS content though, I find him really easy to follow :)
@@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. :)
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
Bad things it on free trial for 30days
@@manindersohal5861 huh??? its free in extensions tab
Synthwave, I can't live without Synthwave.
Represent! That theme is the best I've come across so far.
trippy
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.
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.
@@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
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
Thanks man, this helped as it wasn't doing anything for me on save by default.
Opposite of a power user: an animated gradient-colored ninja-soft-power user.
Lmao
Thank you Kevin
Error Lens is a must have to see directly errors in your code
7:00 I LOVE Autorename Tag. Lifesaver.
the Live Sass Compiler is a life saver but since you use prepros, it's probably not the same story lol
thank you man
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.
Quokka
Another extension: IntelliJ Key Mapping, if he's coming from an IntelliJ IDE
Hello Kevin, Did you change the font-family in your vs code ? Thanks by advance.
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
No it doesn't work with html tags
Great video! See also Debugger for Chrome...
Indent rainbow
Highlight matching tag
These two help when I'm modifying files or they're really big
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
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
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.
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,
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.
@@KevinPowell You can just hit ctrl-space to show them....
Its time to make 2024 version of this video.
In a day I atleast click the "MDN Reference" atleast 50-60 times. I thought it was my problem.
Even KP has the same
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
I'll be adding some new Sass content on UA-cam soon-ish, and the course will be reopening in a few months from now :D
live server is great for creating CSS Arts
Cool Sir
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.
100 is very light, 900 very dark, and 400 right in the middle, or the "default". Sort of like how font weights work
@@KevinPowell but is each step a calculated value or do you simply just pick the colors?
@@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
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?
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.
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?
You should try the Github Dark theme. It looks noice
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?
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.
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.
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.
htmltagwrap: Wraps a selection in HTML tags.
found one for Regions in CSS, I cant get it to work the way I want it though. I might write my own!!
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.
@@KevinPowell ok well I was doing that completely wrong lol
Nice video. But I can't find the link for SVG preview in the comments
Oops, sorry about that. marketplace.visualstudio.com/items?itemName=vitaliymaz.vscode-svg-previewer
WakaTime, it helps me keep track of what I'm doing with my life
needs an external service ...
Maybe off topic here but, can you please explain what is the difference between div ans span?
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.
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
Let's be honest here, Atom one dark pro needs to be the default them on VS code.
Please can u tell what's theme you are using
Don't need auto rename tag anymore vscode now has built in functionality for that
Can you elaborate?
Ok figured out. F2 does the trick
Don't need F2 just enable it in the settings
@@AbdulBasit-xn9ld How about telling us where exactly to find that setting?
@@brentmcanney2868 its editor.likedEditing set it to true
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.
ctrl + period auto imports, right?
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!
And it's free of course. right?
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
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.
You need to turn on "Format on Save"
Is there an extension that changes the name of classes/id's in css when you change it in html?
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 ^^
I need the vim plugin.
Amen
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!
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.
How does Auto Rename Tag work compared to ctrl+D?
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.
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.
don't forget `the East European cheap 12 hours a day coder` extension
same for indian
I was checking out the extensions on the comments and I legit typed that whole sentence on VSCode
hi, prettier end with line?
Bracket pair colorizer is outdated. Use bracket pair colorizer 2
I just dont like Prettier organize my comments. I like having a huge space :(
Cool,material icon theme,check that out
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.
thanks for this
Hey kevin
How about a challenge
Making a beautiful website in pure HTML
No CSS no JavaScript
Time for pure HTML to gain respect 😂
Not sure you can make something beautiful with just HTML! It's just... a black and white document, lol.
@@KevinPowell isnt it amazing how html itself is so ...... bad, but with js and css, it go brrrrrrrrrrrrrrrrrrrrrrrr
Error Lens
5:09 Except PHP :(
HTML End Tag Labels
Please make tutorial on Gulp
I have one :)
ua-cam.com/video/QgMQeLymAdU/v-deo.html
Live Server?
Grow up people, I use "Browser Preview" though... View it inside VSCode and LIVE.
All personal preference. If I'm working on a project, rather than a tutorial, I'll set up browser sync as it makes it easier to preview across browsers and different devices. For quick things, anything that let's you preview it live is great.
LoL. I can't click on any of the drop downs using Browser Preview and it isn't updating when I save. Is this how it is intended to work?
cant get prettier it wont do anything i am new at vscode