{"id":13220,"date":"2023-03-22T08:00:50","date_gmt":"2023-03-22T15:00:50","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/?p=13220"},"modified":"2023-03-22T12:09:41","modified_gmt":"2023-03-22T19:09:41","slug":"teams-toolkit-for-visual-studio-code-update-march-2023","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/teams-toolkit-for-visual-studio-code-update-march-2023\/","title":{"rendered":"Teams Toolkit for Visual Studio Code update &#8211; March 2023"},"content":{"rendered":"<p>Welcome to the March 2023 update for Teams Toolkit on Visual Studio Code! In this update, we will bring you what\u2019s the latest with Microsoft Teams app development using <a href=\"https:\/\/learn.microsoft.com\/en-us\/microsoftteams\/platform\/toolkit\/teams-toolkit-fundamentals?pivots=visual-studio-code\">Teams<\/a> Toolkit for Visual Studio Code.<\/p>\n<h2>Teams Toolkit 4.2.4<\/h2>\n<p>We introduced Teams Toolkit support for <a href=\"https:\/\/learn.microsoft.com\/en-us\/sharepoint\/dev\/spfx\/release-1.16.1\">SharePoint Framework versions 1.16.0.<\/a> This version offers support for Teams JavaScript SDK v2, so you can build experiences that run in Teams, Outlook, and the Microsoft 365 app.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/03\/TTK-VS-blog_image-1.png\"><img decoding=\"async\" class=\"aligncenter wp-image-13226 size-large\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/03\/TTK-VS-blog_image-1-1024x519.png\" alt=\"Teams Toolkit has been upgraded to support the latest version of SharePoint Framework version 1.16.1 in the scaffold template\" width=\"640\" height=\"324\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/03\/TTK-VS-blog_image-1-1024x519.png 1024w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/03\/TTK-VS-blog_image-1-300x152.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/03\/TTK-VS-blog_image-1-768x389.png 768w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/03\/TTK-VS-blog_image-1.png 1406w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/a><\/p>\n<p>Now we are thrilled to announce that Teams Toolkit has been upgraded to support the latest version of SharePoint Framework <a href=\"https:\/\/learn.microsoft.com\/en-us\/sharepoint\/dev\/spfx\/release-1.16.1\">version 1.16.1<\/a> in the scaffold template. SharePoint Framework v1.16.1 includes fixes to solution packaging and scaffolding issues, as well as other minor improvements.<\/p>\n<p>To get started with Teams Toolkit and SharePoint Framework:<\/p>\n<ul>\n<li>Follow the installation <a href=\"https:\/\/learn.microsoft.com\/en-us\/microsoftteams\/platform\/toolkit\/install-teams-toolkit?tabs=vscode&amp;pivots=visual-studio-code#install-teams-toolkit-for-visual-studio-code\">instructions for Teams Toolkit<\/a> version 4.2.4<\/li>\n<li>Visit our \u201c<a href=\"https:\/\/learn.microsoft.com\/en-us\/microsoftteams\/platform\/sbs-gs-spfx?tabs=vscode%2Cviscode\">Getting Started\u201d tutorial for Teams Toolkit and SPFx-based Teams apps<\/a>.<\/li>\n<\/ul>\n<h2>Teams Toolkit v5 pre-release<\/h2>\n<p>We <a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/teams-toolkit-for-visual-studio-code-v5-0-prerelease\/\">recently announced a pre-release<\/a> for the next major version of Teams Toolkit. We\u2019re continuing to improve on this release based on your feedback. Here are some of the changes that are included in the pre-release:<\/p>\n<h3>Create, debug, and deploy an Outlook Add-in project<\/h3>\n<p>The current developer experience for building a Teams app vs building an Outlook Add-in is very different. Outlook Add-ins developer experience is primarily based on a series of templates generated through the command prompt. Teams has been relying on the Teams Toolkit in Visual Studio Code that provides templates, samples, and full stack debugging capabilities etc. The respective templates for Teams and Outlook projects are structurally very different, and even use completely different manifests.<\/p>\n<p>Now, we are pleased to announce that we are bridging the gap between these two experiences with a unified developer experience in terms of tooling and unified manifest file.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/03\/TTK-VS-blog_image-2.png\"><img decoding=\"async\" class=\"aligncenter wp-image-13225 size-large\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/03\/TTK-VS-blog_image-2-1024x531.png\" alt=\"Example of unified developer experience in terms of tooling and unified manifest file for Teams and Outlook\" width=\"640\" height=\"332\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/03\/TTK-VS-blog_image-2-1024x531.png 1024w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/03\/TTK-VS-blog_image-2-300x156.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/03\/TTK-VS-blog_image-2-768x398.png 768w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/03\/TTK-VS-blog_image-2.png 1379w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/a><\/p>\n<h4>New features to support Outlook Add-in within Teams Toolkit<\/h4>\n<ul>\n<li>Create a new Outlook add-in project from Teams Toolkit.<\/li>\n<li>Run and debug the app in Outlook client (*).<\/li>\n<li>Deploy the Outlook add-in project to Azure.<\/li>\n<li>Import an existing Outlook add-in project to the latest app manifest schema.<\/li>\n<li>A new hello world style sample app that contains both Outlook add-in and Teams tab app.<\/li>\n<\/ul>\n<p><em><span class=\"TextRun SCXW30221088 BCX0\" lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"auto\"><span class=\"NormalTextRun SCXW30221088 BCX0\">* <\/span><span class=\"NormalTextRun SCXW30221088 BCX0\">Please note that y<\/span><span class=\"NormalTextRun SCXW30221088 BCX0\">ou need to be on Outlook for Windows, Beta Channel, <\/span><span class=\"NormalTextRun ContextualSpellingAndGrammarErrorV2Themed SCXW30221088 BCX0\">Build<\/span><span class=\"NormalTextRun SCXW30221088 BCX0\"> 16320 or higher <\/span><span class=\"NormalTextRun SCXW30221088 BCX0\">when <\/span><span class=\"NormalTextRun SCXW30221088 BCX0\">developing Outlook add-<\/span><span class=\"NormalTextRun SCXW30221088 BCX0\">ins.<\/span><\/span><span class=\"EOP SCXW30221088 BCX0\" data-ccp-props=\"{&quot;134245417&quot;:false,&quot;335551550&quot;:6,&quot;335551620&quot;:6,&quot;335559685&quot;:0}\">\u00a0<\/span><\/em><\/p>\n<h3>Improved full stack debugging experience for apps across Microsoft 365<\/h3>\n<p>Previously when you were trying to debug your personal tab app on Outlook and the Microsoft 365 app, you had to install the app first on Teams and then switch to Outlook and the Microsoft 365 app. There was also an additional manual step required to debug the search-based message extension on Outlook where you needed to configure the Outlook channel on dev.botframework.com.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/03\/TTK-VS-blog_image-3.png\"><img decoding=\"async\" class=\"aligncenter wp-image-13224 size-large\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/03\/TTK-VS-blog_image-3-1024x552.png\" alt=\"With the latest Teams Toolkit pre-release, you can directly run your personal tab or search-based message extensions to Outlook and the Microsoft 365 app.\" width=\"640\" height=\"345\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/03\/TTK-VS-blog_image-3-1024x552.png 1024w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/03\/TTK-VS-blog_image-3-300x162.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/03\/TTK-VS-blog_image-3-768x414.png 768w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/03\/TTK-VS-blog_image-3.png 1359w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/a><\/p>\n<p>With the latest Teams Toolkit pre-release, you can directly run your personal tab or search-based message extensions to Outlook and the Microsoft 365 app. Teams Toolkit has also made troubleshooting easy with full stack debugging support including hot reload and attached debugger from Visual Studio Code.<\/p>\n<h3>Improved Command Execution UI<\/h3>\n<p>Another update is an improved user interface for command handling. Previously, you were able to trigger commands that didn&#8217;t allow concurrent execution and they failed. Now, such commands are disabled from the user interface. For example, when you execute `Provision in the cloud` command, other commands in the `Deployment` section will be disabled to prevent concurrent execution error.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/03\/TTK-VS-blog_image-4.png\"><img decoding=\"async\" class=\"aligncenter wp-image-13223 size-full\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/03\/TTK-VS-blog_image-4.png\" alt=\"Improved command execution UI\" width=\"602\" height=\"137\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/03\/TTK-VS-blog_image-4.png 602w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/03\/TTK-VS-blog_image-4-300x68.png 300w\" sizes=\"(max-width: 602px) 100vw, 602px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<h3>Developer Assist dashboard sample<\/h3>\n<p>As a developer, we spend most of our time in between Azure DevOps, GitHub, and internal task management tools such as Microsoft Planner. Now we are offering you a sample that brings all these features together within a single dashboard on Microsoft Teams that can be used by all the developers in your team and even has the capability to extend the app to Outlook web and the Microsoft 365 app.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/03\/TTK-VS-blog_image-5.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-13222\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/03\/TTK-VS-blog_image-5.png\" alt=\"Image TTK VS blog image 5\" width=\"602\" height=\"324\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/03\/TTK-VS-blog_image-5.png 602w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/03\/TTK-VS-blog_image-5-300x161.png 300w\" sizes=\"(max-width: 602px) 100vw, 602px\" \/><\/a><\/p>\n<h3>Bug fixes<\/h3>\n<ul>\n<li>Fixed an issue where you might see runtime errors on the Teams Toolkit extension page.<\/li>\n<li>Fixed an issue where the app name is not shown properly on the scaffolding success message.<\/li>\n<li>Fixed an issue for several how-to guides that don&#8217;t point to pre-release compatible versions.<\/li>\n<li>Fixed an issue where the Deploy Teams app manifest option is missing.<\/li>\n<\/ul>\n<h3>Try Teams Toolkit pre-release today<\/h3>\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>Learn more at <a href=\"https:\/\/developer.microsoft.com\/en-us\/microsoft-teams\">Microsoft Teams Dev Center | APIs and app development.<\/a>\u00a0Follow us on <a href=\"https:\/\/twitter.com\/Microsoft365Dev\">@Microsoft365Dev)\/Twitter<\/a> for the latest news and announcements.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this update, we will bring you what\u2019s the latest with Teams app development using Teams Toolkit for Visual Studio Code.<\/p>\n","protected":false},"author":43243,"featured_media":13232,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[128,11,9],"tags":[228,12,44],"class_list":["post-13220","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-microsoft-teams","category-office-add-ins","category-sharepoint-framework","tag-microsoft-365-app","tag-outlook","tag-visual-studio-code"],"acf":[],"blog_post_summary":"<p>In this update, we will bring you what\u2019s the latest with Teams app development using Teams Toolkit for Visual Studio Code.<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/13220","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=13220"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/13220\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media\/13232"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media?parent=13220"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/categories?post=13220"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/tags?post=13220"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}