Emacs vs. WebStorm for Node.js Development | Hacker News Reader

Emacs vs. WebStorm for Node.js Development

spin.atomicobject.com

123 pointsphilk10102 comments

The new Webstorm version coming up is several times faster, its amazing. On a Mac its so fast its literally like using Sublime.

This is due among other things due to their upgrade to Java 8.

This is the link to the early access program https://confluence.jetbrains.com/display/WI/WebStorm+EAP

Are the VIm mode issues he mentioned improved? I keep moving back to VIm because while all of these tools make excellent IDEs none of them are great editors.

The other thing that drive me a bit nuts is the multiple versions. Webstorm vs Rubymine. I build on Rails, but do most of my UI work with Angular+JS+Webpack. So which should I use Rubymine or Webstorm?

It's all too confusing.

IntelliJ seems to be their 'master' IDE with plugins providing the functionality of PyCharm, Webstorm etc. It's reflected in the license cost, but I'm using it on a mixed Python, JS, PHP without too many issues except SDK-switching for each context.

I really don't know what issues the author is referring to. I have used IdeaVim for PyCharm and was very satisfied with it. It has its own vimrc file which allows you to not only copy paste your existing bindings, but also keeps them separate form your default bindings in a clean way.

If you compare this level of support for Vim with MonoDevelop, you'd realize just how good it actually is.

I have the same issues w/ the vim plugin as the author(especially re: the weird "middle" state)

Are you using the mouse when this is happening?

MonoDevelop's Vim mode just kills me - probably the worst Vim mode I've used in any editor.

> So which should I use Rubymine or Webstorm?

IntelliJ Ultimate and install the plugins for both of those.

As far as VIM goes I'm on the same boat. If Webstorms VIM plugin had the ability to move from panes and specially into the file tree explorer (use the hjkl), that would probably make me want to use it.

Not sure on Webstorm, but IntelliJ (which has the webstorm plugin) lets you flip between panes using standard Vim keybindings.

Holy cow, I'm so dumb.

I have "ctrl-(hjkl)" mapped using https://github.com/christoomey/vim-tmux-navigator so I have an extremely easy time navigating between splits in terminal vim. I tried like hell to get "ctrl-(hjkl)" to work in IntelliJ. I eventually gave up and decided to just start clicking the panes like a caveman. It never even crossed my mind to try the original bindings.

Thank you.

right, I was able to do that, but not between panes and file explorer.

That's cool... but Sublime is already like using Sublime.

really? How long does it take on a cold startup?

"Symbol and definition lookup is another great feature of WebStorm. While Emacs can find symbols and definitions in a single file via Tern, ..."

Actually, tern has tern-find-definition which works not only in a single file. You can jump in to other modules in your project or to node_modules. And there is tern-pop-find-definition to return back. For methods of native js objects tern even opens browser with related MDN page. But WebStorm way better in debugging, that's true.

It's also worth noting that there's a lot of work going into Emacs right now to give it better IDE-like features -- finding definitions reliably, refactoring, all that stuff. They're working on a more generalized framework for supporting this stuff, and I'd expect Emacs to get significantly more competitive (with traditional IDEs) within the next year or two.

>Actually, tern has tern-find-definition which works not only in a single file.

