typescript-language-server

What is typescript-language-server?

The typescript-language-server is an implementation of the Language Server Protocol (LSP) for TypeScript. It provides a range of features to enhance the development experience in editors and IDEs by offering functionalities like auto-completion, go-to-definition, and more.

What are typescript-language-server's main functionalities?

Auto-completion

This code sets up a basic TypeScript Language Server that provides auto-completion suggestions. When the user types, the server can suggest completions like 'console.log'.

const { createConnection, TextDocuments } = require('vscode-languageserver');
const connection = createConnection();
const documents = new TextDocuments();

connection.onInitialize(() => {
  return {
    capabilities: {
      textDocumentSync: documents.syncKind,
      completionProvider: {
        resolveProvider: true
      }
    }
  };
});

connection.onCompletion(() => {
  return [
    {
      label: 'console.log',
      kind: 1,
      data: 1
    }
  ];
});

connection.listen();

Go-to-definition

This code sets up a TypeScript Language Server that provides go-to-definition functionality. When the user requests the definition of a symbol, the server responds with the location of the definition.

const { createConnection, TextDocuments } = require('vscode-languageserver');
const connection = createConnection();
const documents = new TextDocuments();

connection.onInitialize(() => {
  return {
    capabilities: {
      textDocumentSync: documents.syncKind,
      definitionProvider: true
    }
  };
});

connection.onDefinition((params) => {
  return {
    uri: params.textDocument.uri,
    range: {
      start: { line: 0, character: 0 },
      end: { line: 0, character: 10 }
    }
  };
});

connection.listen();

Diagnostics

This code sets up a TypeScript Language Server that provides diagnostics. It scans the document for 'TODO' comments and reports them as warnings.

const { createConnection, TextDocuments, Diagnostic, DiagnosticSeverity } = require('vscode-languageserver');
const connection = createConnection();
const documents = new TextDocuments();

connection.onInitialize(() => {
  return {
    capabilities: {
      textDocumentSync: documents.syncKind
    }
  };
});

documents.onDidChangeContent((change) => {
  const diagnostics = [];
  const text = change.document.getText();
  const pattern = /TODO/g;
  let match;
  while ((match = pattern.exec(text))) {
    diagnostics.push({
      severity: DiagnosticSeverity.Warning,
      range: {
        start: change.document.positionAt(match.index),
        end: change.document.positionAt(match.index + match[0].length)
      },
      message: `TODO found: ${match[0]}`,
      source: 'ex'
    });
  }
  connection.sendDiagnostics({ uri: change.document.uri, diagnostics });
});

connection.listen();

Other packages similar to typescript-language-server

vscode-json-languageserver

The vscode-json-languageserver is a Language Server Protocol implementation for JSON. It provides similar functionalities like auto-completion, go-to-definition, and diagnostics but is specifically tailored for JSON files. Compared to typescript-language-server, it is focused on JSON rather than TypeScript.

vscode-css-languageserver-bin

The vscode-css-languageserver-bin is a Language Server Protocol implementation for CSS. It offers features like auto-completion, go-to-definition, and diagnostics for CSS files. While typescript-language-server is for TypeScript, this package is specialized for CSS.

vscode-html-languageserver-bin

The vscode-html-languageserver-bin is a Language Server Protocol implementation for HTML. It provides functionalities such as auto-completion, go-to-definition, and diagnostics for HTML files. This package is similar to typescript-language-server but is designed for HTML.

README

TypeScript Language Server

Language Server Protocol implementation for TypeScript wrapping tsserver.

Based on concepts and ideas from https://github.com/prabirshrestha/typescript-language-server and originally maintained by TypeFox.

Maintained by a community of contributors like you.

• Installing
• Running the language server
• CLI Options
• Configuration
• Features
  • Code actions on save
  • Workspace commands (workspace/executeCommand)
    • Go to Source Definition
    • Apply Workspace Edits
    • Apply Code Action
    • Apply Refactoring
    • Organize Imports
    • Rename File
    • Configure plugin
  • Code Lenses (textDocument/codeLens)
  • Inlay hints (textDocument/inlayHint)
  • TypeScript Version Notification
• Development
  • Build
  • Dev
  • Test
  • Publishing

Installing

npm install -g typescript-language-server typescript

Running the language server

typescript-language-server --stdio

CLI Options

  Usage: typescript-language-server [options]


  Options:

    -V, --version                          output the version number
    --stdio                                use stdio (required option)
    --log-level <log-level>                A number indicating the log level (4 = log, 3 = info, 2 = warn, 1 = error). Defaults to `3`.
    -h, --help                             output usage information

Configuration

See configuration documentation.

Features

Code actions on save

Server announces support for the following code action kinds:

• source.fixAll.ts - despite the name, fixes a couple of specific issues: unreachable code, await in non-async functions, incorrectly implemented interface
• source.removeUnused.ts - removes declared but unused variables
• source.addMissingImports.ts - adds imports for used but not imported symbols
• source.removeUnusedImports.ts - removes unused imports
• source.sortImports.ts - sorts imports
• source.organizeImports.ts - organizes and removes unused imports

