Issue #30  (Highlight Matching Tag Extension)11/16/22

If you're like me and you deal with a lot of HTML, whether it be in email code or in regular front-end projects, it helps to have some helpful extensions that assist with going through complex HTML structures – especially if it's HTML email that uses a lot of legacy code.

One VS Code extension that I recently came across is Highlight Matching Tag. This extension indicates using some kind of styling where an HTML tag's closing tag is. The default styling for the opening and closing tags is shown in the screenshot below:
 
As long as my cursor is somewhere within the opening or closing tag, a yellow underline indicates where the opening and closing tags are. In most cases, this isn't all that necessary since it's usually clear where a closing tag is. And VS Code does allow you to 'fold' code down, which can help you track down a closing tag.

But at a glance, it's nice to be able to see exactly where a closing tag is, without the need to take any other action. And this is going to be super helpful in complex HTML for apps or even in legacy code (e.g. for HTML emails).

Once the extension is installed, you can change the way it behaves. In your settings, search for "highlight-matching-tag" and you'll get about 10 different things you can change. For example, you can change whether you want the highlighting to appear when selecting inside HTML attributes and/or within the HTML tag's content.


 

You can also change the visual styles that indicate the opening and closing tags:



The above setting will take you to the JSON settings in VS Code, where you can edit the highlight-matching-tag.styles value. It's a bit complex how to change this but you can read about it in the extension docs.

And one final thing that I like about the extension is that it adds a small message in the status bar indicating the 'path' to the currently selected tag.



In the above example, it's showing where the selected h2 tag is located in the tag hierarchy. Definitely a useful extension, so check it out if you haven't done so already.

Now on to this week's hand-picked links!

VS Code Tools

Panda Theme — A super-minimal, dark theme crafted especially for VS Code, with subtle colors that are meant to be easy on the eyes.

Todo Tree — Popular VS Code extension that quickly searches (using ripgrep) your workspace for comment tags like TODO and FIXME, and displays them in a tree view in the activity bar.

ExplainDev — AI-powered Chrome extension or VS Code extension that explains code using natural language and gives direct answers to your technical questions.

axe Accessibility Linter — VS Code extension that adds accessibility linting for HTML, Angular, React, Markdown, and Vue.

VS Code Articles

VS Code 1.73 (October 2022 Updates) — The latest updates to VS Code include ability to include/exclude folders in search, new Python extensions, Markdown automatic link updates, and more.

Create Quick Diagrams and Wireframes Using Excalidraw + VSCode — The author has used many diagramming tools in his work, so you might find this useful if you use Excalidraw or similar tooling.

See How Others' Changes Compare to Your Own in VS Code — This is about the new Repository View feature in GitLive, the IDE extension for collaborative remote development.

Manage Your Business’s Apple Devices with Jamf — Check out the Jamf Now mobile device management (MDM) solution, an Apple-only platform empowering employers to manage iPhones, Macs, iPads and Apple TVs at scale. Streamline your device management today with a free account including three devices.  Sponsor 

Best of the Rest

JetBrains Aqua — A powerful new IDE from JetBrains to develop all kinds of automated tests.

mle — A small, flexible, terminal-based text editor written in C that runs on Linux, Windows (Cygwin or WSL), FreeBSD, macOS, and more.

aretext — A minimalist text editor with Vim-compatible key bindings.

Suggestions?

If you have any link suggestions, including a tool, article, or other resources related to VS Code or another IDE, send it via DM on X: @LouisLazaris or just hit reply on this email.

That's it for this issue.

Happy VS Coding!
Louis
VSCode.Email
@LouisLazaris