How to set up nvim for TypeScript
October 27, 2023
Neovim (nvim) provides a rich and customizable environment for TypeScript development. This guide will walk you through setting up and enhancing your TypeScript development workflow in nvim.
Getting started with TypeScript in nvim
To work effectively with TypeScript in nvim, we'll leverage a few plugins and tools. These will provide features such as syntax highlighting, linting, code navigation, and auto-completion.
Installing the necessary plugins
Before diving into the TypeScript setup, ensure you have a plugin manager for nvim, like vim-plug. Once you have a manager in place, add the following plugins:
After adding the plugins, run
:PlugInstall to install them.
Configuring coc.nvim for TypeScript
coc.nvim is an IntelliSense engine for nvim. It's extensible and can support TypeScript via extensions.
After installing coc.nvim, you'll need to install the TypeScript server extension:
coc-tsserver will provide features like auto-completion, linting, and code navigation for TypeScript.
Fine-tuning your TypeScript configuration
To get the most out of TypeScript in nvim, consider the following tweaks:
If you're using
eslint for your TypeScript projects, you can set up coc.nvim to lint your code automatically. First, ensure you have either linter installed globally or locally in your project. Then, install the corresponding coc.nvim extension:
After installation, the linter will automatically check your code as you write, highlighting any issues.
Format on save
To automatically format your TypeScript code whenever you save a file, add the following to your nvim configuration:
This ensures your code remains consistent and adheres to your chosen style guide.
Advanced TypeScript features in nvim
While the basic setup will cover many of your needs, there are advanced features and plugins that can further enhance your TypeScript development experience.
Jump to definition and references
coc-tsserver, you can easily navigate your codebase:
- Jump to definition:
- Find references:
To refactor your code by renaming variables, classes, or functions, use:
This command will rename the symbol and update all its references across the project.
Code actions and quick fixes
If there are issues or suggestions in your code,
coc-tsserver will often provide quick fixes. Place your cursor over the problematic code and use:
Viewing type definitions
To view the type of a variable or function, hover your cursor over it and use:
This will display a popup with the type information.
By following this guide, you've set up a powerful TypeScript development environment in nvim. From syntax highlighting to advanced code navigation and refactoring tools, nvim becomes a robust IDE for TypeScript developers. While this guide covered a comprehensive setup, always be on the lookout for new plugins or configurations that can further tailor your environment to your needs.
How to fix the "not all code paths return a value" issue in TypeScript
Working with WebSockets in Node.js using TypeScript
Type Annotations Can Only Be Used in TypeScript Files
Guide to TypeScript Recursive Type
How to Configure Knex.js with TypeScript