3 ms·

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

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?

petr_tik 6y ago
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
fovc 6y ago
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.
brlewis 6y ago
Using prettier-js-mode I don't worry about messed up indentation; any problems are fixed on save.
sufyanadam 6y ago
I've been using web-mode and it's awesome. Works well with jsx. My config is here https://github.com/sufyanadam/.emacs.d https://github.com/sufyanadam/.emacs.d
jidiculous 6y ago
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#L610 https://github.com/jidicula/dotfiles/blob/master/init.el#L61...) (or search for "react-snippets" if that line number is outdated).

petr_tik 6y ago

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

fovc 6y ago

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.

brlewis 6y ago

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

sufyanadam 6y ago

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

jidiculous 6y ago

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#L610 https://github.com/jidicula/dotfiles/blob/master/init.el#L61...) (or search for "react-snippets" if that line number is outdated).