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:

  1. New Default Themes
  2. Keyboard Accessibility
  3. Screen Reader Support
  4. Localization
  5. Ligatures
  6. The Find Widget
  7. Input Handling
  8. Configurable Cursor Style
  9. Auto Save
  10. File Picker
  11. IntelliSense Documentation

  

Let's dig in...

Editor

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

Light+ theme

Dark+ theme

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.

Keyboard Accessibility

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.

Localization

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.

VS Code in German

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.

Ligatures for Code

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.

Find widget counters

Input Handling

We changed input handling in the editor to allow software such as UniKey (used for Vietnamese input) orAutoHotKey (used for keyboard automation) to work with VS Code.

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.

Auto Save

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 off to disable auto save, afterDelay to save files after a configured delay and onFocusChange to save files when focus moves out of the editor of the dirty file.
  • files.autoSaveDelay: Configures the delay in milliseconds when files.autoSave is configured toafterDelay.
  • 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.

File Picker

Some useful changes around the file picker (Ctrl+P) include:

  • Fuzzy matching is now enabled by default and the previously introduced settingfilePicker.alternateFileNameMatching is 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:

IntelliSense 1

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):

IntelliSense 2

 

    

 

Check out all the new features and update to Visual Studio Code v0.10.9:

https://code.visualstudio.com/updates

    

Have a good bye! Have the best bye evarrr!!!!

   - Ninja Ed

Comments