Issue #93  (Accessibility Customizations)01/31/24

Advertisement
Techpresso: Get Smarter About AI and Tech in 5 mins

Receive a daily summary of the most important AI and Tech news, carefully selected from 60+ media outlets.

Techpresso

Also includes a good dose of tech tools and programming-related apps and resources. Join 30,000+ professionals from OpenAI, Meta, Google, Microsoft, Hugging Face, JP Morgan, and more.


Here are a couple of tips for customizing and using VS Code for those with accessibility needs (e.g. low vision users). Some of these might come in handy even for those who don't require a more accessible UI, but maybe you simply prefer it.

Firstly, using zoom is pretty common for many of us. You can zoom in and out at 20% increments using the menu option View > Appearance and you'll have to the option to zoom in, zoom out, or reset the zoom back to default. This can also be done using the keyboard shortcuts CTRL+= and CTRL+- for quickly zooming in and out. Usefully, whatever level outside the default that you zoom to will be kept as a saved setting in your user settings, which will persist when you open VS Code again.
 
Setting Zoom Level in VS Code

If I reset the zoom back to default, that setting will be automatically removed from my JSON settings (which is also of course reflected in the UI settings if you search for "zoom").

While the keyboard and menu methods of zooming in and out allow you to change the zoom by 20% intervals, you can actually do more fine-grained zooming when you set this manually in your user settings (JSON or UI).
 
Fractional Zoom Levels in VS Code

Notice in the screenshot above, I've set the zoom to "0.6", rather than the default increment up to "1" (which happens using the menu or keyboard shortcut when I zoom in). To zoom out fractionally using this setting, you would enter a negative value like "-0.7". This would zoom out 70% of the usual zoom out interval.

Another option you might find useful is the ability to choose one of the high contrast themes bundled with VS Code. From what I can see, these don't seem to be "installed" themes that you can uninstall in your extensions panel, but they seem to be tied right into the editor and UI. Hit CTRL-K CTRL-T to bring up your theme options, then type "high contrast" and you'll see two options, one light and one dark. Below is a screenshot of the dark high contrast theme.
 
High Contrast Theme in VS Code

That's a pretty bold theme! But it can certainly come in handy for those with vision challenges.

That's just a few things you can do with the accessibility features in VS Code. I'll discuss more in future issues.

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

VS Code Tools

Symbols — A simple file icon theme for VS Code that allows you to configure which folder and file icons are displayed.

Groovy Lint, Format and Fix — A VS Code extension to lint, format, and auto-fix Groovy and Jenkinsfile using npm-groovy-lint.

Techpresso — Receive a daily summary of the most important AI and Tech news, carefully selected from 60+ media outlets. Join 30,000+ professionals from OpenAI, Meta, Google, Microsoft, Hugging Face, JP Morgan, and more.  Sponsor 

Refraction — Extension for VS Code, Sublime, JetBrains, and others, to refactor code, generate documentation, create unit tests, and more.


VS Code Theme of the Week

vscode-ayu — This is a popular theme pack with over 2 million installs that's attractive and simple. It includes six variations that use bright colors designed for extended periods of work on a screen.

Ayu Theme for VS Code

There are 2 dark themes and one light theme and those three themes each include a "bordered" version (so it's really 3 main themes with slight variations totaling 6). The one shown above is Ayu Mirage which is my favourite. The other dark one has a darker background.

VS Code Articles & Videos

How I Created an Extension to Automate VS Code With External Scripts"I wanted to use VS Code to manage my todo lists and ended up creating a framework for VS Code automation."

📺 From Zero to Hero with Notebooks in VS Code — Live stream from the VS Code YouTube channel that takes you through a deep dive of the more advanced features in VS Code Notebooks.

Miro: The Visual Workspace for Innovation — Miro’s mind map maker is the quickest, easiest way for teams to capture, organize, and map out their ideas in a structured way.  Sponsor 

Personalizing VS Code for Dyslexia — Includes some recommendations on extensions for spellchecking, font sizes and families, line and letter spacing, colors, background, icons, and others.

Best of the Rest

Prisma Editor —  A powerful real-time visualization tool to help you visualize and edit Prisma Schema with ease.

Modeless Vim — A set of configuration files that turn Vim into a modeless editor.

📺 This VS Code Killer Just Went Open Source — A 30-minute YouTube video by Theo Browne covering the recently open-sourced Zed editor.


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
Copyright © VSCode.Email. All rights reserved.

Not affiliated with Microsoft, Visual Studio Code, or any of its trademarks.