rogerxu / rogerxu.github.io

Roger Xu's Blog
2 stars 2 forks source link

Visual Studio Code - 60+ #264

Open rogerxu opened 2 years ago

rogerxu commented 2 years ago

Release version 1.60

Visual Studio Code August 2021

Automatic language detection

Programming language detected when you paste into VS Code.

Built-in fast bracket colorization

Fast bracket matching and colorization for large files.

Side by side comparison with bracket pair colorization on and off

Bracket pair colorization can be enabled by setting "editor.bracketPairColorization.enabled": true. All colors are themeable and up to six colors can be configured.

Settings editor syntax highlighting

Rich syntax highlighting for setting description code blocks.

Syntax highlighting of TypeScript code in the Settings editor

Inline suggestions in autocomplete

Inline suggestions can now extend the suggestion preview when the autocomplete widget is shown. Pressing Tab once will still only accept the autocomplete suggestion. Pressing Tab a second time will then accept the inline suggestion.

This feature requires the suggest preview to be enabled ("editor.suggest.preview": true).

Custom terminal glyph rendering

Better display of box drawing and block element characters.

Set debugging Watch values

Change watched values during a debugging session.

Shows WATCH view with the Set Value action selected in the context menu

JavaScript/TypeScript inlay hints

Inline hints for parameter names and types, and more.

Inlay hints add additional inline information to source code to help you understand what the code does.

Parameter name inlay hints show the names of parameters in function calls:

Parameter name inlay hints

This can help you understand the meaning of each argument at a glance, which is especially helpful for functions that take Boolean flags or have parameters that are easy to mix up.

To enable parameter name hints, set javascript.inlayHints.parameterNames.enabled or typescript.inlayHints.parameterNames.enabled settings. There are three possible values:

Variable type inlay hints show the types of variables that don't have explicit type annotations.

Settings - javascript.inlayHints.variableTypes.enabled and typescript.inlayHints.variableTypes.enabled

Variable type inlay hints

Property type inlay hints show the type of class properties that don't have an explicit type annotation.

Settings- javascript.inlayHints.propertyDeclarationTypes.enabled and typescript.inlayHints.propertyDeclarationTypes.enabled

Property type inlay hints

Parameter type hints show the types of implicitly typed parameters.

Settings - javascript.inlayHints.parameterTypes.enabled and typescript.inlayHints.parameterTypes.enabled

Parameter type inlay hints

Return type inlay hints show the return types of functions that don't have an explicit type annotation.

Settings - javascript.inlayHints.functionLikeReturnTypes.enabled and typescript.inlayHints.functionLikeReturnTypes.enabled

Return type inlay hints

Spelling suggestions in JavaScript files

VS Code now helps you catch simple spelling mistakes in JavaScript files:

Spelling suggestions in a plain JS files

rogerxu commented 2 years ago

Release version 1.61

Visual Studio Code September 2021

Split editors within the same group

Quickly create side-by-side editors for the same file.

A new command Split in Group (⌘K ⇧⌘) was added to split an editor into two sides without requiring a second editor group. This allows you to work in two editors side by side on the same file. You can also toggle the layout between splitting vertically or horizontally via the Toggle Layout button.

Locked editor groups

Locked editor groups provide a new way of handling this issue, not only for terminals but for any editor. If you have more than one editor group opened, you can now lock it, either using one of the new commands or from the "..." overflow menu:

Lock Group action on the editor context menu

The settings experience was improved allowing you to easily select an editor that should lock a group automatically when opening:

Locked editor group setting

The setting is now called workbench.editor.autoLockGroups.

Better display of deleted and readonly files

Tab decorations highlight deleted and readonly files.

VS Code now uses decorations for this purpose:

Editor readonly and deleted decorations

Bracket pair guides

Display vertical guides to link matching bracket pairs.

Similar to indentation guides, the active bracket pair guide is highlighted.

Bracket pair guides shown in the editor

