Learn to the exciting new features in the latest VS Code Release

Introduction

Visual Studio Code (VS Code), known for its versatility and powerful features, continues to evolve, offering developers innovative solutions to enhance their workflows. The June 2024 release of VS Code brings a plethora of updates designed to streamline development processes, boost productivity, and provide a more intuitive coding experience.

From advanced visualization tools for source control to enhanced support for Python environments and groundbreaking improvements in GitHub Copilot integration, this update is packed with features that cater to the diverse needs of developers. Whether you’re a seasoned professional or just starting your coding journey, the latest enhancements in VS Code are set to revolutionize the way you work.

In this post, we’ll explore the key highlights of the June 2024 update, showcasing how these new features can transform your development workflow and help you achieve more with less effort.

Key Highlights

1. Incoming/Outgoing Changes Graph (Preview)

Visual Studio Code introduces a new way to visualize changes in your source control. The incoming/outgoing changes graph in the Source Control view allows you to see your current branch, the upstream branch, and an optional base branch all in one place. This powerful visualization helps you keep track of changes more effectively, enhancing collaboration and version control management.

2. Enhanced Python Environments

The June 2024 update brings significant improvements to Python environment discovery with the introduction of python-environment-tools. This new tool, developed in Rust, ensures rapid and accurate detection of global Python installations and virtual environments. These enhancements provide Python developers with a smoother setup and configuration experience, boosting productivity and reducing setup time.

3. Smart Send in Native REPL

VS Code now supports Smart Send in the native REPL for Python. This feature allows you to execute code chunks more efficiently. When you press Shift+Enter, the extension sends the minimum executable code or the highest top-level block in a nested scenario, ensuring that multi-line commands run smoothly. This improvement simplifies the process of running and testing code, making it more intuitive and efficient.

4. GitHub Copilot Extensibility

With this update, GitHub Copilot’s extensibility has been expanded to include Chat and Language Model APIs in VS Code Stable. This means developers can now integrate more sophisticated AI-assisted coding features into their workflow. The new APIs enable extensions to participate in chats and access language models, providing a more interactive and intelligent coding assistant.

5. Profiles Editor (Preview)

Managing your coding profiles has never been easier with the new Profiles Editor. This feature allows you to create, edit, delete, import, and export profiles all from a single interface. You can preview profiles before saving them, customize them as needed, and even open new windows with specific profiles. This streamlined profile management system helps you maintain consistency and efficiency across different projects.

6. Custom Tab Labels

VS Code now offers more flexibility with custom tab labels. You can define custom labels with variable options, including accessing individual file extensions. This feature supports negative indices for capturing file extensions in reverse order, allowing for more detailed and organized workspace management. Additionally, patterns contributed by multiple extensions are now merged, providing a cohesive configuration.

7. TypeScript 5.5

The latest version of TypeScript, 5.5, is now included in VS Code. This update brings new language features and tooling improvements, such as syntax checking for regular expressions. These enhancements ensure that your TypeScript and JavaScript code is more robust and error-free, improving the overall development experience.

8. JavaScript Debugger Enhancements

Debugging JavaScript has become more efficient with the ability to inspect shadowed variables. The JavaScript debugger now shows the correct value of these variables when hovering over them and in inline values. This improvement makes it easier to track variable states and understand the flow of your code during debugging sessions.

Accessibility Improvements

1. Accessible View for Editor Hover

The June 2024 update introduces an Accessible View feature for editor hover information, making VS Code more inclusive and user-friendly. This feature ensures that the content of editor hover information is accessible to all users, including those relying on screen readers. The Accessible View and accessibility help menu present detailed information about the focused part or the entire hover content, enhancing the coding experience for developers with disabilities.

2. Link Underlines

To improve readability and accessibility, VS Code now offers the option to underline links in the workbench. By enabling the accessibility.underlineLinks setting, you can make links easier to distinguish from regular text. This visual cue helps users quickly identify clickable links, reducing confusion and enhancing navigation throughout the coding environment.

Workbench Updates

1. Search Optimization

The new search.ripgrep.maxThreads setting allows you to limit the number of threads used by the ripgrep search engine. This update provides more control over search performance, enabling you to balance search speed and resource usage. Whether used by the core product or via the extension API, this setting ensures a more efficient search process, particularly in large projects.

2. Encoding Adjustments

With the new files.candidateGuessEncodings setting, you can configure which encodings should be considered when the files.autoGuessEncoding feature is enabled. This update allows you to prioritize and limit possible encodings, making file handling more accurate and tailored to your specific needs. The order of configuration determines the priority, enhancing the overall file management experience.

3. Profiles Editor (Preview)

In addition to its key features, the new Profiles Editor introduced in this milestone enables comprehensive profile management from a single interface. Users can create, edit, delete, import, and export profiles seamlessly. This feature simplifies the customization process, allowing developers to preview and adjust profiles before saving them. The Profiles Editor also includes options to open new windows with specific profiles and set default profiles for new windows, streamlining workflow management.

4. New Window with Profile

The update adds new actions to the File menu, allowing you to open a new window with a specific profile. This feature enhances workflow flexibility by enabling developers to quickly switch between different project setups. The File > New Window with Profile menu item makes it easy to launch new windows tailored to your development needs.

5. Extension Install Options

VS Code now provides more flexibility when installing extensions. You can install an extension without syncing it and choose to install a specific version directly. These actions are available in the context menu of the Extensions view, allowing for more precise and controlled extension management. This update simplifies the process of managing multiple versions and configurations of extensions.

6. Access File Extensions in Custom Labels

When defining custom labels, you now have more flexibility to access individual file extensions using the ${extname(N)} syntax. This feature supports negative indices to capture file extensions in reverse order. Additionally, custom label patterns from multiple extensions are merged, providing a cohesive and organized configuration. This enhancement allows for more detailed and personalized workspace customization.

