PROBLEM IN THIS VIDEO (and solution below): Using resourceExtname only works on files that have those file extensions on the end of their file names. It doesn't work for files that have a different file extension but have their language set (either manually, or autodetected) inside vscode to be html or css, and it also doesn't work for files that haven't been saved yet. Instead of using resourceExtname, you should instead use resourceLangId Here is my "Change When Expression" below: editorTextFocus && !editorReadonly && (resourceLangId == 'html' || resourceLangId == 'css') Note: this will be expanded to the following upon save because vscode's when expressions don't want to have to worry about brackets (it's okay, it does the same thing): editorTextFocus && !editorReadonly && resourceLangId == 'css' || editorTextFocus && !editorReadonly && resourceLangId == 'html'
Thanks so much for this, Jayden! 🙏 I wasn't aware that resourceLangId could be used for this-it really is a nice improvement! 🤩 Again, thanks so much for taking the time to share your insight on this and share a better solution! 🙂
I just tried this your solution, though it worked, but you can't multi-line comment an embedded css with in your html file, as it uses the default Html "" comment because of using resouceLangId. So I think his (@cssweekly) solution is the better one as it allows multi-line comment "/* */" of embedded css inside the html file.
Thanks! 😊 This solution should work with .JSX files. Try adding this to your settings.json: "emmet.includeLanguages": { "javascript": "javascriptreact" } And include .jsx files in your keybinding When Expression: (resourceExtname == '.jsx') I tried it out a bit, and it seems to be working, but I haven't spent much time on it, so I'm not aware there are any kinks you should know about.
Thanks so much, Fred! 🙏 This is "Monaspace Neon" - I go over my favorite coding fonts in this video, in case you're interested: th-cam.com/video/aEt4lnKY-5w/w-d-xo.html&t 🙂
I've just noticed that if you're commenting HTML it will include both opening and closing tags of partially selected elements which can be useful sometimes. There is a keyboard shortcut for multiline comment in JS (Shift + Alt + A) but again the same problem happens when we want to toggle the comment on/off. Thanks Zoran
@@CSSWeekly Imagine that I selected a few lines of HTML and I accidently commented a line contains an opening tag while the closing tag belongs to another line, the HTML will be a big mess (depending on the complexity of the structure), So I think it's better for HTML block comment to consider the whole html element.
Yes, indeed. 💯 Emmet Comment does consider this and comments out the entire HTML element. To an extent in CSS as well. If you try to comment out just the selector, for example. I probably should have shown this in the video. 🙂
Thanks so much, Hayyan! 🙏 This is actually one of the built-in settings in VS Code: "Editor › Bracket Pair Colorization" I show how to enable it in one of my older videos: th-cam.com/video/WQ9jhxy7Mkk/w-d-xo.htmlsi=s-KeTbjGuRm4VwQ2&t=209
You've done it again, Zoran! This is a VS Code issue that has driven me crazy for ages, your tip will increase my productivity exponentially. I always look forward to your helpful posts.
PROBLEM IN THIS VIDEO (and solution below):
Using resourceExtname only works on files that have those file extensions on the end of their file names. It doesn't work for files that have a different file extension but have their language set (either manually, or autodetected) inside vscode to be html or css, and it also doesn't work for files that haven't been saved yet.
Instead of using resourceExtname, you should instead use resourceLangId
Here is my "Change When Expression" below:
editorTextFocus && !editorReadonly && (resourceLangId == 'html' || resourceLangId == 'css')
Note: this will be expanded to the following upon save because vscode's when expressions don't want to have to worry about brackets (it's okay, it does the same thing):
editorTextFocus && !editorReadonly && resourceLangId == 'css' || editorTextFocus && !editorReadonly && resourceLangId == 'html'
Thanks so much for this, Jayden! 🙏
I wasn't aware that resourceLangId could be used for this-it really is a nice improvement! 🤩
Again, thanks so much for taking the time to share your insight on this and share a better solution! 🙂
Thanks for this update. 🦾
I just tried this your solution, though it worked, but you can't multi-line comment an embedded css with in your html file, as it uses the default Html "" comment because of using resouceLangId. So I think his (@cssweekly) solution is the better one as it allows multi-line comment "/* */" of embedded css inside the html file.
That's a fantastic catch and point, Greg! It didn't even cross my mind. Thanks so much for sharing! 🙏
Great video!
Is there a hybrid solution for .JSX files?
Thanks! 😊
This solution should work with .JSX files.
Try adding this to your settings.json:
"emmet.includeLanguages": {
"javascript": "javascriptreact"
}
And include .jsx files in your keybinding When Expression: (resourceExtname == '.jsx')
I tried it out a bit, and it seems to be working, but I haven't spent much time on it, so I'm not aware there are any kinks you should know about.
You are a life saver! This fixes one of my biggest annoyances . ...
I'm thrilled to hear this, Rob! 🙂
Thanks for this man. This has cured my headache 🥰
I’m really happy to hear this! 🙂
Thank you 👍
Molim, Mirko! 🙂
Good!!!
Thanks so much! 🙏
great info champ🎉
Thanks so much! 🙏
Super useful hack and thorough explanation. Thanks.
Thank you so much! I'm glad you think so! 🙂
Very useful tip, thanks. Btw what's the font-face used in your editor? Looks GREAT!
Thanks so much, Fred! 🙏
This is "Monaspace Neon" - I go over my favorite coding fonts in this video, in case you're interested: th-cam.com/video/aEt4lnKY-5w/w-d-xo.html&t 🙂
I've just noticed that if you're commenting HTML it will include both opening and closing tags of partially selected elements which can be useful sometimes.
There is a keyboard shortcut for multiline comment in JS (Shift + Alt + A) but again the same problem happens when we want to toggle the comment on/off.
Thanks Zoran
Oh, this makes sense, Ahmad. Thanks for sharing this! 🙏
Do you have any examples when it is useful? 🙂
@@CSSWeekly Imagine that I selected a few lines of HTML and I accidently commented a line contains an opening tag while the closing tag belongs to another line, the HTML will be a big mess (depending on the complexity of the structure),
So I think it's better for HTML block comment to consider the whole html element.
Yes, indeed. 💯
Emmet Comment does consider this and comments out the entire HTML element. To an extent in CSS as well. If you try to comment out just the selector, for example. I probably should have shown this in the video. 🙂
@@CSSWeekly Commenting the selector!🤔 I love it when it makes sense.
Thanks Zoran once again.
Thanks zoran for the tips, btw the what's the name of bracket extension
Thanks so much, Hayyan! 🙏
This is actually one of the built-in settings in VS Code: "Editor › Bracket Pair Colorization"
I show how to enable it in one of my older videos: th-cam.com/video/WQ9jhxy7Mkk/w-d-xo.htmlsi=s-KeTbjGuRm4VwQ2&t=209
Thank you so much, this is very 😎
I’m glad it was helpful! 🙂
You've done it again, Zoran! This is a VS Code issue that has driven me crazy for ages, your tip will increase my productivity exponentially. I always look forward to your helpful posts.
I’m thrilled to hear this! Thanks so much for sharing! 🙂