{"id":13589,"date":"2023-04-19T08:00:28","date_gmt":"2023-04-19T15:00:28","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/?p=13589"},"modified":"2023-04-19T06:59:48","modified_gmt":"2023-04-19T13:59:48","slug":"teams-toolkit-for-visual-studio-code-update-april-2023","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/teams-toolkit-for-visual-studio-code-update-april-2023\/","title":{"rendered":"Teams Toolkit for Visual Studio Code Update &#8211; April 2023"},"content":{"rendered":"<p>Welcome to the April 2023 update for Teams Toolkit for Visual Studio Code! In this update, we are sharing what\u2019s new for developers building Teams apps with the prerelease version of <a href=\"https:\/\/learn.microsoft.com\/en-us\/microsoftteams\/platform\/toolkit\/teams-toolkit-fundamentals?pivots=visual-studio-code\">Teams Toolkit for Visual Studio Code<\/a>. This update includes:<\/p>\n<ul>\n<li>Integrated and secure tunneling<\/li>\n<li>SharePoint Framework developer experience update<\/li>\n<li>New getting started experience with GitHub Codespaces<\/li>\n<li>Continuous improvement of the generated project files<\/li>\n<li>Other features, enhancements, and bug fixes<\/li>\n<\/ul>\n<h2>Integrated and secure tunneling<\/h2>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/04\/TTK-April-update_image-1.png\"><img decoding=\"async\" class=\"aligncenter wp-image-13596 size-large\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/04\/TTK-April-update_image-1-1024x609.png\" alt=\"With this integrated dev tunnel feature, Teams Toolkit now offers enhanced security and increased trust for enterprise customers.\" width=\"640\" height=\"381\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/04\/TTK-April-update_image-1-1024x609.png 1024w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/04\/TTK-April-update_image-1-300x178.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/04\/TTK-April-update_image-1-768x457.png 768w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/04\/TTK-April-update_image-1.png 1430w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/a><\/p>\n<p>Today, one of the tasks that Teams Toolkit automates for debugging bot and message extension applications is tunneling. Now we are thrilled to announce that Teams Toolkit for Visual Studio Code will be defaulting to use Dev Tunnels for developing bots and message extensions locally. It is the same technology behind <a href=\"https:\/\/code.visualstudio.com\/docs\/remote\/tunnels\">Visual Studio Code Remote Tunnels<\/a>, <a href=\"https:\/\/learn.microsoft.com\/en-us\/aspnet\/core\/test\/dev-tunnels?view=aspnetcore-7.0\">Visual Studio .NET Web Tools<\/a> and other Microsoft experiences.<\/p>\n<p>With this integrated dev tunnel feature, Teams Toolkit now offers enhanced security and increased trust for enterprise customers, with the ability to:<\/p>\n<ul>\n<li>Alert users they are connected to dev tunnels to prevent phishing attacks and accidental leaks of tunnel endpoints.<\/li>\n<li>Authenticate with Microsoft 365 identity to protect tunnel creations.<\/li>\n<\/ul>\n<p>Rest assured that Teams Toolkit provides maximum flexibility if you still prefer to use Teams Toolkit without dev tunnels, follow our <a href=\"https:\/\/aka.ms\/teamsfx-switch-tunnel\">documentation<\/a> to switch back.<\/p>\n<h2>SharePoint Framework developer experience update<\/h2>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/04\/TTK-April-update_image-2.png\"><img decoding=\"async\" class=\"aligncenter wp-image-13595 size-large\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/04\/TTK-April-update_image-2-1024x683.png\" alt=\"Teams Toolkit updates to further enhance the developer experiences across Teams, Outlook, and the Microsoft 365 app with an \u201cout-of-box\u201d scaffold.\" width=\"640\" height=\"427\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/04\/TTK-April-update_image-2-1024x683.png 1024w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/04\/TTK-April-update_image-2-300x200.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/04\/TTK-April-update_image-2-768x512.png 768w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/04\/TTK-April-update_image-2.png 1428w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/a><\/p>\n<p>It is another exciting month for SharePoint Framework developers! During the past months, Teams Toolkit has updated the scaffold solutions to use the latest SharePoint Framework version, which brings the fundamental capability that enables you to extend your SharePoint Framework based Teams solutions to Outlook and the Microsoft 365 app.<\/p>\n<p>Now we are excited to announce that to further streamline developer experiences across Teams, Outlook, and the Microsoft 365 app, we have included \u201cout-of-box\u201d scaffold that is equipped with full stack debugging capabilities across Microsoft 365 suite.<\/p>\n<p>We are also committed to continuously optimizing for developers based on the feedback we hear from customers and communities, Teams Toolkit added support so you can:<\/p>\n<ul>\n<li>Use a single command to add multiple SharePoint Framework web parts as Teams Tab pages and configure the new web parts with Teams app.<\/li>\n<li>Choose which SharePoint Framework package version to use when creating a SharePoint Framework -based Teams tab app, either from a globally installed version or let Teams Toolkit install the latest version for you.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/04\/TTK-April-update_image-3.png\"><img decoding=\"async\" class=\"aligncenter wp-image-13594 \" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/04\/TTK-April-update_image-3.png\" alt=\"Choose which SharePoint Framework package version to use when creating a SharePoint Framework -based Teams tab app.\" width=\"632\" height=\"421\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/04\/TTK-April-update_image-3.png 468w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/04\/TTK-April-update_image-3-300x200.png 300w\" sizes=\"(max-width: 632px) 100vw, 632px\" \/><\/a><\/p>\n<h2><\/h2>\n<h2>New getting started experience with GitHub Codespaces<\/h2>\n<p>We understand how painful it can be when spending hours setting up the development environment. That\u2019s why we are making these Teams Toolkit compatible samples available for you to instantly get started in a containerized environment \u2013 GitHub Codespaces!<\/p>\n<ul>\n<li><a href=\"https:\/\/github.com\/OfficeDev\/TeamsFx-Samples\/tree\/v3\/hello-world-tab-codespaces\">Hello World Tab Sample<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/OfficeDev\/TeamsFx-Samples\/tree\/v3\/notification-codespaces\">Notification Sample<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/OfficeDev\/TeamsFx-Samples\/tree\/v3\/NPM-search-message-extension-codespaces\">NPM Search Message Extension Sample<\/a><\/li>\n<\/ul>\n<p>Click the <code>Open in GitHub Codespaces<\/code> badge and proceed with creating Codespaces. After a few seconds of set up, you will have a Teams application inside a fully functional Visual Studio Code on the web.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/04\/TTK-April-update_image-4.png\"><img decoding=\"async\" class=\"aligncenter wp-image-13593 \" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/04\/TTK-April-update_image-4.png\" alt=\"New getting started experience with GitHub Codespaces.\" width=\"603\" height=\"402\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/04\/TTK-April-update_image-4.png 468w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/04\/TTK-April-update_image-4-300x200.png 300w\" sizes=\"(max-width: 603px) 100vw, 603px\" \/><\/a><\/p>\n<h2>Continuous improvement of the generated project files<\/h2>\n<ul>\n<li>We have been continuously iterating the generated project files since the first Prerelease in February to meet the developer expectations. In this version, we have made the following changes based on the feedback we hear:<\/li>\n<li>Simplified the default lifecycle steps in <code>teamsapp.yml<\/code> to be Provision, Deploy, and Publish. The <code>ConfigureApp<\/code> and <code>RegisterApp<\/code> steps are removed, and their actions are defaulted to the Provision step. <a href=\"https:\/\/aka.ms\/teamsfx-v5.0-guide#lifecycles\">Link to lifecycles doc<\/a><\/li>\n<li>Added support for a new action, <code>uses: script<\/code>, that can be used to run any script command.\u00a0 <a href=\"https:\/\/aka.ms\/teamsfx-actions#script\">Link to script action doc<\/a><\/li>\n<li>Some actions now support a <code>writeToEnvironmentFile<\/code> parameter to define generated environment variable names. <a href=\"https:\/\/aka.ms\/teamsfx-actions\">Link to actions doc<\/a><\/li>\n<li>Added <code>.env.{envName}.user<\/code> files to store sensitive information like password and are added to <code>.gitignore<\/code>. And <code>.env.{envName}<\/code> files now only contain non-sensitive information and are removed from <code>.gitignore<\/code>. <a href=\"https:\/\/aka.ms\/teamsfx-v5.0-guide#environment-file-for-sensitive-information\">Link to environments doc<\/a><\/li>\n<li>Added auto-complete suggestions and descriptions when editing <code>teamsapp.yml<\/code> files.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/04\/TTK-April-update_image-5.png\"><img decoding=\"async\" class=\"aligncenter wp-image-13592 \" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/04\/TTK-April-update_image-5.png\" alt=\"Continuous improvements of the generated project files\" width=\"638\" height=\"425\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/04\/TTK-April-update_image-5.png 468w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/04\/TTK-April-update_image-5-300x200.png 300w\" sizes=\"(max-width: 638px) 100vw, 638px\" \/><\/a><\/p>\n<h2>Other features, enhancements, and bug fixes<\/h2>\n<p>This prerelease marks the last prerelease before the Teams Toolkit v5 stable version and we have packed in a lot of features and enhancements.<\/p>\n<h3>Teams Toolkit for Visual Studio Code<\/h3>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/04\/TTK-April-update_image-6.png\"><img decoding=\"async\" class=\"aligncenter wp-image-13591 size-large\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/04\/TTK-April-update_image-6-1024x599.png\" alt=\"Updated Teams Toolkit tree view user interface to streamline the development workflow.\" width=\"640\" height=\"374\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/04\/TTK-April-update_image-6-1024x599.png 1024w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/04\/TTK-April-update_image-6-300x176.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/04\/TTK-April-update_image-6-768x450.png 768w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/04\/TTK-April-update_image-6.png 1428w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/a><\/p>\n<ul>\n<li>Updated Teams Toolkit tree view user interface to streamline the development workflow.<\/li>\n<li>Validate Application command now helps catch errors and warnings that would prevent a successful publish to Teams in addition to schema checks.<\/li>\n<li>Simplified multiple progress notifications into one for provision, deploy and publish.<\/li>\n<li>Some commands will now ask for additional inputs like <code>manifest.json<\/code> file path and environment name so that you have the flexibility to arrange those files.<\/li>\n<li>Sample: enabled <a href=\"https:\/\/learn.microsoft.com\/en-us\/microsoftteams\/platform\/apps-in-teams-meetings\/build-tabs-for-meeting?tabs=desktop%2Cmeeting-chat-view-desktop%2Cmeeting-stage-view-desktop%2Cchannel-meeting-desktop#app-caching\">app caching<\/a> in &#8220;My First Meeting App&#8221; sample that improves subsequent launch time of the apps that are loaded in the meeting side panel.<\/li>\n<li>Template: updated templates and samples to use Fluent UI V9 and React 18.<\/li>\n<\/ul>\n<h3>Teams Toolkit CLI: @<a href=\"https:\/\/www.npmjs.com\/package\/@microsoft\/teamsfx-cli\">microsoft\/teamsfx-cli<\/a> <code>v2.0.0@beta<\/code><\/h3>\n<ul>\n<li>Updated <code>teamsfx validate<\/code> command to validate your app package against validation rules.<\/li>\n<li>Updated <code>teamsfx new<\/code> command to include a new parameter <code>--spfx-install-latest-package<\/code> to specify whether to use the latest SPFx package or not.<\/li>\n<li>Added <code>teamsfx add spfx-web-part<\/code> command to add multiple web parts.<\/li>\n<\/ul>\n<h3>TeamsFx-React SDK: @<a href=\"https:\/\/www.npmjs.com\/package\/@microsoft\/teamsfx-react\">microsoft\/teamsfx-react<\/a> <code>v3.0.0@beta<\/code><\/h3>\n<ul>\n<li>Added <code>BaseDashboard<\/code> class: A base component that provides basic functionality to create a dashboard.<\/li>\n<li>Added <code>BaseWidget<\/code> class: A base component that provides basic functionality to create a widget.<\/li>\n<li>Added <code>IWidgetClassNames<\/code> Interface: An Interface for defining the class names of widget elements.<\/li>\n<\/ul>\n<h3>Bug fixes<\/h3>\n<ul>\n<li>Fixed an issue where we will only display relevant how-to guide for SPFx project.<\/li>\n<li>Fixed an issue where the hyperlink is highlighted multiple colors from output channel.<\/li>\n<li>Fixed an issue where you might see duplicate error messages.<\/li>\n<li>Fixed an issue where you might see <code>Upload failed due to an invalid BotId in your manifest<\/code> after migrating your project with prerelease version.<\/li>\n<li>Fixed an issue where <code>teamsApp\/update<\/code> action will not create a new Teams app registration when <code>TEAMS_APP_ID<\/code> does not exist.<\/li>\n<\/ul>\n<h2>Try Teams Toolkit prerelease today<\/h2>\n<p>Follow the steps in <a href=\"https:\/\/learn.microsoft.com\/en-us\/microsoftteams\/platform\/toolkit\/install-teams-toolkit?tabs=vscode&amp;pivots=visual-studio-code#install-a-pre-release-version\">install a prerelease version<\/a> to get started. We encourage you to provide feedback in <a href=\"https:\/\/github.com\/OfficeDev\/TeamsFx\/issues\">TeamsFx GitHub issues<\/a> to help us make Teams Toolkit better.<\/p>\n<p>Visit us at <a href=\"https:\/\/developer.microsoft.com\/en-us\/microsoft-teams\/tools\">Tools | Microsoft Teams Dev Center<\/a>. Follow us on <a href=\"https:\/\/twitter.com\/Microsoft365Dev\">@Microsoft365Dev \/ Twitter<\/a> for the latest news.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Welcome to the April 2023 update for Teams Toolkit for Visual Studio Code! Learn what\u2019s new for developers building Teams apps with the prerelease version of Teams Toolkit for Visual Studio Code.<\/p>\n","protected":false},"author":43243,"featured_media":13643,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[128,9],"tags":[70,232,23,44],"class_list":["post-13589","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-microsoft-teams","category-sharepoint-framework","tag-github","tag-github-codespaces","tag-teams-toolkit","tag-visual-studio-code"],"acf":[],"blog_post_summary":"<p>Welcome to the April 2023 update for Teams Toolkit for Visual Studio Code! Learn what\u2019s new for developers building Teams apps with the prerelease version of Teams Toolkit for Visual Studio Code.<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/13589","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/users\/43243"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/comments?post=13589"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/13589\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media\/13643"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media?parent=13589"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/categories?post=13589"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/tags?post=13589"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}