I haven't been able to make this work outside my current file. Perhaps I'm just configuring tern wrong :(

This .tern-project config works for me:

  {
    "libs": [
      "browser"
    ],
    "plugins": {
      "node": {},
      "es_modules": {}
    }
  }

Your project files must have "correct" format, e.g. require('relative_path') for imports and module.exports/exports for exports (or es6 import and export). Example for AMD format (requireJS) can be found here - http://ternjs.net/doc/manual.html#configuration

I can't get it to search outside the standard node files using the above config. I can't get it to be aware of my code in the project.

I personally moved to visual studio code (from WebStorm ) which has a good debugger for Nodejs and a few features that are really handy ( support for .d.ts definitions for node modules ... ). I usually don't use MS products but they did an impressive job with that IDE, no question.

VS Code has become the editor I find myself using most often because it usually does things that I do with a little more elegance and ease than other editors. One thing I see people complain about, as I used to, is that it doesn't have a file tab interface and it only puts files you have changed in the "working files" area, meaning if you open a file to view it you can lose track of it. However, I discovered clicking on the file name of the open file reveals a drop down of most recent files. After using it for awhile, I no longer miss having multiple files open in tabs.

You should consider using keyboard navigate files CTRL+P - shows list of recently opened files and it's a fuzzy search dialog - no mouse involved.

My gripe with VisualStudio code file tree is that it doesn't have icons - this is actually pretty huge for me - I use the file tree when I'm reorganizing code structure and need a good overview of things - for all it's failings as a text editor Atom file tree is really nice with the icons addon - hopefully something like that shows up for VSCode.

That and YouCompleteMe for C++ and I'd switch all the way to VSCode, and I have no doubt that is going to happen so I'm just waiting now (too little time to work on it ATM otherwise I would start it)

The closest analogue to tabs is their split pane view.

I don't fully understand the rationale behind shying away from tabs, but reducing cognitive load/context switching and reducing CPU/RAM strain seems to be the desired effect.

Came here to say this but you beat me to it. VS Code is great. It's come a long way very quickly and now that it has extension / add-on support, it's top tier.

Don't forget integrated git support too! And yeah the type definition files are awesome since you get intellisense with documentation in it! I wonder if the author of the article has given Code a good look because it would seem to meet most of his needs.

My only pain point with VS Code right now is the lack of any kind of core REPL support. I'd love to be able to sling stuff back and forth between source code and a REPL like you can in emacs. And yeah I know about Command-C - I just want to do everything in the IDE.

Author here, I haven't tried Visual Studio Code but i'll be sure to check it out.

As a side note, WebStorm also supports TypeScript definitions. It has an menu to download and add them to your project from definitely typed under "Preferences->Languages & Frameworks->JavaScript>Libraries"

I also switched to VS Code after using WebStorm forever. Try it out.

VS Code has great TypeScript support (since both of those are Microsoft products)

I find the UX approach a little weird in VS Code. I like tabs. I've had tabs in my editors/ IDE's since I started out.

To make me switch to this 'working files' area really puts me off their product.

WebStorm has support for .d.ts definitions for some time now.

See JavaScript > Libraries > Download... and make sure to choose TypeScript community stubs. You can also add your own manually.

I do node.js dev w/ emacs, and my setup is pretty similar to the author's: magit, j2mode, tern + auto-complete-mode, etc.. It's pretty good. I haven't used WebStorm, but I've had stellar experiences w/ IntelliJ that lead me to believe its probably pretty good.

>While Emacs can find symbols and definitions in a single file via Tern

Tern supports node.js module loading so this should work across modules.

Does WebStorm have it's own proprietary debugger?

>Tern supports node.js module loading so this should work across modules.

This hasn't been my experience. I've tried various term commands and configuring tern to do things like eagerly loading project files, but it still only works for me in a single file. Do you have any links to docs on how to do this?

I literally just installed tern in atom a few minutes ago and it works. This is the .tern-project file I generated, but I have no idea if it's optimal.

{ "ecmaVersion": 6, "libs": [], "loadEagerly": [ "node_modules/lodash" ] }

I'm definitely getting lodash method lookups and they work well.

I hear it's not a good idea to throw all of node_modules at tern -- but the same applies for WebStorm.

Cool! I'll try tweaking my config tonight to see if i can have more success.

I just added a .tern-project file to load the "node" plugin to my node.js project skeleton http://i.imgur.com/yh4tphx.png

My whole dotemacs (including skeleton) is here https://github.com/wcummings/dotemacs

What would take Node integration in Emacs to the next level would be to do something like the various Lisp implementations and their Emacs modes (SLIME, Geiser, etc.) do: Talk to a running program to get information.

When I develop Scheme with Geiser, it knows which module I'm working in currently and it knows how to jump to the definition of any symbol by inspecting the source information attached to any Scheme object. I can quickly jump to the REPL or evaluate arbitrary expressions. No ctags/etags or other static analysis tools, just a REPL. It's a really productive way to write and debug code.

That's exactly how I use ClojureScript and one of the main reasons why I'll never go back to JavaScript. :)

That's how I write Ruby in Emacs. I have pry running in one pane, where I can write code with full context, then pull it across into the implementation.

This doesn't sound like the same thing. Do you use an Emacs mode that is able to talk to the Pry REPL and retrieve information about the code you are working with?

In addition to the other stuff I mentioned, Geiser also gives me symbol autocompletion, automatically shows me the printed representation of the value under the point, shows me the signature for the current procedure I'm working with, and shows docstrings if I press a special key combo. Maybe I didn't make this clear in my previous post, but Geiser does all of these things in the source buffers themselves, not just in the REPL buffer. If there's anything resembling this for Ruby or JavaScript I would love to know about because those are the two languages I am paid to work with.

