Hacker News Reader

Comment by azangru | Hacker News Reader

Hey, has any of you guys been using emacs for modern front-end development? I’ve been looking for video tutorials (or at least for demos) on this subject, but could not find anything useful and practical. How is emacs’ support of JSX? Of typescript and TSX? Of flow? Of CSS in JS? Of eslint? Does it keep up with the crazy speed frontend development is changing, or has it remained far behind (being used mostly for the basic tasks that are shown in the video on web-mode in the 'Using Emacs' series)? What's your experience?

View on HN

(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.

Finally, for build management, I use prodigy to run webpack, babel, ts, etc. Feel free to ping me if you need more help

Thank you! That was really helpful.

I'm not a professional front end developer but recently completed some projects in TypeScript. I found it very painless to get set up on Emacs with Tide [0] and it was a pleasure to use. I also use web-mode [1] for templates which adds some bonus features over the existing HMTL editing mode.

[0]: https://github.com/ananthakumaran/tide

[1]: https://github.com/fxbois/web-mode

I have done some work in angular2 (and rails, fwiw) using emacs.

There are modes for javascript (yegge's js2-mode is one of the more feature rich modes I have seen for any language), angular, and typescript. I have not tried eslint but a quick search for emacs eslint turned up some packages.

What in particular would you be looking for in terms of front-end development?

One issue I run into is problems with poor (auto)indentation when I am editing a file which contains html formatted as a string. For example an html template in an angular module. Anybody have/fix this issue?

I've found web-mode to be superior for JSX and ES6 stuff, though I tried to use Yegge's for a while. Though I don't do much JS development anymore, this is my current config for web-mode, though I had Flycheck and Flow types working at one point, as well.

https://gist.github.com/asummers/b8304b8ea78fc331b8177ff35d0...

I'm using RJSX-mode + emmet mode for JSX. RJSX is a fork of js2-mode so it handles normal js just as well. It has built-in linting that works great but you may still want to set up eslint if there's a need for it. `web-mode` is the undisputed best mode for HTML and again you can pair it with emmet-mode to write even faster.

If you're looking for 'intelligent' auto-completion like IntelliJ Emacs is probably not for you, but I think most people choose Emacs for its keybindings and workflow anyway. The shortcomings are definitely worth it imo.

On this discussion. I was trying to work better with React code. I found out about global + gtags + pygments. I'll soon be able to jump to reference if I set things up properly. I'll probably post something about that soon. Anyone got jump to definition and jump to references set up with javascript (or JSX) code properly? In terms of autocompletion, I don't what would be the best way to go about it yet.

Sounds like you might be interested in my dumb-jump package: https://github.com/jacktasia/dumb-jump

I've had good luck with JSX in web-mode. It just kind of... works?

Honestly? WebStorm with Emacs key bindings and several plugins. I use Emacs for pretty much everything but web development is not where it truly outshines other tools :(

I do all front end development in emacs, using Clojurescript. Lisp support is of course great in emacs.

I also use web-mode a lot for source files that are a mix of CSS, Js and HTML.

"Fundamental mode" handles all those things great, and anything you can think of. Escape the shackles of syntax highlighting and special modes and you'll be free, hackers, you'll be free...

Reply on news.ycombinator.com