This allows editors that support running code actions on save to automatically run fixes associated with those kinds.

Those code actions, if they apply in the current code, should also be presented in the list of "Source Actions" if the editor exposes those.

The user can enable it with a setting similar to (can vary per-editor):

"codeActionsOnSave": {
    "source.organizeImports.ts": true,
    // or just
    "source.organizeImports": true,
}

Workspace commands (workspace/executeCommand)

See LSP specification.

Most of the time, you'll execute commands with arguments retrieved from another request like textDocument/codeAction. There are some use cases for calling them manually.

lsp refers to the language server protocol types, tsp refers to the typescript server protocol types.

Go to Source Definition

• Request:

  {
      command: `_typescript.goToSourceDefinition`
      arguments: [
          lsp.DocumentUri,  // String URI of the document
          lsp.Position,     // Line and character position (zero-based)
      ]
  }
  

• Response:

  lsp.Location[] | null
  

(This command is supported from Typescript 4.7.)

Apply Workspace Edits

• Request:

  {
      command: `_typescript.applyWorkspaceEdit`
      arguments: [lsp.WorkspaceEdit]
  }
  

• Response:

  lsp.ApplyWorkspaceEditResult
  

Apply Code Action

• Request:

  {
      command: `_typescript.applyCodeAction`
      arguments: [
          tsp.CodeAction,  // TypeScript Code Action object
      ]
  }
  

• Response:

  void
  

Apply Refactoring

• Request:

  {
      command: `_typescript.applyRefactoring`
      arguments: [
          tsp.GetEditsForRefactorRequestArgs,
      ]
  }
  

• Response:

  void
  

Organize Imports

• Request:

  {
      command: `_typescript.organizeImports`
      arguments: [
          // The "skipDestructiveCodeActions" argument is supported from Typescript 4.4+
          [string] | [string, { skipDestructiveCodeActions?: boolean }],
      ]
  }
  

• Response:

  void
  

Rename File

• Request:

  {
      command: `_typescript.applyRenameFile`
      arguments: [
          { sourceUri: string; targetUri: string; },
      ]
  }
  

• Response:

  void
  

Configure plugin

• Request:

  {
      command: `_typescript.configurePlugin`
      arguments: [pluginName: string, configuration: any]
  }
  

• Response:

  void
  

Code Lenses (textDocument/codeLens)

Code lenses can be enabled using the implementationsCodeLens and referencesCodeLens workspace configuration options.

Code lenses provide a count of references and/or implemenations for symbols in the document. For clients that support it it's also possible to click on those to navigate to the relevant locations in the the project. Do note that clicking those trigger a editor.action.showReferences command which is something that client needs to have explicit support for. Many do by default but some don't. An example command will look like this:

command: {
    title: '1 reference',
    command: 'editor.action.showReferences',
    arguments: [
        'file://project/foo.ts',    // URI
        { line: 1, character: 1 },  // Position
        [                           // A list of Location objects.
            {
                uri: 'file://project/bar.ts',
                range: {
                    start: {
                        line: 7,
                        character: 24,
                    },
                    end: {
                        line: 7,
                        character: 28,
                    },
                },
            },
        ],
    ],
}

Inlay hints (textDocument/inlayHint)

For the request to return any results, some or all of the following options need to be enabled through preferences:

export interface InlayHintsOptions extends UserPreferences {
    includeInlayParameterNameHints: 'none' | 'literals' | 'all';
    includeInlayParameterNameHintsWhenArgumentMatchesName: boolean;
    includeInlayFunctionParameterTypeHints: boolean;
    includeInlayVariableTypeHints: boolean;
    includeInlayVariableTypeHintsWhenTypeMatchesName: boolean;
    includeInlayPropertyDeclarationTypeHints: boolean;
    includeInlayFunctionLikeReturnTypeHints: boolean;
    includeInlayEnumMemberValueHints: boolean;
}

TypeScript Version Notification

Right after initializing, the server sends a custom $/typescriptVersion notification that carries information about the version of TypeScript that is utilized by the server. The editor can then display that information in the UI.

The $/typescriptVersion notification params include two properties:

• version - a semantic version (for example 4.8.4)
• source - a string specifying whether used TypeScript version comes from the local workspace (workspace), is explicitly specified through a initializationOptions.tsserver.path setting (user-setting) or was bundled with the server (bundled)

Development

Build

yarn build

Dev

Build and rebuild on change.

yarn dev

Test

• yarn test - run all tests in watch mode for developing
• yarn test:commit - run all tests once

By default only console logs of level warning and higher are printed to the console. You can override the CONSOLE_LOG_LEVEL level in package.json to either log, info, warning or error to log other levels.

Publishing

The project uses https://github.com/google-github-actions/release-please-action Github action to automatically release new version on merging a release PR.

Changelog

4.3.2 (2024-02-02)

Bug Fixes

• restore handling of zipfile: schema for neovim + yarn berry (#862) (caca007)