DOCSEARCHbyAlgolia
Submit Docs

typescript-tools.nvim

repository·master·Indexed 24 days ago

https://github.com/pmizio/typescript-tools.nvim

A high-performance, pure Lua replacement for typescript-language-server in NeoVim. It communicates directly with the native Tsserver protocol to provide VS Code-like TypeScript and JavaScript integration, including support for styled-components, custom user commands for import organization, and various LSP methods.

Tokens
1.6K
Snippets
4
Records
7
Agent score
30%

What's inside typescript-tools.nvim

  1. Install typescript-tools.nvim

    master

    Install typescript-tools.nvim as a replacement for typescript-language-server.

    IMPORTANT: You must remove any existing nvim-lspconfig setup for typescript-language-server to avoid conflicts.

    Requirements

    • NeoVim >= 0.11.0
    • plenary.nvim
    • TypeScript >= 4.0
    • Node.js (compatible with your TypeScript version)

    Installation via lazy.nvim

    {
  "pmizio/typescript-tools.nvim",
  dependencies = { "nvim-lua/plenary.nvim", "neovim/nvim-lspconfig" },
  opts = {},
}

    Installation via packer.nvim

    use {
  "pmizio/typescript-tools.nvim",
  requires = { "nvim-lua/plenary.nvim" },
  config = function()
    require("typescript-tools").setup {}
  end,
}
    {
  "pmizio/typescript-tools.nvim",
  dependencies = { "nvim-lua/plenary.nvim", "neovim/nvim-lspconfig" },
  opts = {},
}

  2. Configure styled-components support

    master

    To enable IntelliSense for styled-components, follow these two steps:

    1. Install the tsserver plugin globally via npm:
    npm i -g @styled/typescript-styled-plugin typescript-styled-plugin
    1. Add the plugin to your typescript-tools configuration:
    require("typescript-tools").setup {
  settings = {
    tsserver_plugins = {
      -- for TypeScript v4.9+
      "@styled/typescript-styled-plugin",
      -- or for older TypeScript versions
      -- "typescript-styled-plugin",
    },
  },
}
    require("typescript-tools").setup {
  settings = {
    tsserver_plugins = {
      "@styled/typescript-styled-plugin",
    },
  },
}

  4. Configure typescript-tools.nvim settings

    master

    The setup function accepts a settings table to configure the underlying tsserver behavior.

    Key configuration options include:

    • separate_diagnostic_server: (boolean) Spawn an additional tsserver instance to calculate diagnostics.
    • publish_diagnostic_on: (string) When the client asks for diagnostics. Options: "change" or "insert_leave".
    • tsserver_path: (string|nil) Custom path to tsserver.js.
    • tsserver_plugins: (array of strings) List of plugins to load (e.g., for styled-components).
    • tsserver_max_memory: (string) Memory limit in MB or "auto".
    • tsserver_locale: (string) Locale for tsserver messages (default: "en").
    • complete_function_calls: (boolean) Mirror VSCode's typescript.suggest.completeFunctionCalls.
    • code_lens: (string) Experimental feature. Options: "off", "all", "implementations_only", "references_only".
    • jsx_close_tag: (table) Enable/disable JSX close tag support.

    You can also pass tsserver_file_preferences and tsserver_format_options directly to the settings table. These can be static tables or functions that take the filetype (ft) as an argument.

    require("typescript-tools").setup {
  settings = {
    separate_diagnostic_server = true,
    publish_diagnostic_on = "insert_leave",
    tsserver_path = nil,
    tsserver_plugins = {},
    tsserver_max_memory = "auto",
    tsserver_locale = "en",
    complete_function_calls = false,
    code_lens = "off",
    disable_member_code_lens = true,
    jsx_close_tag = {
        enable = false,
        filetypes = { "javascriptreact", "typescriptreact" },
    }
  },
}

  5. Filter diagnostics using handlers

    master

    You can override LSP methods by providing custom functions in the handlers table within setup. This is useful for filtering specific diagnostic codes using the api.filter_diagnostics helper.

    Example: Ignoring diagnostic code 80006 ('This may be converted to an async function').

    local api = require("typescript-tools.api")
require("typescript-tools").setup {
  handlers = {
    ["textDocument/publishDiagnostics"] = api.filter_diagnostics(
      -- Ignore 'This may be converted to an async function' diagnostics.
      { 80006 }
    ),
  },
}

  6. Supported LSP methods in typescript-tools.nvim

    master

    The following Language Server Protocol (LSP) methods are supported by typescript-tools.nvim. Status indicators: ✅ (Supported), 🚧 (Planned), ❌ (Not Available/N/A).

    Supported

    • textDocument/completion
    • textDocument/hover
    • textDocument/rename
    • textDocument/publishDiagnostics
    • textDocument/signatureHelp
    • textDocument/references
    • textDocument/definition
    • textDocument/typeDefinition
    • textDocument/implementation
    • textDocument/documentSymbol
    • textDocument/documentHighlight
    • textDocument/codeAction
    • textDocument/formatting
    • textDocument/rangeFormatting
    • textDocument/foldingRange
    • textDocument/semanticTokens/full (requires TS v4.1+)
    • textDocument/inlayHint (requires TS v4.4+)
    • callHierarchy/incomingCalls
    • callHierarchy/outgoingCalls
    • textDocument/codeLens
    • workspace/symbol
    • workspace/willRenameFiles

    Planned

    • textDocument/linkedEditingRange

    Not Available (N/A)

    • workspace/applyEdit
    • textDocument/declaration
    • window/logMessage
    • window/showMessage
    • window/showMessageRequest

  7. Use typescript-tools custom user commands

    master

    The plugin provides several custom commands that operate on the current buffer:

    • TSToolsOrganizeImports: Sorts and removes unused imports.
    • TSToolsSortImports: Sorts imports.
    • TSToolsRemoveUnusedImports: Removes unused imports.
    • TSToolsRemoveUnused: Removes all unused statements.
    • TSToolsAddMissingImports: Adds imports for statements that lack one.
    • TSToolsFixAll: Fixes all fixable errors.
    • TSToolsGoToSourceDefinition: Goes to the source definition (requires TS v4.7+).
    • TSToolsRenameFile: Renames the current file and applies changes to connected files.
    • TSToolsFileReferences: Finds files that reference the current file (requires TS v4.2+).