Hacker News Reader

Comment by rayalez | Hacker News Reader

Did anyone manage to make a good Emacs config for effective React webdev?

I'm really missing graphql and styled components syntax highlighting and generally a bugless properly working webdev mode. Currently it keeps messing up indentation and losing syntax highlighting.

I tried moving to VS code, and I saw how amazing an editor designed for webdev can be. But despite all the issues, I'm still much more productive in emacs, so I went back.

I really wish it was possible to setup emacs for modern webdev, but I haven't found a way yet.

Any tips/advice?

View on HN

Won't get you graphql literals, but the new Emacs has much better JSX support. Reposting my setup:

""" Disclosure: I'm the author of rjsx-mode)

The best setup I've found is to use js2-mode for .js and rjsx-mode for .jsx, which parse the buffer for syntax highlighting, local refactoring (with js2r) and basic linting. For typescript, use typescript-mode. Flow support is quite bad ATM

nvm.el replaces the shell scripts from nvm.

Add a jsconfig.json to your project root and enable tide-mode for completion. This has worked far better than tern-mode, which some people recommend.

For fuller linting than what js2/rjsx offer, use flycheck. Eslint support is built-in, so it should just work, I think.

[2018 update: I prefer using tslint, which you can accomplish with:

(flycheck-add-mode 'typescript-tslint 'js2-mode)

(flycheck-add-mode 'typescript-tslint 'rjsx-mode)]

Finally, for build management, I use prodigy to run webpack, babel, ts, etc.

I've been using web-mode and it's awesome. Works well with jsx. My config is here https://github.com/sufyanadam/.emacs.d

I use web-mode, tide, react-snippets combined with yasnippets, and prettier. You can see my config [here](https://github.com/jidicula/dotfiles/blob/master/init.el#L61...) (or search for "react-snippets" if that line number is outdated).

I haven’t done any web development, so my best recommendation is to forward you to search relevant keywords and then ask questions on r/emacs or r/spacemacs

Using prettier-js-mode I don't worry about messed up indentation; any problems are fixed on save.

Reply on news.ycombinator.com