Visual Studio Code - NEW FEATURES: 11 Funtastic Editor Updates (New Themes, Keyboard Accessibility, Screen Reader, Localization, Ligatures, Find Widget, Input Handling, Cursor Style, Auto Save, File Picker, & IntelliSense Documentation)
The January release of Visual Studio Code 0.10.8 features 11 big Editor Improvements:
- New Default Themes
- Keyboard Accessibility
- Screen Reader Support
- The Find Widget
- Input Handling
- Configurable Cursor Style
- Auto Save
- File Picker
- IntelliSense Documentation
Let's dig in...
New Default Themes
The Light and Dark themes have been in the center of attention recently as colors were added and removed again. More colors became visible with the switch to TextMate tokenizers in November. In December, we decided to remove some of the newly added colors again to stay compatible with the classic Visual Studio Light and Dark themes.
From the feedback in GitHub issues 1270, 1470, and others, we learned that there are fans of both the classic Visual Studio Light and Dark themes as well as the more colorful versions. So for the January release, we decided to bring the colors back with two new built-in themes: 'Light+' and 'Dark+'. If you installed the theme preview as an extension, you can now uninstall it.
In addition to the 4 major colors in the Visual Studio themes (comments, strings, numbers and keywords), the 'plus' themes add colors for:
- control flow keywords
- type names
- function names
- variable and parameter names
New installations will get the new Dark+ theme as the default. Existing installations using the previous Light or Dark themes can switch to the new Dark+ or Light+ theme using
Color Theme command.
You will find that VS Code provides an exhaustive list of commands in the Command Palette (F1) so that you can run VS Code without using the mouse. However, some parts of the UI could not be operated without using the mouse. We made a pass over these locations and added support to use the Tab key to jump between UI controls that you can interact with. Using Tab or Shift+Tab to jump between elements with actions in the UI is a very common pattern for keyboard accessibility. In addition to that, we now also draw an indicator around the UI element once the element gains focus.
Some areas where you can now jump to using keyboard only:
- View switcher
- Header of collapsible sections in a view to expand/collapse
- Actions in views and sections
- Actions for items in the tree
This is just the beginning of our journey to become more keyboard accessible, expect more areas to follow in the future!
Experimental screen reader support in the editor
We have added an experimental mode that can be enabled with the
editor.experimentalScreenReaderkey in settings or for the current session with Ctrl+Shift+R. This causes the editor to place all the current text in the opened file inside the
<textarea> we use for user input. We have done our initial testing with the NVDA screen reader on Windows and have uncovered some serious performance issues and glitches caused by Chromium which we continue to work on. We have also added Alt+F1 that presents a tooltip explaining how to toggle this mode on and off. We have also improved keyboard navigation around Tab, specifically all read-only editors no longer trap the Tab key. Also, Ctrl+M continues to act as a toggle for trapping Tab.
We also started work on localizing VS Code for different locales. We put tooling in place to externalize strings and to create language bundles. The screen shot below shows VS Code running under a German locale.
Please note that the translation effort for VS Code has not been completed yet and it will still take a while until we ship VS Code for languages other than English.
Ligatures for VS Code
VS Code now supports fonts with programming ligatures, like Hasklig and Fira Code. Those fonts provide compositions for character sequences commonly used in programming, as
!= etc. Enable ligatures with new
editor.fontLigatures setting and pick a font with programming ligatures. Special thanks to @mattblagden for initiating this.
Find Widget Improvements
The Find widget was updated to make all of its functions work regardless of the number of results. It is now possible to Find, Replace, etc. well beyond the first 1000 find matches. For performance reasons, the Find widget still only highlights the first 1000 matches. We have also improved the tab order in the widget.
The refactoring allowed us to introduce the "X of Y" display, such that now you can tell in a glance how many results and where you are in that list.
We also added two new actions, "Find Next Selection" (Ctrl+F3) and "Find Previous Selection" (Ctrl+Shift+F3), that allow you to jump to the next or previous matches without losing editor focus. Thanks to @ajkerrigan, there are now key bindings for the "Replace" and "Replace all" actions.
Configurable Cursor Style
We added a new editor option
editor.cursorStyle that can be set to
"block". Special thanks to@markrendle for his pull request.
VS Code always supported automatically saving dirty files after one second (
File | Auto Save). We received a lot of feedback that users want more control over when VS Code should save dirty files. The setting is now in the
settings.json configuration file and provides more options:
files.autoSave: Can be
offto disable auto save,
afterDelayto save files after a configured delay and
onFocusChangeto save files when focus moves out of the editor of the dirty file.
files.autoSaveDelay: Configures the delay in milliseconds when
files.autoSaveis configured to
- This setting can be configured either globally for the user or per workspace through the workspace settings (
Preferences | Workspace Settings).
Note: If you had
Auto Save enabled previously, we will migrate your setting into the
settings.json file automatically. You will not see any dirty indicators in the UI if you configure auto save for 1 second or below. In all other cases, you will see the dirty indicators throughout the UI.
Some useful changes around the file picker (Ctrl+P) include:
- Fuzzy matching is now enabled by default and the previously introduced setting
filePicker.alternateFileNameMatchingis no longer needed.
- You can open any file (including line/column pattern at the end) that exists on disk by typing the full path or full workspace relative path even if your exclude settings hide it otherwise.
Full IntelliSense Documentation
We improved the interaction and rendering of IntelliSense suggestions which have more complete documentation. A blue icon will appear on the right of the suggestion's documentation:
Clicking it will display the full documentation for that suggestion. It's also possible trigger IntelliSense a second time to enter this mode (Ctrl+Space):
Check out all the new features and update to Visual Studio Code v0.10.9:
Have a good bye! Have the best bye evarrr!!!!
- Ninja Ed