Quick Start to VSCode Plug-ins: Write LSP Project from Scratch

By Xulun

Now that since from the other tutorials in this tutorial series we have gained some basic knowledge about VSCode plug-ins, LSP, and code programming languages, we can start to build a Client and Server mode LSP plug-in. To do this, in this tutorial we will be writing a complete LSP project from scratch.

Writing the Server Code Server Directory

As the first step of this tutorial, we will be dealing with the server directory by writing the server code.

  • package.json

First, write package.json. The Microsoft SDK has encapsulated most of the details for us, so in fact, we only need to reference the vscode-languageserver module:

With package.json, we can run the npm install command in the server directory to install dependencies.

After installation, the following modules will be referenced:

  • tsconfig.json

We are to use typescript to write the code for the server, so we use tsconfig.json to configure the Typescript options:

  • server.ts

Next, we start writing ts files for the server. First, we need to introduce the vscode-languageserver and vscode-jsonrpc dependencies:

Below, we use log4js to print the log for convenience, introduce its module through npm i log4js --save, and initialize it:

Then, we can call createConnection to create a connection:

Next, we can handle events, such as the initialization events described in section 6:

After the three-way handshake, a message can be displayed on VSCode:

Finally, the code completed in section 5 can be added:

  • Client directory

At this point, the server is ready. Next, let’s develop the client.

  • package.json

Similarly, the first step is to write package.json, which depends on vscode-languageclient. Do not confuse it with the vscode-languageserver library used by the server.

  • tsconfig.json

Anyway, since it is also ts, and the client code doesn’t differ from the server code, so just copy the above code:

  • extension.ts

Next, we will write extension.ts. In fact, the client does less work than the server, and so in essence, it is to start the server:

serverOptions is used to configure server parameters. It is defined as:

A brief diagram of the related types is as follows:

Let’s configure it as follows:

The complete code of extension.ts is as follows:

  • Integrate and run

Now, everything is ready except packaging. Let’s integrate the above client and server.

  • Plug-in configuration — package.json

Now our focus is mainly on entry functions and activation events:

The complete package.json is as follows:

  • Configure tsconfig.json

We also need a general tsconfig.json that references the client and server directories:

  • Configure VSCode

Above, we have written the code for the client and the server, and the code for integrating them. Now below, we will write two configuration files in the .vscode directory, so that we can debug and run them more conveniently.

  • .vscode/launch.json

With this file, we have the running configuration, which can be started through F5.

  • .vscode/tasks.json

The npm compile and npm watch scripts are configured.

After everything is ready, run the npm install command in the plug-in root directory. Then, run the build command (which is cmd-shift-B on Mac) in VSCode, so js and map under "out" directories of the server and client are built.

Now, it can be run with the F5 key. The source code for this example is stored at code.aliyun.com:lusinga/testlsp.git.

Original Source

Follow me to keep abreast with the latest technology news, industry insights, and developer trends.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store