How to set up nvim for TypeScript

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:

Plug 'neoclide/coc.nvim', {'branch': 'release'}
Plug 'HerringtonDarkholme/yats.vim'  // For TypeScript syntax highlighting

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:

:CocInstall coc-tsserver

Once installed, 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:

Automatic linting

If you're using tslint or 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:

:CocInstall coc-tslint-plugin  // For tslint
:CocInstall coc-eslint         // For eslint

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:

autocmd BufWritePre *.ts,*.tsx CocCommand tsserver.executeFormat

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

With coc-tsserver, you can easily navigate your codebase:

• Jump to definition: gd
• Find references: gr

Renaming symbols

To refactor your code by renaming variables, classes, or functions, use:

:CocRename

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:

:CocAction

Viewing type definitions

To view the type of a variable or function, hover your cursor over it and use:

:CocHover

This will display a popup with the type information.

Conclusion

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.