TIL #4: VS Code Key Bindings, tab-size CSS Property, and Void Elements

💡 This post is part of my Today I Learned (TIL) series. Each section below describes a thing I learned today and the resources I used to learn it.

Custom Visual Studio Code Key Bindings (again)

• Why I learned this: I originally learned how to add custom key bindings in early 2022 (see the Gist). Today, I went to add a new one and discovered a new feature while reading the docs. Around March 2023 they added a built-in way to run multiple commands! I had been using the multi-command extension.
• How I used this: I didn’t end up adding a new keybinding (found a different workaround for the problem I was having) but I did update my configuration file to use the built-in runCommands and removed the previous extension. I’m super minimalist about VS Code extensions so I’m glad I was able to remove one! I was also able to remove a custom keybinding that wrapped selected text in hyperlink syntax. Turns out if you have a URL on your clipboard, select text, and hit cmd+v, a hyperlink is automatically created. I’ve published a new Gist with my new file!
• Resource I referenced: Running multiple commands - VS Code docs.

CSS property tab-size

• Why I learned this: On my business website, Semantic Fish, I’m working on a series of component demos and writeups. I want to be able to write React code for the interactive part and also have a code snippet shown in HTML. I don’t want to have to write both, or write the content in Markdown or MDX. I’m pretty happy at the moment with just writing in JSX. But back to the HTML code snippet—I also want it to have syntax highlighting. Final thing: I don’t want to install a third-party library. So I made it a fun mini project to build a CodeBlock component using brand colors for the syntax highlighting.
• How I used this: My component parses React children passed in the CodeBlock to build an array of code lines. It does this recursively, since each element in children can have multiple child elements of its own. Each time my recursion function is called, I increment its second argument (called indentBy) by 1. Then just before the function returns its lines of code, I add indentBy tab characters (	) to the beginning of the line. I could use space characters instead, but the width of those isn’t customizeable like tab characters. Eventually it’ll be cool to add a feature to my CodeBlock that enables anyone to customize the tab width to whatever helps them read the code easiest. For now I’ve set a default tab-size: 2 on the CodeBlock’s code HTML element.
• Resource I referenced: tab-size - MDN.

Void Elements

• Why I learned this: Part of working on the aforementioned CodeBlock component involved needing to know which HTML elements have end tags or just a > character (aka > in HTML). Turns out there’s a name for these kinds of elements! You guessed it: they’re called void elements. Also, self-closing tags (<tag />) do not exist in HTML. Today I learned! (bad-dum-tssss)
• How I used this: Using the list from MDN, I created an array constant of tag names near my recursive function (mentioned in the previous section). For each line of code I build up in the function, I check if the element’s tag name is in the array (using Array.includes).
• Resource I referenced: Void element - MDN.