Doom Emacs and TypeScript: A Comprehensive Guide

Doom Emacs is a highly opinionated and modular distribution of Emacs, a powerful text - editor known for its extensibility and customizability. TypeScript, on the other hand, is a statically typed superset of JavaScript that adds optional types to the language, enhancing code reliability and maintainability. Combining Doom Emacs with TypeScript can create a highly productive development environment for JavaScript/TypeScript developers. In this blog, we will explore how to leverage the features of Doom Emacs to work effectively with TypeScript.

Table of Contents

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

Fundamental Concepts

Doom Emacs

Doom Emacs is built on top of Emacs, which is a feature - rich text editor with a long history. It comes with a set of pre - configured packages and keybindings, aiming to provide a more streamlined and efficient editing experience. It uses a modular system called “modules” to manage different functionalities. For working with TypeScript, we’ll use relevant modules to get the necessary tools and features.

TypeScript

TypeScript extends JavaScript by adding static types. This means that you can define the types of variables, function parameters, and return values. For example:

// A simple TypeScript function with type annotations
function add(a: number, b: number): number {
    return a + b;
}

const result = add(1, 2);

Interaction between Doom Emacs and TypeScript

Doom Emacs provides a range of packages and configurations to support TypeScript development. It can integrate with TypeScript’s compiler and language server to offer features like syntax highlighting, code navigation, autocompletion, and error checking.

Setting Up Doom Emacs for TypeScript

Install Doom Emacs

First, you need to install Doom Emacs. Follow the official installation guide on the Doom Emacs GitHub repository.

Enable TypeScript Module

Doom Emacs uses a init.el file to manage its configuration. Open the init.el file in your Doom Emacs configuration directory (usually ~/.doom.d/init.el).

;; Enable the typescript module
(doom!
  :lang
  ;; other languages...
  typescript
  ;; other configurations...
  )

Install TypeScript Language Server

You need to have the TypeScript language server installed globally or in your project. If you want to install it globally, use the following command:

npm install -g typescript typescript-language-server

Configure TypeScript in Doom Emacs

In your config.el file (also in ~/.doom.d/config.el), you can add some custom configurations. For example, you can set up keybindings or adjust the behavior of the TypeScript mode.

;; Configure typescript mode in doom emacs
(after! typescript-mode
  ;; Add custom keybindings here if needed
  )

Usage Methods

Syntax Highlighting

Once you enable the TypeScript module in Doom Emacs, it automatically provides syntax highlighting for TypeScript files. When you open a .ts or .tsx file, you’ll see different colors for keywords, variables, types, etc.

Code Navigation

Doom Emacs, with the help of the TypeScript language server, allows you to navigate through your TypeScript code efficiently. For example, you can use the following keybindings:

  • M-. (in normal mode) to jump to the definition of a symbol. For instance, if you have a function and you want to see where it’s defined, place the cursor on the function name and press M-..

Autocompletion

Doom Emacs comes with autocompletion support for TypeScript. As you type, it will suggest possible completions based on the context. For example, if you have an object with properties:

const person = {
    name: 'John',
    age: 30
};

// When you type person., it will suggest 'name' and 'age'

Error Checking

The TypeScript language server integrated with Doom Emacs will highlight syntax and type errors in your code. You can use the flycheck feature to quickly identify and fix issues. For example, if you try to assign a string to a variable of type number:

let num: number = "hello"; // This will be highlighted as an error

Common Practices

Project Structure

When working with TypeScript projects in Doom Emacs, it’s a good practice to follow a standard project structure. For example, a common structure for a Node.js TypeScript project might look like this:

project-root/
├── src/
│   ├── index.ts
│   ├── utils/
│       ├── util1.ts
│       ├── util2.ts
├── tests/
│   ├── index.test.ts
├── package.json
├── tsconfig.json

Use of LSP (Language Server Protocol)

Doom Emacs can use the LSP for TypeScript development. The LSP provides a unified interface for features like code navigation, autocompletion, and error checking. You can enable LSP for TypeScript by making sure the lsp module is enabled in your init.el:

(doom!
  :lang
  typescript
  :tools
  lsp
  ;; other configurations...
  )

Refactoring

Doom Emacs can be used to perform refactoring operations on TypeScript code. For example, you can use the lsp-ui-peek-find-references command to find all references to a particular symbol in your codebase. You can bind this command to a key in your config.el:

(map! :after lsp-ui
      :map lsp-ui-mode-map
      :n "gr" #'lsp-ui-peek-find-references)

Best Practices

Code Formatting

Use a consistent code formatting style. You can use Prettier, which can be integrated with Doom Emacs. Install the prettier package globally:

npm install -g prettier

Then, configure Doom Emacs to use Prettier for TypeScript files. In your config.el:

(after! typescript-mode
  (add-hook 'typescript-mode-hook #'prettier-mode))

Use of Workspaces

Doom Emacs has a workspace feature that can be used to manage different TypeScript projects efficiently. You can create a separate workspace for each project, allowing you to quickly switch between them without cluttering your buffers.

;; Create a workspace for a TypeScript project
(doom/switch-to-workspace-buffer "typescript-project" "~/projects/typescript-project/src/index.ts")

Custom Keybindings

Customize keybindings in Doom Emacs to match your workflow. For example, if you frequently use a particular TypeScript - related command, you can bind it to a convenient key combination in your config.el:

(map! :after typescript-mode
      :map typescript-mode-map
      :n "C-c t" #'your - custom - typescript - command)

Conclusion

Doom Emacs offers a powerful and flexible environment for TypeScript development. By understanding the fundamental concepts, setting up the environment correctly, and following common and best practices, developers can significantly improve their productivity. The combination of Doom Emacs’ extensibility and TypeScript’s type - safety can lead to more robust and maintainable code. Whether you are a beginner or an experienced developer, leveraging Doom Emacs for TypeScript development is a great way to streamline your workflow.

References