For me, coding in a debugger is a superior experience to coding with static type info - because I have data too, not just types. Ie completion isn't the big win - seeing live results of processing data is.

I can't tell if you are agreeing with me or if we are miscommunicating. Seeing live results of processing data is exactly the type of thing I do with Geiser in Emacs. No static analysis.

If the information includes local variables and parameters, then we are agreeing; if not, then we are disagreeing.

Here are some helper commands I use to resolve JavaScript modules within emacs.

The basic idea is to extract the string inside the require or import call, then ask a node subprocess to locate that file (using require.resolve), and use emacs to open that file.

I'm sure someone more experienced with elisp can take it to the next level.

See the interactive commands section towards the end of the file.

https://github.com/ustun/emacs-helpers-for-js/blob/master/uo...

I tried Emacs many times, but I still can't understand its appeal. Yes, everything can be changed, but there are layers and layers and layers of legacy code, cryptic keystrokes and shortcuts from 30 years ago, conflicting packages, elisp (I don't have anything against Lisp in general, but this particular dialect is quite quirky), etc etc.

I was a heavy Vim user for about 4 years, and also did not understand Emacs though I tried it from time to time. The thing that changed my mind was using Org mode, and sticking with it for about two weeks. Once I felt comfortable in elisp and writing my own config, Emacs began to feel like a development environment that I had total control over. Everything that I bring from my life into Emacs -- task management, email, programming -- I now feel free to do them how I would like to do them. (Also, Org mode is great.)

edit: And there's nothing wrong with key bindings being 30 years old, Vim for instance has an incredibly efficient interface. Also, I find knowing basic emacs bindings quite useful around the OS X interface (many of them work).

And all that stuff will still be exactly the same, whichever language you're working in. It will also probably still be there in ten years' time - or, if not, it will have changed only quite slowly in the meantime.

(I know some people like to shake themselves up by doing the text editor equivalent of putting their shoes on the wrong feet, then once they get used to that, switching to walking on their hands to stop themselves from getting too comfortable - but I'm not one of them.)

Yet the amount of cruft is still not enough to make it irrelevant.

IDEs come and go. Emacs stays. It used to be mocked to be too large, today it's an average package, and tiny compared to other IDEs. It does a lot and let you extend it very freely (as of 2008, doing anything in Eclipse was a burden, can't speak of todays state though, I'll add that Emacs cruft has nothing to be ashamed of to the Eclipse Plugin and Workspace model, hundreds of (Object) list.get(arbitrary-index), TIMTOWDI.. )

People drool over features that were present in emacs for decades (flex match), and I've seen emacs absorb new ones (in-place evaluation of code with value preview for instance) faster than I would hope (a few years ago, a 2h sublime demo had literally nothing special).

It's syntax system felt (I never looked into it) superior to Eclipse (except for JDT) and VS.

Also Emacs users have a way of doing things. No mouse, often very lean. I'll rant about Eclipse again, but it really is bad. My hands hurts after one day (I morphed into an emacs alien maybe). Git integration is between unusable and useless (after 10y+ of work). etc etc

Plus energy is still flowing, look at Spacemacs, it's a lot less absurd than emacs, with a more stable plugin mechanism. People are still working on bringing guile elisp mode as the base vm.

Emacs have a lot of issues, and they don't matter.

I came to Emacs after learning my 5th IDE, and deciding I'd had enough of learning yet another set of cryptic keystrokes - if I was going to learn any more cryptic keystrokes, they'd be ones that would last for more than a few years. A minor benefit of learning the keystrokes is finding out they can apply elsewhere, like the shell readline, or in OSX.

try spacemacs!

http://spacemacs.org/

This makes Emacs great. It is a night and day difference. Multiple times I've tried to transition to Emacswithout it and just couldn't see why people love it. Spacemacs is a great default distribution and solves some major pain points of initial setup and "sane" defaults. There's still a couple things that I'm not quite hip with (installing new 'layers' without restarting, among a few others), but it's probably because I don't know enough about it yet.

As cool as spacemacs is, there are some pain points with it. Try following the documentation to add the mega theme pack. Insert the line that the docs say to insert. (into the file in which they tell you to insert it) Restart Emacs, find yourself stuck in pure emacs. Google how to exit emacs... or open a file and edit it. (If you have no experience with Emacs previously) Yes this is a doc issue, but the point is any misconfiguration, and you find yourself without any Vim-ishness at all.

This is what I see after I install Spacemacs on my Macbook:

https://www.dropbox.com/s/e6vhweatnrb98ow/spacemacs.png?dl=0

Are you _sure_ it is something usable? :)