Bracket pair guides can be enabled by configuring the editor.guides.bracketPairs setting (defaults to false).

Fixed terminal dimensions

Set an active terminal's width and height.

You can now statically set terminal dimensions via the Terminal: Set Fixed Dimensions command (workbench.action.terminal.setDimensions). This is useful for cases when line wrapping can be jarring or disruptive.

The command will display a prompt where you can enter the preferred width and/or height.

Terminal Set Fixed Dimensions column width prompt

Restore terminal sessions across application restarts

Terminal processes are disposed of when a VS Code window is closed. In this release, there is a new opt-in setting for recording and restoring the buffer and using it to recreate processes. Set terminal.integrated.persistentSessionReviveProcess to enable this.

The terminal buffer gets restored on application restart with a message indicating when the snapshot was taken

rogerxu commented 2 years ago

Release version 1.62

Visual Studio Code October 2021

Parameter hint highlight

VS Code now highlights the current parameter in the parameter hint and the color can be themed via editorHoverWidget.highlightForeground.

Example of a parameter hint with a highlighted word

Improved bracket pair guides

Horizontal lines now outline the scope of a bracket pair. Also, vertical lines now depend on the indentation of the code that is surrounded by the bracket pair.

rogerxu commented 2 years ago

Release version 1.63

Visual Studio Code November 2021

Preview themes before installing

From the Color Themes dropdown (⌘K ⌘T), select Browse Additional Color Themes to list the Marketplace themes.

Configure Problems navigation order

You can now define the order for Go to Next Problem (F8) and Go to Previous Problem (F8) navigation.

"problems.sortOrder": "position"

Multiple language specific editor settings

"[javascript][typescript]": {
  "editor.maxTokenizationLineLength": 2500
}

Automatic 2x2 editor grid

A true 2x2 grid editor layout was only possible using the View: Grid Editor Layout (2x2) command.

Unicode highlighting

All uncommon invisible characters in source code are now highlighted by default.

NPM Scripts view improvements

The NPM scripts view shows more details about the scripts.

NPM Scripts view with script details

rogerxu commented 2 years ago

Release version 1.64

