Mastering TypeScript LSP with Doom Emacs

Doom Emacs is a highly opinionated and efficient configuration framework for Emacs, a powerful and extensible text editor. The Language Server Protocol (LSP) has revolutionized the way developers work with programming languages by providing intelligent code analysis, autocompletion, and other advanced features. In the context of TypeScript, using LSP with Doom Emacs can significantly enhance the development experience, enabling faster coding and fewer errors. This blog will guide you through the fundamental concepts, usage methods, common practices, and best practices of using TypeScript LSP in Doom Emacs.

Table of Contents

  1. Fundamental Concepts
  2. Setting up Doom Emacs for TypeScript LSP
  3. Usage Methods
  4. Common Practices
  5. Best Practices
  6. Conclusion
  7. References

Fundamental Concepts

Doom Emacs

Doom Emacs is a community-driven configuration framework for Emacs. It comes pre - configured with a set of packages and keybindings that make it easy to get started with various programming languages. It focuses on speed, simplicity, and extensibility, allowing users to customize their Emacs environment according to their needs.

TypeScript

TypeScript is a superset of JavaScript that adds static typing to the language. It helps catch errors early in the development process and provides better tooling support. TypeScript code is transpiled to JavaScript, which can then be run in any JavaScript environment.

Language Server Protocol (LSP)

The Language Server Protocol is an open standard that allows development tools (such as text editors) and language servers (programs that provide language - specific features) to communicate with each other. In the context of TypeScript, the TypeScript language server provides features like autocompletion, code navigation, and refactoring support. When integrated with Doom Emacs, it enables a more seamless and productive development experience.

Setting up Doom Emacs for TypeScript LSP

Prerequisites

  • Emacs: You need to have Emacs installed on your system. Doom Emacs supports Emacs 26.1 or higher.
  • Node.js and npm: Since TypeScript is a JavaScript - based language, you need to have Node.js and npm (Node Package Manager) installed to manage TypeScript dependencies.
  • TypeScript Language Server: You can install the TypeScript language server globally using npm:
npm install -g typescript-language-server typescript

Installation Steps

  1. Install Doom Emacs: Follow the official installation guide on the Doom Emacs GitHub repository.
  2. Enable the TypeScript module: Open your ~/.doom.d/init.el file and add the following line to enable the TypeScript module:
(doom!
 :lang
 typescript
 )
  1. Install packages: Run doom sync in your terminal to install the necessary packages for the TypeScript module.

Usage Methods

Basic Editing with LSP Features

Once you have set up Doom Emacs for TypeScript LSP, you can start editing TypeScript files. When you open a .ts or .tsx file, the TypeScript language server will automatically start.

  • Autocompletion: As you type, the LSP will provide autocompletion suggestions. For example, if you have a class with methods:
class MyClass {
  constructor() {}
  myMethod() {
    return 'Hello, World!';
  }
}

const myObj = new MyClass();
// When you type myObj., the LSP will suggest myMethod
  • Hover information: Place your cursor over a variable or function, and the LSP will show information about its type and documentation.
  • Go to definition: To jump to the definition of a variable, function, or class, place your cursor on the symbol and press M-. (Meta + dot). For example, if you have a function call myFunction() and you want to see its definition, you can use this keybinding.
  • Rename symbol: You can rename a symbol across the entire project using SPC r r. This will update all references to the symbol in your code.

Common Practices

Error Handling and Diagnostics

The LSP continuously analyzes your TypeScript code and highlights errors and warnings. You can view a list of all diagnostics by pressing SPC l d. This will open a buffer showing all the issues in your code, along with their locations and descriptions.

Code Formatting

Doom Emacs can automatically format your TypeScript code according to a set of rules. You can format the current buffer by pressing SPC b f. This will use the default formatting settings for TypeScript, which can be customized if needed.

Best Practices

Configuration Optimization

  • Customize keybindings: You can customize the keybindings for LSP features in your ~/.doom.d/config.el file. For example, if you want to change the keybinding for “Go to definition”, you can add the following code:
(map! :map lsp-mode-map
      :n "C-." #'lsp-find-definition)
  • Configure LSP settings: You can configure the behavior of the TypeScript language server in your ~/.doom.d/config.el file. For example, you can set the maximum number of diagnostics to show:
(setq lsp-typescript-max-diagnostics -1)

Integrating with Other Tools

  • Integrate with ESLint: ESLint is a popular JavaScript/TypeScript linter. You can integrate ESLint with Doom Emacs and the TypeScript LSP to enforce coding standards. Install the ESLint package in your project and add the following line to your ~/.doom.d/config.el to enable ESLint integration:
(add-hook 'typescript-mode-hook #'flycheck-eslint-setup)

Conclusion

Using TypeScript LSP with Doom Emacs can greatly enhance your TypeScript development experience. It provides powerful features like autocompletion, code navigation, and error handling, making your coding process more efficient and less error - prone. By following the best practices and customizing your Doom Emacs configuration, you can tailor the environment to your specific needs and work more productively.

References