Strange... Reach out to the maintainers, they act pretty quickly on issues.

On my MBP and the ones of my colleagues, plus my windows machines, spacemacs works great and without issues the last couple of months.

It even convinced 10y+ vim and IDE users to jump ship after testing it for a week.

From my own experience: developing in go, elixir, javascript + react ... It feels exceptionally great with the correct "layers" installed. And being a top notch crosslanguage IDE is just the tip of the iceberg of what spacemacs/emacs actually is capable of...

You are not alone. (I hope this knowledge soothes your pain)

One of the things mentioned in this article was magit (https://github.com/magit/magit). It's a tool I also use a crazy amount when developing with emacs.

Just wanted to remind everyone not to forget to donate when you find a tool that really saves you time/brings you joy while you dev.

Magit takes donations @ http://magit.vc/donations.html

I'm not at all affiliated with magit -- just donated and thought other people might feel the same if reminded.

I'm a recent convert to WebStorm from VIM. It's quite amazing. Atom doesn't come close in any way.

Those seeking a Node.js debugger may be interested in "devtool" which uses Electron to make Node.js apps run inside a Chrome DevTools instance.

https://github.com/Jam3/devtool

I'm persistently impressed (and happy) at the reslience of Emacs.

(Nice article too :)

tl;dr: (everybody already know this) webstorm is better at debugging

Actually for me, this is much more important: "Symbol and definition lookup is another great feature of WebStorm. While Emacs can find symbols and definitions in a single file via Tern, WebStorm can actually inspect your whole project and find a definition, or at least give you a very pruned list of candidates to choose from."

not being able to Ctrl-click a variable or function really reduces my efficency (especially with code that I did not write entirely on my own).

This is possible in emacs to a certain extent, with the help of node itself. See my comment above:

https://news.ycombinator.com/item?id=10973687

Sure, but the right metric with emacs is how feasible something is, not whether it's possible.

I'm not sure how other emacs users do this, but I use `projectile-grep` to grep for symbols in a project all the time. In the spacemacs this is bound to `SPC g s p`.

I use helm-ag for the same purpose, but it still generally isn't as fast as CMD-b in webstorm. I should hook up something to do helm-ag for the symbol under point...

Projectile-grep is awesome. I use it too. Although I swapped out grep for platinum-searcher for freaky fast results (at the loss of certain regex features)

as other have mentioned in this thread, Tern also is capable of inspecting your whole project to find a definition.

Exactly. I'd rather see how WebStorm compares to Visual Studio Code which has pretty great debugging for Node dev.

The debugger is huge to be sure. But a bigger thing for me personally is the TDD workflow. Being able to have it sit there and autorun a subset of relevant mocha tests as I am working is huge for me.

Is someone using WebStorm debugger successfully with Babel? I've never been able to make it work correctly (breakpoints in ES6 code, ES6 code in debugger, etc.) and it's infuriating. Any tips or guides?

Hi, I'm from the WebStorm team. Node.js debug with Babel should work in the latest WebStorm with Node.js v4, but to fix the issues with debugging with babel-node and Node.js v5, we're waiting for this pull request (https://github.com/nodejs/node/pull/4231) to be merged into Node.js, hope that will happen very soon.

"Symbol and definition lookup is another great feature of WebStorm. "

Webstorm does a great job here. But unfortunately like any "intelligent" tool, when there is a bug in the system you end up with a very frustrating tool. Right now there is a bug that causes properties defined on objects to be available in the global scope. I filed this bug some time ago, wish it would get some attention:

https://youtrack.jetbrains.com/issue/WEB-19183

Webstorm is my defacto for both Node.js and Scala. Expensive but worth it for me (especially since I usually get it reimbursed by work).

Scala? In WebStorm?

For Scala, there is IntelliJ IDEA CE, which is free and open-source.

Summary of the article:

https://www.cluelet.com/user/cluelet/emacs-vs-webstorm-for-n...

Disclaimer : Wrote the above app for comparisons like these.

I find it strange that you tried Webstorm and not Atom - considering Atom and all of it's packages are written in JavaScript (or transpiled to it), you can give it any functionality using the language you're already using - JS. I find Atom to be great for working with Node.js, and there's already an existing package for pretty much any functionality you could need, such as a Node.js debugger: https://atom.io/packages/node-debugger

Wow. So many comments and no mention of Atom in a talk about JS IDEs/editors?

Using Atom is just pure pain, though the pain goes away fast once you stop using it.

What pain are you experiencing? Im using it often and dont have any problems.

Well, it is just slow: bigger the code base / longer it runs, the more clearer this becomes. I used Atom for ~6 months, until I had enough and switched to sublimetext about 4 months ago.

Atom has been awesome for me for JS and Rust, and that's after being a years-long user of IntelliJ products (and vim -- but I don't ever truly ditch vim).

I was always taught that if you don't have anything nice to say...

I moved from WebStorm to Spacemacs. Mostly because although it's great, yet IdeaVim plugin for WebStorm is still lacking many things - any seasoned Vim user would need. Navigating in Emacs is WAY more better than in WebStorm. Another annoying thing is indexing. Searching and finding things in Emacs way faster. Also because WebStorm's code proprietary it takes them months to fix bugs. And they wouldn't even move a finger to fix something or implement new features if they don't see value proposition to sell more licenses.

I tried Webstorm when embarking on a React Native project. What turned me back to emacs was that neither worked well with jmx in my experience. I tried Atom which did manage jmx excellently but it crashed and or locked occasionally which was a deal breaker.

I do love jetbrains products so I will probably try again with Webstorm at some point, but for now emacs will do. I use emacs for org-mode project planning as well as for its scriptable editing

I had never heard of WebStorm. Apparently, it's "The smartest JavaScript IDE".

I started my career writing Perl CGI's, and have used, at various times, PHP, Python, Tcl, Ruby, Erlang, Java, Javascript and of course a lot of other stuff. Emacs has always done a good job, even if perhaps there was some editor/IDE that was a bit better for that specific langauge.

> "The smartest JavaScript IDE"

Lives up to that, IMO. I switched to WebStorm a couple months ago after using a combination of vim/Sublime and would never go back.

I do have the same issues the author has re: the Vim plugin though, could be much better.

Partially offtopic. The author is doing

> "complex edits [in Emacs] using Vim macros"

This is a big surprise. I left vi for emacs in the early '90s when vi's macros were crippled, to say the least. I'm using vim for quick edits, mainly on servers or configuration files (sudo vi /etc/something). Did vim macros really become better than Emacs' ones?

Vim's macros are super easy to record and play back, repeatedly. It's the one thing I'll still use evil mode for.

Emacs isn't that much worse, vim is just faster and easier.

Exactly this. I have the muscle memory built so I can just bang out the macro really fast, and evil lets it contain a mix of vim or emacs commands.

The author is actually just using Emacs macros with vim-style keybindings. Emacs macros are still probably more powerful.

Vim's macros are certainly more quickly composable. I still use them in emacs via evil using execute-kbd-macro:

   ;; select the current graph
   (execute-kbd-macro (kbd "ma{y}`a"))

Same here, I use vim for editing a single file (often scripts or configs), always in a terminal.

For editing multiple files (mostly code) or a project folder, I use emacs with X11.

not sure about "better", but i'm curious what was crippling back then? using them nowadays is a breeze and you get practically full functionality at your disposal.

You could have one macro per time and you had to type it in like this

:maappend chars to end of line( * )Jf:D

Then ^N to execute it, I think.

( * ) I don't remember how we quoted ESC

When I saw that emacs could record macros while I was typing that immediately sold me the editor. Multibuffer and multifile were nice features too.

Visual Studio Code! (drops mic)

Last time I tested WebStorm it was exceptionally slow, so I used Sublime.

My biggest gripe with the previous versions was the amount of memory it consumed (v 10). Hopefully they've resolved it.

My workflow.. edit in whatever, with webpack dev server watching in another terminal window.

> Another thing Emacs is much better at is Vim emulation.

At this point, I can't take the review seriously.

He's right though. it's very difficult to turn Vim itself into full-fledged IDE. Most of known modern editors and IDEs offer some sort of Vim emulation. And I've tried many of them. Visual Studio, Sublime, Atom, LightTable, IntelliJ, you name it - none of even close to what you can get in Emacs.

Visual Studio with Node.js tools is better than WebStorm.

It has everything WebStorm does plus better "dumb autocomplete" like Emacs and it's free.

Reply on news.ycombinator.com