allen hansrisuk

Minimal Config for Doom Emacs as a React/TS IDE

Doom Emacs (Learning How to Use a Computer Again)

Being familiar with Vim keybinds, Doom Emacs seemed the obvious choice for a client in order to engage with Org Mode. After spending a considerable amount of time in Doom Emacs, I wanted to see what it would take to get Doom Emacs working for React/Typescript development. Luckily, not much.

The goal was not to make it exactly like VS Code but enable type checking, code completion, and auto imports.

Config Files - init.el

In addition to the packages enabled by default. These also needed to be enabled by uncommenting the package names in init.el:

  • company
  • (format +onsave)
  • vterm
  • lsp
  • magit
  • json
  • javascript
  • web

Run the sync command in your terminal and restart Emacs to download and install the new packages.

doom sync

You can look through my current Doom Emacs dotfiles here

Installing vterm

In order to compile vterm, you'll need Cmake, libtool, and libtool-bin. It turns out that the libtool-bin executable is not included in the libtool package so you'll have to install it separately.

sudo apt install cmake libtool libtool-bin

End Result

You can now open up a terminal window in Doom Emacs. My preferred method is to open it in my active buffer as opposed to the pop up window with the keybind:

SPC o T

You should now have code completion suggestions courtesy of company and lsp. Although, you may have to initialize lsp in your buffer:

M-x lsp

If you have ESLint installed, you'll start to see the code annotations, type errors, warnings, and more in your buffer. If the error is actionable such as:

Cannot find name 'myFunction'

you can utilize the command

lsp-execute-code-action (SPC c a)

to automatically import the function.