Skip to content

Commit 66fa7d8

Browse files
ggailey777ggailey777
committed
New VS Code quickstart with multi-lang pivots
1 parent c6a4cfe commit 66fa7d8

File tree

4 files changed

+224
-5
lines changed

4 files changed

+224
-5
lines changed

‎articles/azure-functions/create-first-function-vs-code-csharp.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,13 +43,13 @@ In this section, you use Visual Studio Code to create a local Azure Functions pr
4343
|--|--|
4444
|**Select a language for your function project**|Choose `C#`.|
4545
| **Select a .NET runtime** | Choose `.NET 8.0 Isolated (LTS)`.|
46-
|**Select a template for your project's first function**|Choose `HTTP trigger`.<sup>1</sup>|
46+
|**Select a template for your project's first function**|Choose `HTTP trigger`.<sup>*</sup>|
4747
|**Provide a function name**|Type `HttpExample`.|
4848
|**Provide a namespace** | Type `My.Functions`. |
4949
|**Authorization level**|Choose `Anonymous`, which enables anyone to call your function endpoint. For more information, see [Authorization level](functions-bindings-http-webhook-trigger.md#http-auth).|
5050
|**Select how you would like to open your project**|Select `Open in current window`.|
5151

52-
<sup>1</sup> Depending on your VS Code settings, you may need to use the `Change template filter` option to see the full list of templates.
52+
<sup>*</sup> Depending on your VS Code settings, you may need to use the `Change template filter` option to see the full list of templates.
5353

5454
1. Visual Studio Code uses the provided information and generates an Azure Functions project with an HTTP trigger. You can view the local project files in the Explorer. For more information about the files that are created, see [Generated project files](functions-develop-vs-code.md?tabs=csharp#generated-project-files).
5555

‎articles/azure-functions/how-to-create-function-azure-cli.md

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -319,6 +319,4 @@ When you navigate to this URL, the browser should display similar output as when
319319
## Next steps
320320

321321
> [!div class="nextstepaction"]
322-
> [Connect to Azure Cosmos DB](functions-add-output-binding-cosmos-db-vs-code.md?pivots=programming-language-csharp&tabs=isolated-process)
323-
> [!div class="nextstepaction"]
324-
> [Connect to Azure Queue Storage](functions-add-output-binding-storage-queue-cli.md?pivots=programming-language-csharp&tabs=isolated-process)
322+
> [Connect to Azure Queue Storage](functions-add-output-binding-storage-queue-cli.md)

‎articles/azure-functions/how-to-create-function-vs-code.md

Lines changed: 182 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,182 @@
1+
---
2+
title: Create a JavaScript function using Visual Studio Code - Azure Functions
3+
description: Learn how to create a JavaScript function, then publish the local Node.js project to serverless hosting in Azure Functions using the Azure Functions extension in Visual Studio Code.
4+
ms.topic: quickstart
5+
ms.date: 08/01/2025
6+
ms.custom: mode-api, vscode-azure-extension-update-complete, devx-track-js
7+
zone_pivot_groups: programming-languages-set-functions
8+
---
9+
10+
# Quickstart: Create a function in Azure using Visual Studio Code
11+
12+
Use Visual Studio Code to create a function that responds to HTTP requests. Test the code locally, then deploy it to the serverless environment of Azure Functions.
13+
14+
Completing this quickstart incurs a small cost of a few USD cents or less in your Azure account.
15+
16+
## Prerequisites
17+
18+
[!INCLUDE [functions-requirements-visual-studio-code](../../includes/functions-requirements-visual-studio-code.md)]
19+
20+
[!INCLUDE [functions-install-core-tools-vs-code](../../includes/functions-install-core-tools-vs-code.md)]
21+
22+
## <a name="create-an-azure-functions-project"></a>Create your local project
23+
24+
In this section, you use Visual Studio Code to create a local Azure Functions project in JavaScript. Later in this article, you publish your function code to Azure.
25+
26+
1. In Visual Studio Code, press <kbd>F1</kbd> to open the command palette and search for and run the command `Azure Functions: Create New Project...`.
27+
28+
2. Choose the directory location for your project workspace and choose **Select**. You should either create a new folder or choose an empty folder for the project workspace. Don't choose a project folder that is already part of a workspace.
29+
30+
3. Provide the following information at the prompts:
31+
::: zone pivot="programming-language-csharp"
32+
33+
|Prompt|Selection|
34+
|--|--|
35+
|**Select a language**|Choose `C#`.|
36+
|**Select a .NET runtime**|Choose `.NET 8.0 LTS`.|
37+
|**Select a template for your project's first function**|Choose `HTTP trigger`.<sup>*</sup>|
38+
|**Provide a function name**|Type `HttpExample`.|
39+
|**Provide a namespace** | Type `My.Functions`. |
40+
|**Authorization level**|Choose `Anonymous`, which enables anyone to call your function endpoint. For more information, see [Authorization level](functions-bindings-http-webhook-trigger.md#http-auth).|
41+
|**Select how you would like to open your project**|Choose `Open in current window`.|
42+
43+
::: zone-end
44+
::: zone pivot="programming-language-java"
45+
46+
|Prompt|Selection|
47+
|--|--|
48+
|**Select a language**| Choose `Java`.|
49+
|**Select a version of Java**| Choose `Java 8`, `Java 11`, `Java 17` or `Java 21`, the Java version on which your functions run in Azure. Choose a Java version that you've verified locally. |
50+
| **Provide a group ID** | Choose `com.function`. |
51+
| **Provide an artifact ID** | Choose `myFunction`. |
52+
| **Provide a version** | Choose `1.0-SNAPSHOT`. |
53+
| **Provide a package name** | Choose `com.function`. |
54+
| **Provide an app name** | Choose `myFunction-12345`. |
55+
|**Select a template for your project's first function**| Choose `HTTP trigger`.<sup>*</sup>|
56+
| **Select the build tool for Java project** | Choose `Maven`. |
57+
|**Provide a function name**| Enter `HttpExample`.|
58+
|**Authorization level**| Choose `Anonymous`, which lets anyone call your function endpoint. For more information, see [Authorization level](functions-bindings-http-webhook-trigger.md#http-auth).|
59+
|**Select how you would like to open your project**| Choose `Open in current window`.|
60+
61+
::: zone-end
62+
::: zone pivot="programming-language-javascript"
63+
64+
|Prompt|Selection|
65+
|--|--|
66+
|**Select a language**|Choose `JavaScript`.|
67+
|**Select a JavaScript programming model**|Choose `Model V4`.|
68+
|**Select a template for your project's first function**|Choose `HTTP trigger`.<sup>*</sup>|
69+
|**Provide a function name**|Type `HttpExample`.|
70+
|**Authorization level**|Choose `Anonymous`, which enables anyone to call your function endpoint. For more information, see [Authorization level](functions-bindings-http-webhook-trigger.md#http-auth).|
71+
|**Select how you would like to open your project**|Choose `Open in current window`.|
72+
73+
::: zone-end
74+
::: zone pivot="programming-language-typescript"
75+
76+
|Prompt|Selection|
77+
|--|--|
78+
|**Select a language**|Choose `TypeScript`.|
79+
|**Select a JavaScript programming model**|Choose `Model V4`.|
80+
|**Select a template for your project's first function**|Choose `HTTP trigger`.<sup>*</sup>|
81+
|**Provide a function name**|Type `HttpExample`.|
82+
|**Authorization level**|Choose `Anonymous`, which enables anyone to call your function endpoint. For more information, see [Authorization level](functions-bindings-http-webhook-trigger.md#http-auth).|
83+
|**Select how you would like to open your project**|Choose `Open in current window`.|
84+
85+
::: zone-end
86+
::: zone pivot="programming-language-python"
87+
88+
|Prompt|Selection|
89+
|--|--|
90+
|**Select a language**| Choose `Python`.|
91+
|**Select a Python interpreter to create a virtual environment**| Choose your preferred Python interpreter. If an option isn't shown, type in the full path to your Python binary.|
92+
|**Select a template for your project's first function** | Choose `HTTP trigger`.<sup>*</sup> |
93+
|**Name of the function you want to create**| Enter `HttpExample`.|
94+
|**Authorization level**| Choose `ANONYMOUS`, which lets anyone call your function endpoint. For more information, see [Authorization level](functions-bindings-http-webhook-trigger.md#http-auth).|
95+
|**Select how you would like to open your project** | Choose `Open in current window`.|
96+
97+
::: zone-end
98+
::: zone pivot="programming-language-powershell"
99+
100+
|Prompt|Selection|
101+
|--|--|
102+
|**Select a language for your function project**|Choose `PowerShell`.|
103+
|**Select a template for your project's first function**|Choose `HTTP trigger`.<sup>*</sup>|
104+
|**Provide a function name**|Type `HttpExample`.|
105+
|**Authorization level**|Choose `Anonymous`, which enables anyone to call your function endpoint. For more information, see [Authorization level](functions-bindings-http-webhook-trigger.md#http-auth).|
106+
|**Select how you would like to open your project**|Choose `Open in current window`.|
107+
108+
::: zone-end
109+
110+
<sup>*</sup> Depending on your VS Code settings, you may need to use the `Change template filter` option to see the full list of templates.
111+
112+
Using this information, Visual Studio Code generates an Azure Functions project with an HTTP trigger. You can view the local project files in the Explorer. To learn more about files that are created, see [Generated project files](functions-develop-vs-code.md?tabs=javascript#generated-project-files).
113+
114+
::: zone pivot="programming-language-python"
115+
4. In the local.settings.json file, update the `AzureWebJobsStorage` setting as in the following example:
116+
117+
```json
118+
"AzureWebJobsStorage": "UseDevelopmentStorage=true",
119+
```
120+
121+
This tells the local Functions host to use the storage emulator for the storage connection required by the Python v2 model. When you publish your project to Azure, this setting uses the default storage account instead. If you're using an Azure Storage account during local development, set your storage account connection string here.
122+
123+
## Start the emulator
124+
125+
1. In Visual Studio Code, press <kbd>F1</kbd> to open the command palette. In the command palette, search for and select `Azurite: Start`.
126+
127+
1. Check the bottom bar and verify that Azurite emulation services are running. If so, you can now run your function locally.
128+
::: zone-end
129+
[!INCLUDE [functions-run-function-test-local-vs-code](../../includes/functions-run-function-test-local-vs-code.md)]
130+
131+
After you verify that the function runs correctly on your local computer, you can optionally use AI tools, such as GitHub Copilot in Visual Studio Code, to update template-generated function code.
132+
133+
## Use AI to normalize and validate input
134+
135+
This is an example prompt for Copilot Chat that updates the existing Python function to retrieve parameters from either the query string or JSON body, apply formatting or type conversions, and return them as JSON in the response:
136+
137+
```copilot-prompt
138+
Modify the function to accept name, email, and age from either the query parameters or the JSON body of the request, whichever is available. Return all three parameters in the JSON response, applying these rules:
139+
Title-case the name
140+
Lowercase the email
141+
Convert age to an integer, otherwise return "not provided"
142+
Use sensible defaults if any parameter is missing
143+
```
144+
145+
You can customize your prompt to add specifics as needed. The rest of the article assumes that you can continue to use a GET command to call your endpoint. If GitHub Copilot updates your app so that it instead requires a POST request, you must instead use an HTTP testing tool that securely submits POST requests to call the `httpexample` endpoint.
146+
147+
GitHub Copilot is powered by AI, so surprises and mistakes are possible. For more information, see [Copilot FAQs](https://aka.ms/copilot-general-use-faqs). When you are satistfied with your app, you can use Visual Studio Code to publish the project directly to Azure.
148+
149+
[!INCLUDE [functions-sign-in-vs-code](../../includes/functions-sign-in-vs-code.md)]
150+
151+
## Create the function app in Azure
152+
153+
[!INCLUDE [functions-create-azure-resources-vs-code](../../includes/functions-create-azure-resources-vs-code.md)]
154+
155+
## Deploy the project to Azure
156+
157+
[!INCLUDE [functions-deploy-project-vs-code](../../includes/functions-deploy-project-vs-code.md)]
158+
159+
[!INCLUDE [functions-vs-code-run-remote](../../includes/functions-vs-code-run-remote.md)]
160+
161+
## Troubleshooting
162+
163+
Use the following table to resolve the most common issues encountered when using this article.
164+
165+
|Problem|Solution|
166+
|--|--|
167+
|Can't create a local function project?|Make sure you have the [Azure Functions extension](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azurefunctions) installed.|
168+
|Can't run the function locally?|Make sure you have the latest version of [Azure Functions Core Tools installed](functions-run-local.md?tabs=node) installed. <br/>When running on Windows, make sure that the default terminal shell for Visual Studio Code isn't set to WSL Bash.|
169+
|Can't deploy function to Azure?|Review the Output for error information. The bell icon in the lower right corner is another way to view the output. Did you publish to an existing function app? That action overwrites the content of that app in Azure.|
170+
|Couldn't run the cloud-based Function app?|Remember to use the query string to send in parameters.|
171+
172+
[!INCLUDE [functions-cleanup-resources-vs-code.md](../../includes/functions-cleanup-resources-vs-code-extension.md)]
173+
174+
## Next steps
175+
176+
You have used [Visual Studio Code](functions-develop-vs-code.md) to create a function app with a simple HTTP-triggered function. In the next articles, you expand that function by connecting to either Azure Cosmos DB or Azure Storage. To learn more about connecting to other Azure services, see [Add bindings to an existing function in Azure Functions](add-bindings-existing-function.md). If you want to learn more about security, see [Securing Azure Functions](security-concepts.md).
177+
178+
> [!div class="nextstepaction"]
179+
> [Connect to Azure Cosmos DB](functions-add-output-binding-cosmos-db-vs-code.md)
180+
> [!div class="nextstepaction"]
181+
> [Connect to Azure Queue Storage](functions-add-output-binding-storage-queue-vs-code.md)
182+

‎includes/functions-requirements-visual-studio-code.md

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
---
2+
author: ggailey777
3+
ms.service: azure-functions
4+
ms.topic: include
5+
ms.date: 08/01/2025
6+
ms.author: glenga
7+
---
8+
9+
+ An Azure account with an active subscription. [Create an account for free](https://azure.microsoft.com/free/?ref=microsoft.com&utm_source=microsoft.com&utm_medium=docs&utm_campaign=visualstudio).
10+
11+
+ [Visual Studio Code](https://code.visualstudio.com/) on one of the [supported platforms](https://code.visualstudio.com/docs/supporting/requirements#_platforms).
12+
13+
+ The [Azure Functions extension](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azurefunctions) for Visual Studio Code.
14+
::: zone pivot="programming-language-csharp"
15+
+ [.NET 8.0 SDK](https://dotnet.microsoft.com/download)
16+
17+
+ [C# extension](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csharp) for Visual Studio Code.
18+
::: zone-end
19+
::: zone pivot="programming-language-java"
20+
+ The [Java Development Kit](/azure/developer/java/fundamentals/java-support-on-azure), version 8, 11, 17 or 21(Linux).
21+
22+
+ [Apache Maven](https://maven.apache.org), version 3.0 or above.
23+
24+
+ The [Java extension pack](https://marketplace.visualstudio.com/items?itemName=vscjava.vscode-java-pack)
25+
::: zone-end
26+
::: zone pivot="programming-language-javascript,programming-language-typescript"
27+
+ [Node.js 18.x](https://nodejs.org/en/about/previous-releases) or above. Use the `node --version` command to check your version.
28+
::: zone-end
29+
+ [PowerShell 7.2](/powershell/scripting/install/installing-powershell-core-on-windows)
30+
31+
+ [.NET 6.0 runtime](https://dotnet.microsoft.com/download/dotnet)
32+
33+
+ The [PowerShell extension for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=ms-vscode.PowerShell).
34+
::: zone-end
35+
::: zone pivot="programming-language-python"
36+
+ Python versions that are [supported by Azure Functions](../articles/azure-functions/supported-languages.md#languages-by-runtime-version). For more information, see [How to install Python](https://wiki.python.org/moin/BeginnersGuide/Download).
37+
38+
+ The [Python extension](https://marketplace.visualstudio.com/items?itemName=ms-python.python) for Visual Studio Code.
39+
::: zone-end

0 commit comments

Comments
 (0)