VS Code Tips - Fix Multiline Comments in CSS/HTML
Рет қаралды 1,143
Күн бұрынVisual Studio Code tip showing you how to fix broken block comments behavior in CSS/HTML when toggling a comment adds a new comment instead of uncommenting the focused comment.
EDIT: Jayden Pearse noted in the comments that you can use "resourceLangId" instead of "resourceExtname," which will also work on files without an extension, as long as the correct language (CSS or HTML) is detected or set manually.
BETTER When Expression: editorTextFocus && !editorReadonly && (resourceLangId == 'html' || resourceLangId == 'css')
When Expression shown in the video: editorTextFocus && !editorReadonly && (resourceExtname == '.css' || resourceExtname == '.html')
Subscribe to CSS Weekly Newsletter:
💌 css-weekly.com/
Help support my channel
👨🎓 Get a course: masteringlinting.com/
🪧 Buy a CSS sticker pack: stickers.css-weekly.com
💖 Support me on Patreon: / cssweekly
📖 Chapters
00:00 Problem with block comments in VS Code
01:39 Use Emmet to toggle block comments in CSS/HTML
02:23 Add Keyboard Shortcut to “Emmet: Toggle Comment” command
03:33 Restrict Keyboard Shortcut to CSS & HTML files
06:49 Why you should use Emmet Toggle Comments command in VS Code
Keep up-to-date with CSS Weekly:
🐦 Twitter: / @cssweekly
🎶 TikTok: / cssweekly
🎇 Instagram: / cssweekly
📘 Facebook: / cssweekly
Keep up to date with what I'm up to:
👨💼 Blog: zoranjambor.com
💼 LinkedIn: / zoranjambor
- Zoran Jambor
#css #vscode
@spartanatreyu 22 күн бұрын
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'
@CSSWeekly 22 күн бұрын
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! 🙂
@robdevoer1 3 ай бұрын
You are a life saver! This fixes one of my biggest annoyances . ...
@CSSWeekly 3 ай бұрын
I'm thrilled to hear this, Rob! 🙂
@ahmad-murery 3 ай бұрын
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 3 ай бұрын
Oh, this makes sense, Ahmad. Thanks for sharing this! 🙏 Do you have any examples when it is useful? 🙂
@ahmad-murery 3 ай бұрын
@@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.
@CSSWeekly 3 ай бұрын
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. 🙂
@ahmad-murery 3 ай бұрын
@@CSSWeekly Commenting the selector!🤔 I love it when it makes sense. Thanks Zoran once again.
@user-ut4ij9ch5u 3 ай бұрын
great info champ🎉
@CSSWeekly 3 ай бұрын
Thanks so much! 🙏
@MirkoMancini 3 ай бұрын
Thank you 👍
@CSSWeekly 3 ай бұрын
Molim, Mirko! 🙂
@Sharon.Frenkel 3 ай бұрын
Super useful hack and thorough explanation. Thanks.
@CSSWeekly 3 ай бұрын
Thank you so much! I'm glad you think so! 🙂
@CeeTheJay 3 ай бұрын
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.
@CSSWeekly 3 ай бұрын
I’m thrilled to hear this! Thanks so much for sharing! 🙂
@iamVchan 3 ай бұрын
Good!!!
@CSSWeekly 3 ай бұрын
Thanks so much! 🙏
@FredYounan Ай бұрын
Very useful tip, thanks. Btw what's the font-face used in your editor? Looks GREAT!
@CSSWeekly 29 күн бұрын
Thanks so much, Fred! 🙏 This is "Monaspace Neon" - I go over my favorite coding fonts in this video, in case you're interested: kzfaq.info/get/bejne/l6ukZ8-fsL-RZas.html&t 🙂
@ongranot6620 3 ай бұрын
Great video! Is there a hybrid solution for .JSX files?
@CSSWeekly 3 ай бұрын
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.
@hayyanibrahim3251 3 ай бұрын
Thanks zoran for the tips, btw the what's the name of bracket extension
@CSSWeekly 3 ай бұрын
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: kzfaq.info/get/bejne/jbdpncup3p2xm58.htmlsi=s-KeTbjGuRm4VwQ2&t=209
@hayyanibrahim3251 3 ай бұрын
Thank you so much, this is very 😎
@CSSWeekly 3 ай бұрын
I’m glad it was helpful! 🙂
Sergio Outdoors
Рет қаралды 69 МЛН