OfficeDev · MingjiaLiu1995 · Nov 18, 2024 · Nov 18, 2024 · Nov 18, 2024 · Nov 22, 2024
diff --git a/docs/develop/development-kit-overview.md b/docs/develop/development-kit-overview.md
@@ -1,21 +1,17 @@
 ---
-title: Create Office Add-in projects using Office Add-ins Development Kit for Visual Studio Code (preview)
+title: Create Office Add-in projects using Office Add-ins Development Kit for Visual Studio Code 
 description: Learn how to create Office Add-in projects using Office Add-ins Development Kit extension.
-ms.date: 09/09/2024
+ms.date: 12/12/2024
 ms.localizationpriority: high
 ---
 
-# Create Office Add-in projects using Office Add-ins Development Kit for Visual Studio Code (preview)
+# Create Office Add-in projects using Office Add-ins Development Kit for Visual Studio Code
 
 The Office Add-ins Development Kit helps set up your environment, create Office Add-ins, and debug your code in a streamlined experience.
 
 [!INCLUDE [Information about the preview status of the dev kit.](../includes/dev-kit-preview-note.md)]
 
-## Prerequisites
-
-- Download and install [Visual Studio Code](https://code.visualstudio.com/).
-- Node.js (the latest LTS version). Visit the [Node.js site](https://nodejs.org/) to download and install the right version for your operating system. To verify if you've already installed these tools, run the commands `node -v` and `npm -v` in your terminal.
-- Office connected to a Microsoft 365 subscription. You might qualify for a Microsoft 365 E5 developer subscription through the [Microsoft 365 Developer Program](https://developer.microsoft.com/microsoft-365/dev-program), see [FAQ](/office/developer-program/microsoft-365-developer-program-faq#who-qualifies-for-a-microsoft-365-e5-developer-subscription-) for details. Alternatively, you can [sign up for a 1-month free trial](https://www.microsoft.com/microsoft-365/try?rtc=1) or [purchase a Microsoft 365 plan](https://www.microsoft.com/microsoft-365/buy/compare-all-microsoft-365-products).
+[!include[Dev_kit prerequisites](../includes/dev-kit-prerequisites.md)]
 
 ## Install the development kit
 
@@ -67,29 +63,8 @@ To understand how the add-in will work in an Office application, use the Office
 > [!NOTE]
 > These steps are the same as the ones listed in Visual Studio Code by the extension when you create a new project.
 
-1. Open the extension by selecting the Office Add-ins Development Kit icon in the **Activity Bar**.
-1. Select **Preview Your Office Add-in (F5)**
-1. In the Quick Pick menu, select the option **{Office Host} Desktop (Edge Chromium)**. This will launch the add-in and debug the code.
-
-The development kit checks that the prerequisites are met before debugging starts. Check the terminal for detailed information if there are issues with your environment. After this process, the Office desktop application launches and sideloads the add-in. Please note that the first time you run a project, it may make take a few minutes to install the dependencies. You will need to install the certificate when prompted.
-
-## Stop testing your Office Add-in
-
-Once you are finished testing and debugging the add-in, close the add-in by following these steps.
-
-1. Open the extension by selecting the Office Add-ins Development Kit icon in the **Activity Bar**.
-1. Select **Stop Previewing Your Office Add-in**. This closes the web server and removes the add-in from the registry and cache.
-1. Close the Office application window at your convenience.
-
-## Troubleshooting
-
-If you have problems running the add-in, take these steps.
-
-- Close any open instances of Office.
-- Close the previous web server started for the add-in with the **Stop Previewing Your Office Add-in** Office Add-ins Development Kit extension option.
-
-The article [Troubleshoot development errors with Office Add-ins](../testing/troubleshoot-development-errors.md) contains solutions to common problems. If you're still having issues, [create a GitHub issue](https://aka.ms/officedevkitnewissue) and we'll help you.  
+[!include[Dev_kit_start_debugging](../includes/dev-kit-start-debugging.md)]
 
-For information on running the add-in on Office on the web, see [Sideload Office Add-ins to Office on the web](../testing/sideload-office-add-ins-for-testing.md).
+[!include[Dev_kit_stop_debugging](../includes/dev-kit-stop-debugging.md)]
 
-For information on debugging on older versions of Office, see [Debug add-ins using developer tools in Microsoft Edge Legacy](../testing/debug-add-ins-using-devtools-edge-legacy.md).
+[!include[Dev_kit_troubleshooting](../includes/dev-kit-troubleshooting.md)]
diff --git a/docs/images/office-add-ins-development-kit-samplepage-excelquickstart.png b/docs/images/office-add-ins-development-kit-samplepage-excelquickstart.png
diff --git a/docs/images/office-add-ins-development-kit-samplepage-wordquickstart.png b/docs/images/office-add-ins-development-kit-samplepage-wordquickstart.png
diff --git a/docs/includes/dev-kit-prerequisites.md b/docs/includes/dev-kit-prerequisites.md
@@ -0,0 +1,5 @@
+## Prerequisites
+
+- Download and install [Visual Studio Code](https://code.visualstudio.com/).
+- Node.js (the latest LTS version). Visit the [Node.js site](https://nodejs.org/) to download and install the right version for your operating system. To verify if you've already installed these tools, run the commands `node -v` and `npm -v` in your terminal.
+- Office connected to a Microsoft 365 subscription. You might qualify for a Microsoft 365 E5 developer subscription through the [Microsoft 365 Developer Program](https://developer.microsoft.com/microsoft-365/dev-program), see [FAQ](/office/developer-program/microsoft-365-developer-program-faq#who-qualifies-for-a-microsoft-365-e5-developer-subscription-) for details. Alternatively, you can [sign up for a 1-month free trial](https://www.microsoft.com/microsoft-365/try?rtc=1) or [purchase a Microsoft 365 plan](https://www.microsoft.com/microsoft-365/buy/compare-all-microsoft-365-products).
diff --git a/docs/includes/dev-kit-start-debugging.md b/docs/includes/dev-kit-start-debugging.md
@@ -0,0 +1,5 @@
+1. Open the extension by selecting the Office Add-ins Development Kit icon in the **Activity Bar**.
+1. Select **Preview Your Office Add-in (F5)**
+1. In the Quick Pick menu, select the option **{Office Application} Desktop (Edge Chromium)**, where '{Office Application}' is the appropriate application, such as "Excel" or "Word". This will launch the add-in and debug the code.
+
+The development kit checks that the prerequisites are met before debugging starts. Check the terminal for detailed information if there are issues with your environment. After this process, the Office desktop application launches and sideloads the add-in. Please note that the first time you run a project, it may make take a few minutes to install the dependencies. You'll need to install the certificate when prompted.
diff --git a/docs/includes/dev-kit-stop-debugging.md b/docs/includes/dev-kit-stop-debugging.md
@@ -0,0 +1,7 @@
+## Stop testing your Office Add-in
+
+Once you are finished testing and debugging the add-in, *always* close the add-in by following these steps. (Closing the Office application or web server window doesn't reliably deregister the add-in.)
+
+1. Open the extension by selecting the Office Add-ins Development Kit icon in the **Activity Bar**.
+1. Select **Stop Previewing Your Office Add-in**. This closes the web server and removes the add-in from the registry and cache.
+1. Close the Office application window.
diff --git a/docs/includes/dev-kit-troubleshooting.md b/docs/includes/dev-kit-troubleshooting.md
@@ -0,0 +1,12 @@
+## Troubleshooting
+
+If you have problems running the add-in, take these steps.
+
+- Close any open instances of Office.
+- Close the previous web server started for the add-in with the **Stop Previewing Your Office Add-in** Office Add-ins Development Kit extension option.
+
+The article [Troubleshoot development errors with Office Add-ins](../testing/troubleshoot-development-errors.md) contains solutions to common problems. If you're still having issues, [create a GitHub issue](https://aka.ms/officedevkitnewissue) and we'll help you.  
+
+For information on running the add-in on Office on the web, see [Sideload Office Add-ins to Office on the web](../testing/sideload-office-add-ins-for-testing.md).
+
+For information on debugging on older versions of Office, see [Debug add-ins using developer tools in Microsoft Edge Legacy](../testing/debug-add-ins-using-devtools-edge-legacy.md).
diff --git a/docs/includes/devkit-project-components-taskpane.md b/docs/includes/devkit-project-components-taskpane.md
@@ -0,0 +1,8 @@
+## Explore the project
+
+The add-in project that you've created with the Office Add-ins Development Kit contains sample code for a basic task pane add-in. If you'd like to explore the components of your add-in project, open the project in your code editor and review the files listed below. When you're ready to try out your add-in, proceed to the next section.
+
+1. The **./manifest.xml** or **./manifest.json** file in the root directory of the project defines the settings and capabilities of the add-in.
+1. The **./src/taskpane/taskpane.html** file contains the HTML markup for the task pane.
+1. The **./src/taskpane/taskpane.css** file contains the CSS that's applied to content in the task pane.
+1. The **./src/taskpane/taskpane.js** file contains the Office JavaScript API code that facilitates interaction between the task pane and the Office client application.
diff --git a/docs/overview/set-up-your-dev-environment.md b/docs/overview/set-up-your-dev-environment.md
@@ -1,7 +1,7 @@
 ---
 title: Set up your development environment
 description:  Set up your developer environment to build Office Add-ins.
-ms.date: 08/22/2024
+ms.date: 12/12/2024
 ms.topic: install-set-up-deploy
 ms.localizationpriority: medium
 ---
@@ -124,7 +124,7 @@ You can create Office add-in projects in Visual Studio Code with either the Team
 
 Install [Visual Studio Code](https://code.visualstudio.com/) and then install the latest version of Teams Toolkit as described in [Install Teams Toolkit](/microsoftteams/platform/toolkit/install-teams-toolkit?tabs=vscode).
 
-#### Install the Office Add-ins Development Kit extension (preview)
+#### Install the Office Add-ins Development Kit extension 
 
 The Office Add-ins Development Kit extension for Visual Studio Code lets you create and run new add-ins directly from the IDE. For more information about the extension, see [Create Office Add-in projects using Office Add-ins Development Kit for Visual Studio Code](../develop/development-kit-overview.md).
 

diff --git a/docs/quickstarts/excel-quickstart-jquery.md b/docs/quickstarts/excel-quickstart-jquery.md
@@ -1,15 +1,44 @@
 ---
 title: Build your first Excel task pane add-in
 description: Learn how to build a simple Excel task pane add-in by using the Office JS API and the Yo Office tool.
-ms.date: 08/20/2024
+ms.date: 12/12/2024
 ms.service: excel
 ms.localizationpriority: high
 ---
 
 # Build an Excel task pane add-in
 
-In this article, you'll walk through the process of building an Excel task pane add-in with Yo Office.
+In this article, you'll walk through the process of building an Excel task pane add-in. You'll use either the Office Add-ins Development Kit or the Yeoman generator to create your Office Add-in. Select the tab for the one you'd like to use and then follow the instructions to create your add-in and test it locally. If you'd like to create the add-in project within Visual Studio Code, we recommend the Office Add-ins Development Kit.
 
+# [Office Add-ins Development Kit](#tab/devkit)
+
+[!include[Dev_kit prerequisites](../includes/dev-kit-prerequisites.md)]
+
+## Create the add-in project
+
+Click the following button to create an add-in project using the Office Add-ins Development Kit for Visual Studio Code. You'll be prompted to install the extension if don't already have it. A page that contains the project description will open in Visual Studio Code.
+
+> [!div class="nextstepaction"]
+> [Create an add-in in Visual Studio Code](vscode://msoffice.microsoft-office-add-in-debugger/open-specific-sample?sample-id=excel-get-started-with-dev-kit)
+
+In the prompted page, select **Create** to create the add-in project. In the **Workspace folder** dialog that opens, select the folder where you want to create the project. 
+
+:::image type="content" source="../images/office-add-ins-development-kit-samplepage-excelquickstart.png" alt-text="The Development Kit sample gallery in Visual Studio Code":::
+
+The Office Add-ins Development Kit will create the project. It will then open the project in a *second* Visual Studio Code window. Close the original Visual Studio Code window.
+
+> [!NOTE]
+> If you use VSCode Insiders, or you have problems opening the project page in VSCode, install the extension manually by following [these steps](../develop/development-kit-overview.md?tabs=vscode), and find the sample in the sample gallery.
+[!include[Devkit_project_components_taskpane](../includes/devkit-project-components-taskpane.md)]
+
+## Try it out
+
+[!include[Dev_kit_start_debugging](../includes/dev-kit-start-debugging.md)]
+
+[!include[Dev_kit_stop_debugging](../includes/dev-kit-stop-debugging.md)]
+
+[!include[Dev_kit_troubleshooting](../includes/dev-kit-troubleshooting.md)]
+# [Yeoman generator](#tab/yeoman)
 ## Prerequisites
 
 [!include[Yeoman generator prerequisites](../includes/quickstart-yo-prerequisites.md)]

diff --git a/docs/quickstarts/word-quickstart-yo.md b/docs/quickstarts/word-quickstart-yo.md
@@ -1,15 +1,45 @@
 ---
 title: Build your first Word task pane add-in
 description: Learn how to build a simple Word task pane add-in by using the Office JavaScript API.
-ms.date: 08/20/2024
+ms.date: 12/12/2024
 ms.service: word
 ms.localizationpriority: high
 ---
 
 # Build your first Word task pane add-in
 
-In this article, you'll walk through the process of building a Word task pane add-in.
+In this article, you'll walk through the process of building a Word task pane add-in. You'll use either the Office Add-ins Development Kit or the Yeoman generator to create your Office Add-in. Select the tab for the one you'd like to use and then follow the instructions to create your add-in and test it locally. If you'd like to create the add-in project within Visual Studio Code, we recommend the Office Add-ins Development Kit.
 
+# [Office Add-ins Development Kit](#tab/devkit)
+
+[!include[Dev_kit prerequisites](../includes/dev-kit-prerequisites.md)]
+
+## Create the add-in project
+
+Click the following button to create an add-in project using the Office Add-ins Development Kit for Visual Studio Code. You'll be prompted to install the extension if don't already have it. A page that contains the project description will open in Visual Studio Code.
+
+> [!div class="nextstepaction"]
+> [Create an add-in in Visual Studio Code](vscode://msoffice.microsoft-office-add-in-debugger/open-specific-sample?sample-id=word-get-started-with-dev-kit)
+
+In the prompted page, select **Create** to create the add-in project. In the **Workspace folder** dialog that opens, select the folder where you want to create the project. 
+
+:::image type="content" source="../images/office-add-ins-development-kit-samplepage-wordquickstart.png" alt-text="The Development Kit sample gallery in Visual Studio Code":::
+
+The Office Add-ins Development Kit will create the project. It will then open the project in a *second* Visual Studio Code window. Close the original Visual Studio Code window.
+
+> [!NOTE]
+> If you use VSCode Insiders, or you have problems opening the project page in VSCode, install the extension manually by following [these steps](../develop/development-kit-overview.md?tabs=vscode), and find the sample in the sample gallery.
+
+[!include[Devkit_project_components_taskpane](../includes/devkit-project-components-taskpane.md)]
+
+## Try it out
+
+[!include[Dev_kit_start_debugging](../includes/dev-kit-start-debugging.md)]
+
+[!include[Dev_kit_stop_debugging](../includes/dev-kit-stop-debugging.md)]
+
+[!include[Dev_kit_troubleshooting](../includes/dev-kit-troubleshooting.md)]
+# [Yeoman generator](#tab/yeoman)
 ## Prerequisites
 
 [!include[Yeoman generator prerequisites](../includes/quickstart-yo-prerequisites.md)]