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

swagger-api / apidom-lsp-vscode