
Emacs vs. WebStorm for Node.js Development - philk10
https://spin.atomicobject.com/2016/01/26/webstorm-nodejs-development/#.Vqd9ca3DCqg.hackernews
======
vfc1
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](https://confluence.jetbrains.com/display/WI/WebStorm+EAP)

~~~
lucisferre
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.

~~~
such_a_casual
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.

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

~~~
such_a_casual
Are you using the mouse when this is happening?

------
ibabanov
"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.

~~~
scottaj2
>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 :(

~~~
ibabanov
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](http://ternjs.net/doc/manual.html#configuration)

~~~
base698
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.

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

~~~
michaelwww
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.

~~~
moonchrome
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)

------
wcummings
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?

~~~
scottaj2
>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?

~~~
krisdol
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.

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

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

~~~
barrkel
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.

~~~
davexunit
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.

~~~
barrkel
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.

~~~
davexunit
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.

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

------
ludwigvan
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...](https://github.com/ustun/emacs-helpers-for-
js/blob/master/uojs.el)

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

~~~
anonyfox
try spacemacs!

[http://spacemacs.org/](http://spacemacs.org/)

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

[https://www.dropbox.com/s/e6vhweatnrb98ow/spacemacs.png?dl=0](https://www.dropbox.com/s/e6vhweatnrb98ow/spacemacs.png?dl=0)

Are you _sure_ it is something usable? :)

~~~
anonyfox
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...

------
hardwaresofton
One of the things mentioned in this article was magit
([https://github.com/magit/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](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.

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

------
mattdesl
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](https://github.com/Jam3/devtool)

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

(Nice article too :)

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

~~~
Illniyar
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).

~~~
emidln
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`.

~~~
scottaj2
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...

------
straku
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?

~~~
prigara
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](https://github.com/nodejs/node/pull/4231))
to be merged into Node.js, hope that will happen very soon.

------
teleclimber
"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](https://youtrack.jetbrains.com/issue/WEB-19183)

------
josep2
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).

~~~
Isn0gud
Scala? In WebStorm?

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

------
cluelet
Summary of the article:

[https://www.cluelet.com/user/cluelet/emacs-vs-webstorm-
for-n...](https://www.cluelet.com/user/cluelet/emacs-vs-webstorm-for-nodejs-
development/)

Disclaimer : Wrote the above app for comparisons like these.

------
wyqydsyq
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](https://atom.io/packages/node-debugger)

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

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

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

~~~
feider
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.

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

------
justinhj
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

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

~~~
rco8786
> "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.

------
pmontra
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?

~~~
DigitalJack
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.

~~~
scottaj2
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.

------
outside1234
Visual Studio Code! (drops mic)

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

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

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

------
anonyfox
somewhat related:
[https://news.ycombinator.com/item?id=10973077](https://news.ycombinator.com/item?id=10973077)

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

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

~~~
iLemming
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.

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