7. Unset a Theme Color

If a theme sets a color or border that you don’t like, you can now use default to set it back to the original value. This update provides more control over the appearance of your coding environment, allowing you to maintain a consistent and visually appealing workspace.

8. Change Folding Placeholder Color

The folding placeholder (ellipsis) can now be themed with the color editor.foldPlaceholderForeground. This customization option enhances the visual clarity of your code, making it easier to navigate folded sections and maintain focus on your work.

Editor Improvements

1. Code Actions on Save

The editor.codeActionsOnSave setting allows you to configure a set of Code Actions that are automatically applied when you save a file. This feature streamlines the process of organizing imports and applying other actions, enhancing coding efficiency. The update also improves IntelliSense for configuring this setting, providing a list of available Code Actions based on your workspace files and active extensions.

2. Quickly Turn Off Read-Only File Status

If you have configured a file as read-only through the files.readonlyInclude setting, you can now quickly toggle off the read-only status from the read-only editor message. This feature simplifies file management, allowing you to make changes to read-only files more easily when needed.

Source Control Enhancements

1. Incoming/Outgoing Changes Graph (Preview)

The experimental feature for visualizing incoming and outgoing changes introduces a graph that displays the current branch, the upstream branch, and an optional base branch. The root of the graph is the common ancestor of these branches, providing a clear overview of version control changes. Enable this new visualization using the scm.experimental.showHistoryGraph setting and experience improved source control management.

Notebook Updates

1. Find in Text Selection

The Notebook Find control now includes a “Find in Selection” feature for textual and cell selections. This behavior is enabled by default and can be controlled via a button within the control. Depending on the context of your selection, toggling this button scopes your find query to one or more selected cells or lines within a cell, enhancing search precision and efficiency.

2. Copy or Open Text Output from the Context Menu

When working with text output in notebooks, you can now use the context menu to copy the output value or open it in a new editor. This feature simplifies the process of reviewing and managing large streaming outputs, improving overall workflow in notebook environments.

Terminal Enhancements

1. Support for OSC 52

The Operating System Command (OSC) 52 escape sequence is now supported, enabling clipboard access for terminal sessions. This feature is particularly useful for tools like tmux, enhancing terminal functionality and integration.

2. Custom Glyphs Support

The terminal now supports custom glyphs for branch, line number, and lock Powerline symbols. These symbols scale perfectly with the cell when font size, line height, or letter spacing is adjusted, providing a visually consistent and customizable terminal experience.

Debug and Language Updates

1. JavaScript Debugger Enhancements

The JavaScript debugger in Visual Studio Code has received significant improvements in this update. One of the key enhancements is the ability to accurately display the values of shadowed variables when hovering over them and in inline values. This feature is enabled via the debug.inlineValues setting and provides a more precise debugging experience, making it easier to track variable states and understand the flow of your code during debugging sessions.

2. TypeScript 5.5

With the inclusion of TypeScript 5.5, developers can now take advantage of new language features and tooling improvements. One notable enhancement is the introduction of syntax checking for regular expressions in both JavaScript and TypeScript. This update helps identify errors such as unclosed groups, incorrect back references, and invalid escapes, ensuring that your code is more robust and error-free. These improvements significantly enhance the development experience, making coding in TypeScript and JavaScript more efficient and reliable.

3. Syntax Checking for Regular Expressions

The integration of TypeScript 5.5 brings advanced syntax checking for regular expressions. This feature reports various syntax errors directly within the editor, helping developers quickly identify and resolve issues in their regular expression literals. By providing immediate feedback on unclosed groups, incorrect back references, and invalid escapes, this update enhances code quality and reduces debugging time.

Contributions to Extensions

1. GitHub Copilot Enhancements

The GitHub Copilot extension has been further refined with several new features. The compact inline chat rendering makes it easier to read and understand suggestions, improving the overall user experience. Additionally, a new terminal hint helps users discover the inline chat functionality, enhancing usability. The Apply In Editor command on a code block in the Chat view uses the language model to determine the best approach for applying changes, streamlining the coding process and making AI-assisted development more intuitive.

2. Python Environment Discovery Using Python-Environment-Tools

The introduction of python-environment-tools significantly enhances the speed and accuracy of detecting global Python installations and virtual environments. This tool, developed in Rust, runs in parallel with the existing support to evaluate its performance. The new logging channel, Python Locator, shows discovery times, providing insights into the efficiency of this feature. This enhancement is part of ongoing efforts to optimize Python support in VS Code, making environment management faster and more reliable.

3. Smart Send in Native REPL

The Python extension now supports Smart Send in the VS Code native REPL, allowing developers to run code chunks more efficiently. When pressing Shift+Enter, the extension sends the minimum executable code in a non-nested scenario or the highest top-level block of code in a nested scenario. This improvement ensures that multi-line commands execute smoothly, enhancing productivity and reducing the likelihood of errors during code execution.

4. Support for reStructuredText Docstrings

Pylance, the Python language server for VS Code, now supports rendering reStructuredText documentation strings (docstrings) on hover. This feature is currently in its early stages and can be enabled with the python.analysis.supportRestructuredText setting. By providing better handling of various documentation formats like Sphinx, GoogleDoc, and Epytext, this update improves the readability and usability of Python docstrings, making it easier for developers to understand and maintain their code.

Conclusion

The June 2024 update for Visual Studio Code brings a host of powerful features and enhancements designed to revolutionize your development workflow. From advanced visualization tools and improved Python environment management to enhanced accessibility and debugging capabilities, this release caters to the diverse needs of developers. Embrace these updates to boost your productivity and streamline your coding experience. Stay ahead of the curve by exploring these new features and sharing your feedback with the community. Happy coding!