typespec-vscode

TypeSpec Extension in Visual Studio Code

Repository | Documentation | Issues | Samples

The TypeSpec extension for Visual Studio Code enhances the development of TypeSpec by leveraging VS Code's powerful features. It provides:

• IntelliSense and syntax highlighting
• Code autocompletion and formatting
• Live diagnostics and quick fixes
• Refactoring tools (rename, go-to definition, etc.)
• Seamless project setup and emitter configuration
• Generate code from TypeSpec

Prerequisites

Before using the TypeSpec extension, install Node.js and verify npm is available:

npm --version

Other necessary installations will be prompted within the extension as needed.

Features

Writing TypeSpec

• IntelliSense & Auto-completion: Code faster with smart suggestions.
• Code Formatting & Folding: Keep your code clean and organized with built-in formatting and folding support.
• Syntax Highlighting: Clear and readable TypeSpec syntax.
• Live Diagnostics: Get real-time feedback on code issues.
• Quick Fixes & Refactoring: Rename, go-to definition, and format with ease.
• Hover Info: Get detailed information about TypeSpec elements by hovering over them.

Project Initialization

• Create TypeSpec Project: Easily initialize a new TypeSpec project based on a template, ensuring a structured and ready-to-use setup.

Generating Code from TypeSpec

The extension allows generating various outputs from TypeSpec:

• OpenAPI Specification
• Server SDKs: Generate server stubs for different back-end frameworks.
• Client SDKs: Generate client code for multiple languages, including:
  • .NET (C#)
  • Python
  • Java
  • JavaScript/TypeScript

Invoke TypeSpec: Generate From TypeSpec to generate code:

Commands

The extension provides the following commands:

Command	Description
TypeSpec: Create TypeSpec Project	Scaffold a new TypeSpec project.
TypeSpec: Install TypeSpec Compiler/CLI globally	Install the TypeSpec Compiler/CLI globally.
TypeSpec: Generate From TypeSpec	Compile and generate from TypeSpec files into the specified output.
TypeSpec: Restart TypeSpec Server	Restart the TypeSpec language server.
TypeSpec: Show Output Channel	Open the TypeSpec output channel to view logs.

Configuration

TypeSpec will interpolate a few variables using this pattern ${<name>}. For example ${workspaceFolder}.

Available variables:

• workspaceFolder: Corespond to the root of your Visual Studio workspace.

typespec.tsp-server.path: Configure the server path

There are cases where the TypeSpec project is located in a subfolder. In such cases, the TypeSpec extension is not able to find the tsp compiler automatically and needs a little guidance. This setting provides the ability to configure where the tsp compiler is located.

{
  "typespec.tsp-server.path": "${workspaceFolder}/my-nested-project/node_modules/@typespec/compiler"
}