News

VS Code 1.59: Jupyter Notebooks Go (Partly) Native, Live Preview Improved

• By David Ramel
• 08/06/2021

The dev team for Visual Studio Code improved Jupyter Notebook functionality and much else in the regular monthly update to the wildly popular, open source-based, cross-platform code editor.

For one thing, the team moved some code from the dedicated Jupyter Notebook extension to an internal, built-in extension, so *ipynb files can now be opened with a clean, bare-bones VS Code installation. However, some functionality, like executing cells or view outputs that have complex renderer types, like ipywidgets, will require installing the Jupyter extension.

What's more, Notebook layouts have been improved, specifically in these ways:

• The first line of the cell input is now rendered when the cell is collapsed
• Actions on the notebook editor toolbar will be moved into the overflow menu (...) when the window is not wide enough to render all primary actions
• The default value of notebook.undoRedoPerCell is now changed to true
• The default styles for code cells and now show a background color to help distinguish cells apart
• Developers can now toggle the text labels on the notebook toolbar using the setting notebook.globalToolbarShowLabe

In other updates, the recently introduced VS Code Live Preview extension has been improved in several ways. Still in the preview stage itself, Live Preview lets developers preview HTML pages, with live refreshing, embedded previews and other features available. In the new update, improvements include:

• Compatibility with the built-in JavaScript debugger for external previews, which can be tried out with a Live Preview: Show Debug Preview command
• Improvements to the embedded browser such as "Find in Page" support and quick access to the webvivew DevTools
• Filesystem watching for auto-generated files

Other updates include:

• Extensions view improvements -- Rich extension detail hovers, new runtime status tab: When the Extensions view is narrowed, more details are preserved and the extension icon shrinks.
• Settings editor validation -- Quickly find editing errors for object-based settings: The Settings editor now supports validation on objects, checking for type errors that can be introduced when editing the JSON file directly.
• Drag and drop terminals -- Move terminals across windows to both editor and panel areas: Developers can drag and drop terminals from the tabs list or editor area of one window into the tabs list, editor area or panel of another window.
• Extended theme customization -- There is new syntax to customize multiple themes at once, and these color customization settings allow users to customize colors of the current theme:
  • workbench.colorCustomizations
  • editor.tokenColorCustomizations
  • editor.semanticTokenColorCustomizations
• Testing API finalized -- Native support for running tests in VS Code with built-in Test Explorer: The first set of testing-related APIs has been finalized following the introduction of native support that started last fall. "These APIs provide greater flexibility, better performance, and richer UX over what has been found previously in extensions," Microsoft said.
• Debug Disassembly view preview -- Display disassembled C++ code in VS Code: A preview of a debug Disassembly view is now available thanks to work done by the Microsoft C++ team. It can be opened from an editor's context menu to show the disassembled source of the active stack frame, and developers can step through assembly instructions and set breakpoints on individual instructions. "The Disassembly view is only available in an active debug session and when the underlying debug extension supports it. As of today only the Microsoft C++ and Mock Debug extensions can feed the Disassembly view."
• Remote - Containers devcontainer CLI -- Command-line interface for working with development containers: The Remote - Containers extension that works with Docker containers now includes a devcontainer CLI that lets developers open a folder within a dev container (devcontainer open) or build a dev container image (devcontainer build).

More details on all of the above, along with other tweaks, fixes and new features, is available in the announcement post.