[Visual Studio Code January 2022](https://code.visualstudio.com/updates/v1_64)

New Side Panel

You can use the Move View command from the Command Palette, which will display a dropdown of available views. When you select a view, you can then choose the location by either creating a new Panel/Side Bar/Side Panel entry or placing the view in an existing location such as Explorer or Source Control.

Move View command view locations dropdown

Views can be drag and dropped between the Panel, Side Bar, and Side Panel by grabbing the view icon. You can reset a view's location back to its default by right-clicking on the view icon and selecting Reset Location.

View context menu with Reset Location command

If you'd like to reset all views back to the default layout, you can run Views: Reset View Locations from the Command Palette.

Settings editor

Search now prioritizes whole word matches.

Settings Sync

Settings Sync now supports synchronizing User Tasks.

Settings Sync User Tasks

Audio cues

Hear when the cursor moves to folded regions, errors, and breakpoints.

Unicode highlighting

Avoid highlighting characters in supported languages.

Automatic terminal replies

Create automatic responses to common terminal prompts.

"terminal.integrated.autoReplies": {
  "Terminate batch job (Y/N)?": "Y\r",
  "[Oh My Zsh] Would you like to check for updates? [Y/n]": "Y\r"
}

Keyboard navigable links

Now, links can be opened using only the keyboard via Terminal: Open Detected Link... to view all links (web, file, word).

A Quick Pick is displayed with link results of type web, word, and file.

More control on repository discovery

There are two new settings to better control the process of discovering Git repositories and accommodate more diverse folder structures.

Debug binary data view

View and edit binary data while debugging.

Binary data shown for a variable during a debug session

Exclude callers from pausing at breakpoints

The JavaScript debugger added the ability to "exclude a caller" from pausing at a breakpoint or debugger statement.

Markdown path suggestions

Quickly insert relative file paths and header links.

JS/TS surround with snippets

Insert selected code inside snippets.

rogerxu commented 2 years ago

Release version 1.65

Visual Studio Code February 2022

New editor history navigation

Scope Go Back/Go Forward history to editor group or single editor.

Editor group aware navigation

Editor groups are now taken into account when navigating in the editor history.

New setting to scope navigation to editor group or editor

A new setting workbench.editor.navigationScope makes it possible to scope editor history navigation to just the active editor group or even editor.

Light High Contrast theme

Light theme for enhanced VS Code editor visibility.

New audio cues

Audio cues for warnings, inline suggestions, and breakpoint hits.

A new audio cue command Help: List Audio Cues lists all available audio cues, lets you hear each audio cue as you move through the list, and review which cues are currently enabled.

Audio cue help command dropdown with the warning and breakpoint audio cues enabled

Drag and drop Problems and Search results

Drag results to new or existing editor groups.

Improved automatic language detection

When the new setting workbench.editor.historyBasedLanguageDetection is enabled, untitled editors will use an improved automatic language detection algorithm that factors in your editor history and the contents of the current workspace. The new algorithm requires much less text input than before to provide detection results.

Multi-line paste warning

A dialog now shows by default when pasting multiple lines in terminals when the shell does not support multi-line. This warning is displayed for bracketed paste mode and for PowerShell when we hand off Ctrl+V directly to the shell.

Source Control diff editor management

There is a new setting git.closeDiffOnOperation to automatically close diff editors after Git operations.

Debugger lazy variable evaluation

Lazy evaluation of JavaScript/TypeScript property getters.

Preview: Terminal shell integration

Rerun terminal commands, command status decorations.

Commands detected by shell integration now feature decorations in the "gutter" to the left. A command decoration visually breaks up the buffer and provides access to information and actions that use shell integration capabilities. There are three types of command decorations: error, success, and default, as determined by the command's exit code.

A command succeeds and a success decoration is placed to the left of the prompt. A command fails and an error decoration is placed to the left of the prompt. A placeholder decoration is to the left of no-op commands and the current command before it's been executed.

Clicking on a decoration displays actions specific to that command in a menu, that currently include Re-run Command and Copy Output.

Command decoration context menu showing Re-run Command and Copy Output actions

Hovering over the decoration displays information about the command, such as the time since it was run and the associated exit code.

Command decoration hover displaying Show Command Actions option and information that the command executed 3 minutes ago and returned failed exit code 127

VS Code for the Web

Reopen recent local files and folders, improved Git integration.

rogerxu commented 2 years ago

Release version 1.66

Visual Studio Code March 2022

Local history

Keep track of local file changes independent of source control.

Settings editor language filter

Displays available language-specific settings.

Users can now type @lang:languageId in the Settings editor search box to view and edit all settings that can be configured for the language with ID languageId. This way, users can view language-specific settings, also known as language overrides.

New names for Side Panel and Side Bar

Terminal find improvements

Matches are highlighted in the terminal panel and scroll bar.

The terminal scroll bar displaying brown annotations for find matches within a file

Command navigation improvements

A little known feature that's been around for a while is the ability to quickly navigate between commands in the terminal. This feature can be accessed via the following keybindings:

The Shift key can be held down to make selections between commands in the terminal.

Copied text retains HTML styling

To copy rich text from the terminal, run the Terminal: Copy Selection as HTML command or use the terminal context menu entry Copy as HTML.

Quick suggestions as inline completions

The editor.quickSuggestions setting now accepts inline as configuration value. When set to inline, quick suggestions (IntelliSense) don't display the suggestions widget when you type but show completions as ghosted text.

Built-in CSS/LESS/SCSS formatters

Code formatting for CSS, LESS, and SCSS.

The built-in CSS extension now ships with a formatter. The formatter works with CSS, LESS and SCSS. It is implemented by the JS Beautify library and comes with the following settings:

JavaScript heap profiles

Collect and view JS memory allocations while debugging.

Example of the Flame Chart visualizer showing a memory profile for vscode. One cell is hovered over, showing that 33KB of memory was allocated in "ipc.ts".

VS Code for the Web

Drag and drop files and folders into vscode.dev.

Markdown shorthand reference links are now clickable

Markdown lets you can create links using a shorthand syntax in cases where the link text matches the link definition ID. For example, [my fancy link], uses the my fancy link link definition (for example, [my fancy link]: https://example.com). These shorthand links are now clickable in VS Code's editor.

Remote - SSH support for Mac

Connect via SSH to Apple Silicon/M1/ARM64 machines.

New R language topic

There is a new R in Visual Studio Code topic describing R programming language support in VS Code with the R extension. The R extension includes rich language features such as code completions and linting as well as integrated R terminals and dedicated workspace, data, and plot viewers.

R Extension for Visual Studio Code details pane

rogerxu commented 2 years ago

Release version 1.67

Visual Studio Code April 2022

Explorer file nesting

Nest generated files under source files in the Explorer.

.js and .min.js files nested under .ts file, tsconfig.test.json nested under tsconfig.json, package-lock.json nested under package.json

Settings editor filters

Filter button brings up searches such as @Modified settings

Bracket pair colorization

Colored bracket pairs are now enabled by default.

Toggle inlay hints

Ctrl+Alt to quickly hide or show inlay hints in the editor.

Editor › Inlay Hints: Enabled value:

Drag and drop to create Markdown links

Drop files into the editor to create Markdown links.

Hold Shift while dragging the file over a Markdown editor to drop it into the editor and create a link to it.

Find All References in Markdown

Quickly find all references to headers, files, URLs.

Java extension updates

Now supporting inlay hints and lazy variable resolution.

UX Guidelines for extension authors

Guidance for VS Code extension UI best practices.

New Rust language topic

Learn how to use the Rust programming language in VS Code.

rogerxu commented 2 years ago

Release version 1.68

Visual Studio Code May 2022

Configure Display Language

See installed and available Language Packs in their language.

Problems panel table view

View errors and warnings as a table to quickly filter on their source.

Problems panel table view

Deprecated extensions

Learn whether an extension is deprecated or should be replaced.

Extension sponsorship

Support the developers who build your favorite extensions.

Hide Explorer files using .gitignore

Reuse your existing .gitignore to hide files in the Explorer.

Terminal color and contrast enhancements

Find match background color, min contrast ratio.

Git branch protection

Branch protection available right inside VS Code with the new git.branchProtection setting.

TypeScript Go to Source Definition

Jump directly to a symbol's JavaScript implementation. Go to Source Definition

VS Code for the Web localization

vscode.dev now matches your chosen browser language.

Development Container specification

Learn more about the evolving dev container spec.

Preview: Markdown link validation

Detects broken links to headers, images, and files.

rogerxu commented 1 year ago

Release version 1.69

Visual Studio Code June 2022

3-way merge editor

Resolve merge conflicts within VS Code.

Command Center

New UI to search files, run commands, and navigate cursor history.

The Command Center and its hover message atop the window

Do Not Disturb mode

Silence non-critical notification popups.

Do Not Disturb mode shown in the Status bar and Notification center

Toggle Light/Dark themes

Quickly switch between preferred light and dark themes.

Terminal shell integration

Display command status, run recent commands, and more.

Task output decorations

Highlights task success or failure exit codes.

A task fails and an error decoration is added. A task succeeds and a success decoration is added

Git Commit action button

Configure your default Git Commit action.

Branch protection indicators

Status bar:

The branch protection icon is shown in the Status bar

Branch picker:

The branch protection icon is shown in the branch picker

Debug Step Into Target support

Allows you to step directly into functions when paused.

JavaScript sourcemap toggling

Switch to debugging compiled rather than source code.

Refactoring with Preview

Refactor preview panel showing a refactoring that results in two changes

Color theme tester

Use vscode.dev to preview color themes.

VS Code Server preview

Run the same server used for Remote Development.