this post was submitted on 28 Nov 2023
1 points (100.0% liked)

Emacs

313 readers
2 users here now

A community for the timeless and infinitely powerful editor. Want to see what Emacs is capable of?!

Get Emacs

Rules

  1. Posts should be emacs related
  2. Be kind please
  3. Yes, we already know: Google results for "emacs" and "vi" link to each other. We good.

Emacs Resources

Emacs Tutorials

Useful Emacs configuration files and distributions

Quick pain-saver tip

founded 1 year ago
MODERATORS
rglullis
raphael
1
Recommended setup for React development (alien.top)
submitted 1 year ago by dwrz@alien.top to c/emacs
10 comments fedilink hide all child comments
 

I recently picked up a new project that uses React. Out of the box, my configuration doesn't seem to be doing very well -- indentation is erratic (sometimes thrown off by JSX), no lsp-rename, and generally things are slow.

Are there any generally recommended approaches for React development with Emacs? Language server, minor modes, tree-sitter, etc? There seem to be a lot of options and modes available.

The codebase is currently JavaScript and JSX, but I'm considering Typescript and TSX down the line. Should I just default to the TypeScript tooling?

top 10 comments
sorted by: hot top controversial new old
[–] jplindstrom@alien.top 1 points 11 months ago

Not really doing React atm, but for node TypeScript I use tide-mode.

Has anyone else incorporated that for React development?

[–] dav1d_23@alien.top 1 points 1 year ago

I had to fiddle around to make lsp work with treesitter in emacs 29, I can share my conf if you struggle to do the same

[–] Horrih@alien.top 1 points 1 year ago

web-mode is well suited for most web dev.

I used it extensively for vue.js (html/css/typescript in the same file) and it worked well. Pretty sure it should be fine for typescript + jsx

As for the language server, it seems that typescript-language-server is the way to go (see)

Give it a try, i'm pretty sure that those two things will cover 90% of your needs

[–] ReneFroger@alien.top 1 points 1 year ago

emacs.zeef.com is your friend.

[–] dpassen1@alien.top 1 points 1 year ago (3 children)

I use:

Along with something for eslint in flymake

[–] FitPandaFu@alien.top 1 points 11 months ago (1 children)

add-node-modules-to-path is broken since npm dropped support for the npm bin command.

[–] dpassen1@alien.top 1 points 11 months ago

That's not great. I bet the project I was using it on is quite old. In the meantime, as stated https://www.reddit.com/r/emacs/comments/1865s7b/recommended_setup_for_react_development/kb7kej1/ envrc and layout node seems to work for me!

[–] harsh_mistress@alien.top 1 points 1 year ago

using much of the same combo and I'm happy with it, except I'm using the vtsls LSP.

This is an LSP wrapper around TypeScript extension bundled with VSCode. All features and performance are nearly the same.

it's pretty snappy with (fset #'jsonrpc--log-event #'ignore)

[–] dpassen1@alien.top 1 points 1 year ago

Looks like adding layout node to .envrc (direnv) would remove the need for add-node-modules-to-path for me

[–] FitPandaFu@alien.top 1 points 11 months ago

webstorm