Add instructions for VS Code

Author: Sorita Heng

modules/ROOT/partials/integrations/blazor-postinstall.adoc

@@ -1,23 +1,21 @@
-. Verify the installation by checking the `+ItemGroup+` references in `+BlazorApp.csproj+`, such as:
-+
-_File:_ `+BlazorApp.csproj+`
+. Verify the installation by checking the `+ItemGroup+` references in the project file. For example, if the project is named _BlazorApp_, the relevant file would be `+BlazorApp.csproj+` with the dependency referenced as follows: 
 +
 [source,xml]
 ----
 <ItemGroup>
   <PackageReference Include="TinyMCE.Blazor" Version="X.Y.Z" />
 </ItemGroup>
 ----
-. Add the `+tinymce-blazor.js+` script to the main page.
-* If using the Blazor Web App, add the script in `+Components/App.razor+`, for example:
+. Add the `+tinymce-blazor.js+` script to the main page. If using the Blazor Web App, add the script in `+Components/App.razor+`, for example:
 +
 [source,html]
 ----
 <script src="_framework/blazor.web.js"></script>
 <script src="_content/TinyMCE.Blazor/tinymce-blazor.js"></script>
 ----
-
++
 [NOTE]
+====
 The location of the script depends on the type of Blazor app, including Blazor Server and Blazor WebAssembly (WASM) which are not covered in this guide. 
 
 * If using Blazor Server, add the script in `+Pages/_Host.cshtml+`, for example: 
@@ -34,17 +32,33 @@ The location of the script depends on the type of Blazor app, including Blazor S
 <script src="_content/TinyMCE.Blazor/tinymce-blazor.js"></script>
 <script src="_framework/blazor.webassembly.js"></script>
 ----
+====
++
 
-. Add the `+Editor+` component to a page by either: 
-* Using the `+using+` directive
+. Add the `+Editor+` component to a page by either:  
+* Using the `+using+` directive:  
++
+[source,cs]
+----
+@using TinyMCE.Blazor
+<Editor />
+----
++
+For example: 
++
+_File:_ `+Pages/Index.razor+`
 +
 [source,cs]
 ----
+@page "/"
 @rendermode InteractiveServer
 @using TinyMCE.Blazor
+
+<h1>Hello, world!</h1>
+Welcome to your new app.
 <Editor />
 ----
-* Using the full component and package name
+* Using the component with its namespace: 
 +
 [source,cs]
 ----
@@ -64,9 +78,11 @@ _File:_ `+Pages/Index.razor+`
 <h1>Hello, world!</h1>
 Welcome to your new app.
 <Editor />
-----
+---- 
++
 [IMPORTANT]
-In a Blazor Web App, different render modes determine how components are rendered and how interactivity is handled. To enable JavaScript interactivity, ensure that `+@rendermode InteractiveServer+` is specified in a page component.   
+In a Blazor Web App, different render modes determine how components are rendered and how interactivity is handled. To enable JavaScript interactivity, ensure that `+@rendermode InteractiveServer+` is specified in a page component. 
++
 
 ifeval::["{productSource}" != "cloud"]
 

modules/ROOT/partials/integrations/blazor-quick-start.adoc

@@ -9,6 +9,29 @@ Select from the following guides:
 [[using-visual-studio-code]]
 == Using Visual Studio Code (VS Code)
 
+=== Prerequisites
+
+This procedure requires:
+
+* https://code.visualstudio.com/[Visual Studio Code (VS Code)^] 
+* https://dotnet.microsoft.com/en-us/download[.NET SDK^]
+* https://learn.microsoft.com/en-us/visualstudio/subscriptions/vs-c-sharp-dev-kit[C# Dev Kit VS Code Extension^] 
+
+Alternatively, the https://learn.microsoft.com/en-us/dotnet/core/install/windows#install-with-visual-studio-code[.NET WinGet Configuration file^] can be downloaded to install the necessary dependencies. 
+
+=== Procedure
+
+. In VS Code, open the Command Palette by pressing `+Ctrl+Shift+P+`. Find `.NET: New Project` and select it to create a new project.
+. Select *Blazor Web App* from the list of templates and follow the steps to set up the project. 
+. Using the Command Palette, find and select `.NuGet: Add NuGet Package`. Enter `+TinyMCE.Blazor+` and select the package along with the version to install. 
+
+ifeval::["{productSource}" == "package-manager"]
+
+. To use the self-hosted version of `{productName}`, install the `{productname}` package from the Command Pallette.
+endif::[]
+include::partial$integrations/blazor-postinstall.adoc[]
+
+
 [[using-visual-studio]]
 == Using Visual Studio
 
@@ -22,7 +45,7 @@ This procedure requires:
 === Procedure
 
 . On the Visual Studio toolbar, click the https://docs.microsoft.com/en-us/visualstudio/ide/create-new-project[*New Project* button].
-. Select the *Blazor Web App* template and name the project 'BlazorApp'.
+. Select the *Blazor Web App* template and follow the steps to set up the project. 
 . Use the NuGet package manager console to install the `+TinyMCE.Blazor+` package, such as:
 +
 [source,sh]