For a while I struggled with using Emacs as a IDE for modern web-development. In other words, Typescript, prettier, .tsx files, etc.

In the end it’s not hard, here is how I have my Doom configured:

settings in the init.el

First up, we have to make sure that we are using the power of a language server protocol (short lsp). The lsp is a client-server protocol where your IDE is getting all the type-hinting, Intellisense, auto-complete etc from. As far as I understand this, this does not mean you are connected to the Internet, you are hosting the lsp automatically locally.

In the ~/.config/doom/init.el, set these (along your other config, of course):

(doom!
  :tools
  (lsp +peek) ; +peek is optional, read more about it in the lsp README (g d)
  (debugger +lsp) ; we'll get to this later

  :lang
  (javascript +lsp)
)

This takes care of a solid setup already! However, there are some further tweaks needed for a fully Integrated Developer Environment.

💡 Remember, you can always rebuild your Doom with SPC h r r, this will automatically install the packages required.

typescript-mode

With this mode we already have an automatic connection to the lsp-mode. When you open a .ts file for the first time, you will get an interactive dialog to download a language-server. I use ts-ls.

(use-package! typescript-mode
  :mode "\\.ts\\'" ; set the mode as default for .ts files
  :config
  (require 'dap-node) ; enable the debugger
  (dap-node-setup) ; setup the debugger
  (setq typescript-indent-level 2) ; set typescript indent level
  (add-hook 'typescript-mode-hook #'add-node-modules-path) ; for mono-repo support
  (add-hook 'typescript-mode-hook #'prettier-js-mode) ; use the prettier config of the project
)

typescript-tsx-mode

For React, a similar setup can be used for .tsx files.

(use-package! typescript-tsx-mode ; automatically installed with (javascript +lsp)
  :mode  "\\.tsx\\'" ; default for .tsx files
  :config ; see above
  (add-hook 'typescript-tsx-mode-hook #'add-node-modules-path)
  (add-hook 'typescript-tsx-mode-hook #'prettier-js-mode)
)

Don’t forget to rebuild your config.

Trying it out in a fresh bun project

Give it a try, for example with a new bun repo (make sure to have it installed):

mkdir typescript-test
cd typescript-test
bun init -y
bun run index.ts

This creates the basic project that is typescript ready. Go into the index.ts and try it out!

Next steps: Debugger

Now, to have a real IDE, we need a debugger. Unfortunately, I am no wizard and have not found a good solution yet. The best I have so far is a basic dap-mode setup.

If you have solved this for a typescript setup - especially in mono-repos, do let me know! The debugging experience in Doom Emacs is not that great and often times I result to console.log(), which is obviously less than ideal.