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"
}

TypeSpec