Aliyun Serverless VSCode Extension is a graphic development, debugging, and resource-managing tool for Function Compute based on Visual Studio Code (VS Code). This topic describes how to use Aliyun Serverless VSCode Extension to create functions, and its other common features.

Prerequisites

If you need to use all features of Aliyun Serverless VSCode Extension, make sure to first install the following components on your local computer.

Background information

Aliyun Serverless VSCode Extension is a VS Code-based development, debugging, and deployment tool provided by Function Compute. This tool integrates the features of Function Compute SDK and the Fun command-line tool of Function Compute. You can use this extension to perform the following operations:

  • Initialize projects and create functions in your local environment.
  • Run and debug local functions, and deploy local functions of your services to Function Compute.
  • Obtain functions and their configurations and call functions from Function Compute.
  • Obtain syntax prompts of template files, including automatic completion, schema validation, and hovering prompts.

Install the extension

  1. Start VS Code and go to the extension marketplace.
  2. Search for Aliyun Serverless, view the details, and install the extension.
  3. Restart VS Code. The icon for Aliyun Serverless VSCode Extension appears in the left-side navigation pane.

Quick start

  1. Bind an Alibaba Cloud account.
    1. In the left-side navigation pane, click the Aliyun Serverless VSCode Extension icon icon_Aliyun_Serverless_VSCode_Extension, and then click Bind New Account.
      vscode_bind_account
    2. Enter the account ID, AccessKeyID, AccessKeySecret, and the alias (local name) of the account in sequence.
      vscode_bind_account_toast
      After the binding is complete, you can view the services and functions in Function Compute under the Alibaba Cloud account in the REMOTE RESOURCES pane.vscode_bind_account_result
      To view services and functions in different regions, click the More Actions icon in the upper-right corner of the REMOTE RESOURCES panel and choose FC: Switch Region from the shortcut menu that appears.vscode_switch_region
  2. Create a function.
    1. Open an empty directory file in VS Code. In the LOCAL RESOURCES panel, click the FC: Create Function icon to initialize a Function Compute project locally.
      vscode_create_function
    2. Enter or select the service name, function name, function runtime, and function type in sequence as instructed. After you set these parameters, Aliyun Serverless VSCode Extension automatically creates the function. The new local service and function appear in the LOCAL RESOURCES panel.
      vscode_create_function_result
      You can also click the FC: Create Function icon next to a service in the LOCAL RESOURCES panel to create functions for this service. Enter or select the function name, function runtime, and function type in sequence as instructed.vscode_create_function_underservice
  3. Deploy services and functions.
    1. In the LOCAL RESOURCES panel, click the FC: Deploy icon to deploy local services and functions to Function Compute.
      vscode_deploy
      After the deployment is complete, click the FC: Refresh icon in the REMOTE RESOURCES panel to view the deployed services and functions.vscode_deploy_result

Other features

  • Call functions locally
    In the LOCAL RESOURCES panel, click the FC: Invoke icon next to a function or click the link in the Handler file to call this function locally.vscode_local_invoke
    The logs and results of the function appear in the TERMINAL panel.vscode_local_invoke_result
    Aliyun Serverless VSCode Extension creates an event.dat file under the directory that stores the handler file. You can modify the event.dat file to configure events that trigger the function when the function is called.vscode_local_invoke_event
  • Debug functions locally
    Notice
    • If you need to debug functions that run in Python 2.7 or Python 3 runtimes, you must first install the Python extension.
    • If you need to debug functions that run in PHP runtimes, you must first install the PHP Debug extension.
    In the LOCAL RESOURCES panel, click the FC: Debug icon next to a function or click the link in the Handler file to debug this function locally.vscode_local_debug
    Insert a breakpoint into the code and start debugging. The debugging information will appear.vscode_local_debug_result

    Aliyun Serverless VSCode Extension creates an event.dat file under the directory that stores the function handler file. You can modify the event.dat file to configure events that trigger the function when the function is debugged.

  • Call functions in Function Compute
    In the REMOTE RESOURCES panel, click the FC: Remote Invoke icon next to a function to call this function.vscode_remote_invoke
    The logs and results of the function appear in the TERMINAL panel.vscode_local_invoke_result

    Aliyun Serverless VSCode Extension creates an event.dat file under the root directory of the corresponding project. You can modify the event.dat file to configure events that trigger the function when the function is called.

  • Configure parameters in templates files

    Fun uses YAML template files to describe serverless applications. When you use Aliyun Serverless VSCode Extension to create a function, default values will be automatically used for parameters in the corresponding template file. If you need to modify the configuration of a local service or function, click the name of this service or function in the LOCAL RESOURCES panel to go to the descriptions in the template file. The corresponding description blocks are highlighted and then gradually dim.

    vscode_goto_template
  • Obtain template prompts
    • Completion

      All keys in the template.yml file are automatically completed based on precise prompts provided based on the indentation level.

    • Schema validation

      All resource configuration information in the template.yml file is validated based on the template specification description.

    • Hovering prompts

      All resource configuration information in the template.yml file is prompted. In the template.yml file, when you move the pointer over a resource key, a hovering prompt appears for the corresponding resource. This prompt shows configurable fields under this resource key, such as the field name and field type.

Feedback

Scan the following QR code to join the Function Compute DingTalk user group for troubleshooting or give feedback on GitHub.vscode_qr_code