ApiDOM VS Code Extension

Functionality

This extension is based on ApiDOM and provides the following:

• Rich editor for multiple languages, currently supporting OpenAPI, AsyncAPI, API Design Systems:

  • documentation
  • validation
  • linting (custom rules)
  • navigation
  • completion
  • semantic syntax highlighting

• Preview pane for API specification documents

Structure

.
├── bin/apidom-lsp-vscode-${version}.vsix // packaged extension ready for installation in VS Code
├── client // VS Code Language Client + Extension
│   ├── src
│   │   ├── test // End to End tests for Language Client / Server
│   │   └── extension.ts // Language Client entry point
├── package.json // The extension manifest.
└── server // Language Server
    └── src
        ├── test // LSP Server tests
        └── server.ts // Language Server entry point, uses apidom-ls

Try it out

The extension can be installed from the VSIX file located in bin directory

Once installation is finished, open any OpenAPI, AsyncAPI or API Design Systems document in VS Code.

Getting started

Some of npm packages that this extension depends on are currently hosted on GitHub packages registry. For more information about installing npm packages from GitHub packages registry please visit Installing a package section in their documentation.

Clone the GitHub repository

 $ git clone https://github.com/swagger-api/apidom-lsp-vscode.git
 $ cd apidom-lsp-vscode

Prerequisites

Node.js >= 16.13.2 and npm >= 8.1.02 are the minimum required versions that this repo runs on. We recommend using the latest version of Node.js@16 though. We're using node-gyp to build some fragments that require Python 3.x. emscripten or docker needs to be installed on your operating system. We strongly recommend going with a docker option. VS Code IDE needs to be installed on your system.

Installation

 $ npm install
 $ npm run build

Run VS Code extension in VSCode instance

• Open VS Code
• Open this repository in VS Code: File -> Open Folder
• From Activity Bar, click on Run and Debug icon
• Select Launch Client from the dropdown menu
• Run the launch config by clicking on small green play button
• If you want to debug the server as well use the launch configuration Attach to Server
• New VS Code window will open where ApiDOM VS Code Extension is loaded in
• Create new text file: File -> New Text File
• Start writing your specification document (OpenAPI, AsyncAPI, API Design Systems)

Specification preview

You can preview your specification document by right mouse click -> Command Pallete -> Show Preview using SwaggerUI. The pane with rendered specification document is opened and re-rendered whenever you edit the specification document.

Test Server component

 $ npm run test