DEV Community 👩‍💻👨‍💻

DEV Community 👩‍💻👨‍💻 is a community of 968,547 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Paweł Smołka
Paweł Smołka

Posted on

Spacemacs + React + TypeScript(.tsx) in the end of 2021, tested Linux and MacOSX with M1 CPU.

Working example of Spacemacs with TS

I've been figuring out a while how to make quick and simple config for spacemacs for web dev. There is lots of approaches in the internet, however, cherry-picking from those usually results in some problems as I didn't find any up-to-date one.
So I decided to share how to prepare simple and efficent spacemacs environment for web dev. Should work also for Angular, Vue etc but I didn't test it. Tested with NestJS, works like a charm.
M1 CPUs needs node 15+ but recommended is 16 (as it is LTS and the one I tested this conf with).
In order to make spacemacs work with React, Typescript, TSX files and work FAST I decided to use LSP server and make well configurated layers in spacemacs.

First you need to have installed:
npm install -g typescript
npm install -g typescript-language-server
npm install -g prettier

.spacemacs file

below you can find 2 sections:

  1. dotspacemacs-configuration-layers
  2. dotspacemacs/user-config

dotspacemacs-configuration-layers

dotspacemacs-configuration-layers
   '(yaml
     auto-completion
     better-defaults
     emacs-lisp
     git
     graphql
     helm
     html
     lsp
     json
     multiple-cursors
     org
     prettier
     (shell :variables
            shell-default-height 30
            shell-default-position 'bottom)
     spell-checking
     syntax-checking
     version-control
     themes-megapack
     (typescript :variables
                 typescript-linter 'eslint
                 typescript-fmt-tool 'prettier
                 typescript-backend 'lsp)
     treemacs)
Enter fullscreen mode Exit fullscreen mode

dotspacemacs/user-config

(defun dotspacemacs/user-config ()
  (setq create-lockfiles nil)
  )
Enter fullscreen mode Exit fullscreen mode

As a result it let you have all features like auto-completion, finding definitions, checking for type errors, linting, code lens, links to docs, code formatting (with .prettierrc file) and much more.

BTW: Be sure your Spacemacs can access node binary. It may turn out your Spacemacs ENV variables aren't same as in shell you use. I had situation that shell in Spacemacs shown my normal shell variables but was running node with some internal ones. Solved by adding node path to .profile but way you got installed Emacs may require other approach.

Oldest comments (1)

Collapse
 
octavioelmagnifico profile image
PanificadosDuarte

Hi! Have you been able to integrate any kind of REPL to the setup?

🌚 Life is too short to browse without dark mode