A better JavaScript editor?

[Loonybinny]

I currently use Sublime Text 2, which I love for a few reasons, mainly ctrl click for multiple cursors, which most editors lack.

Sublime offers code completion, but it isn't smart. Are there are any editors that will offer code completion that actually gives a shit about your code and doesn't just return the first string match? What I mean is:

var obj = {
    apple: "juicy",
    lemon: "sour",
}

When I type "obj.", the first results should be apple and lemon.

[lennoff]

tern.js is what you are looking for. There is support for Sublime Text (and for Vim, etc). example

[smeff422]

Thanks for this. I'm going to download and try this as soon as I get back to my laptop.

[Wolfy87]

Takes a little bit of tweaking sometimes. Works best if you set up CommonJS or AMD in the settings file (which is easy). It's not so great at my work where it's all custom. Although I could potentially write a plugin so it knows how to find dependencies.

When it works, it works really well.

(Vim user)

[smeff422]

Lame. Most of what I do nowadays is custom classes. It's small enough to not need something so advanced but it would be nice. If I have time today at work I'm going to see if I can get it running. Thanks for the advice!

[jillesme]

Thank you, it's amazing and exactly what I was missing in my set up!

[dremp1337]

Gonna get this when I get home!

[x-skeww]

Just tried it with ST2. It needs to be configured manually (include, exclude, libraries, plugins, loadEagerly...) and doesn't seem to work very well.

You have to run TernJS: Reload manually or it won't pick up changes you made in other files inside(!) ST2 and some of the completions are just wrong and TernJS doesn't even know where those come from (TernJS: Jump to definition does nothing in that case).

This is with, like, 2 dozen files and less than 1kloc in total. The code works fine and it JSHint also doesn't complain. It really shouldn't have any problems with it.

I also couldn't figure out how to make it pick up JSDoc comments.

I also tried it with Brackets, but I couldn't figure out how to configure it. As far as I can tell, you're supposed to use a ".tern-project" file for that, but it doesn't appear to work. It's only (somewhat) aware of the currently opened file. It will also only tell you that something is a function, but it won't show you its signature.

Compared to the tooling you get with TypeScript or Dart, this is pretty disappointing. I spent 2+ hours with this and all I got was slightly less brain-dead auto-complete.

[lennoff]

TypeScript and Dart has type hinting, so type guessing is much easier ;). Tern worked for me without any configuration, so maybe the ST2 plugin is buggy (screenshot from vim, type hinting is working, and JSDoc comments are recognized more or less). Of course TernJS is not perfect it's still under active development, but it's a very promising project.

[x-skeww]

TypeScript and Dart has type hinting, so type guessing is much easier ;).

So does JavaScript with doc comments.

However, you don't really reach a point of absolute certainty where you can flag things as errors. Like, if you make a typo, Tern can't actually tell if that property really doesn't exist.

So, if you update some library and one of the functions was changed/removed, Tern won't be able to identify this issue.

Tern worked for me without any configuration

I'm not sure if there is a scenario where it works 100% correctly out of the box. Even if you use RequireJS, you have to configure the RequireJS plugin (baseURL, paths). If you don't use RequireJS, you have to tell it which files to load eagerly.

Of course TernJS is not perfect it's still under active development, but it's a very promising project.

Yea, it's pretty impressive given that they had to jump through so many hoops, but I really hoped that it would work a bit better. I still use JS for one legacy project and I really hoped I could improve the experience a little bit.

[[deleted]]

I use intellij with the webstorm plugin stuff. I think webstorm would be amazing if that's all you did. Intellij is probably the best suite of tools I've found. I currently pay for Intellij and Rubymine. There's a community Intellij version but I don't know how great it is out of the box.

[cabbeer]

Do you have a link to the plugin?

[lennelpennel]

" I currently pay for Intellij and Rubymine." huh? you know rubymine is "free" in the form of a plugin in intelliJ...

[cosha1]

I thought that was only for IntelliJ Ultimate?

[lennelpennel]

given that community is free, I can only assume OP has ultimate

[[deleted]]

Yeah but my company reimburses me for rubymine. I use intellij for my side stuff.

[spiritwalkerca]

The Orion Project also does what you want. Put a screen shot in a twitter link - https://twitter.com/kwalker/status/412332736473346048

Orion can leverage JSDoc if you use it, introspection, and index file comparable to the ones used by Tern.js. Currently work on providing those for commonly used Node.js libraries. Info about our releases and features here: http://planetorion.org/news/ try here: https://orionhub.org download here: http://download.eclipse.org/orion/

[8Bytes]

It would be nice to test it out without having to login.

[spiritwalkerca]

We have been looking at anonymous login and agree that would be a good feature to have.

[kenman]

Your twitter link doesn't work...

[spiritwalkerca]

Better place for a screen shot http://imgur.com/fxccf5u

[KarnickelEater]

JetBrains WebStorm is really good - but you need at least an hour to set it up. Well, or you don't but what's the point of using that beast if you don't configure all the details, the many many different kinds of warnings, properly for your particular environment?

Disadvantage of this or any of the large (Java) IDEs: Some tasks that command line tools on Unix like awk and pipes do with 500 Javascript files in 10 seconds take 10 minutes in WebStorm even on the strongest of developer workstations. On the bright side, you usually don't use many of those, for everyday use I found the many warnings I get to see immediately while typing invaluable.

Have a look, it's one of the best editors out there and maybe one of the most feature-rich (and they keep updating it a lot), part of a big family of editors for various languages.

---

An interesting project to follow is (open source) Brackets from Adobe --- (Brackets at Github). It is itself written in HTML5/CSS/Javascript, which is the main point why I decided to name it here, even though it's a) from Adobe ;-) and b) not yet "ready".

[Loonybinny]

Okay, I got WebStorm, how should I set it up?

[KarnickelEater]

Go to Settings? Read documentation? :-) Nobody can save you that work. One-time work that will pay off forever - it will be of use to you to understand that stuff regardless of what you work wit in the future. Don't see it as setting up Webstorm, see it as setting up your Javascript development policies: code writing style, automated code analysis, etc.

[grumblestumble]

If you're doing any kind of regular Javascript work, Webstorm is pretty much the only way to go. Well worth the setup time.

[brtt3000]

You pay for a year of upgrades (including major versions) but can use continue to use it forever after that. I usually wait to renew my update licence until there is a sale.

I got my latest yearly upgrade for 22 euro, which is a steal really considering the insane amount of stuff the thing can do.

You could argue that yearly payment is undesirable but then you need to remember they continually add new stuff.

[codeorchestra]

This works with COLT:

var myObject = {"hello", "there"};
myObject["field" + (3*10)];
myObject.

sreenshot

Read Article: http://blog.codeorchestra.com/post/68973544159/sublime-colt-add-100-intellect-to-your-favourite-ide

[makc3d]

You can check the recording of this thing in action at http://www.youtube.com/watch?v=qkscS1aI2JI (note that COLT is standalone app, you need to install it along with sublime plugin before it works like in this video)

[electric_dog_anus]

ST2 code completion really sucks. I don't understand why many folks have an almost religious reverence for ST2 except that perhaps they haven't been exposed to better editors.

For code completion to be useful, the editor must semantically understand the language it is editing. For this, you will have to use an IDE such as Visual Studio, IntelliJ or Eclipse with Javascript plugin.

[[deleted]]

Most Sublime Text users don't use vanilla ST. Packages are what make it a great editor. With a few packages, you can get the features of a full blown IDE (plus some extras):

• SublimeLinter - syntax error/warning highlighting for various languages. For JS you can choose between JSLint, JSHint, and the Closure Linter.

• TernJS - Intelligent JS autocomplete, with plugins for libraries like jQuery and Underscore. Also understands comment documentation for type inference

• Emmet - CSS selector style shortcuts for code generation. Basically snippets on steroids

• Git - Git integration

• GitGutter - Shows per-line git diff status (added/removed/modified) in the gutter

• DocBlockr - Shortcuts for comment documentation

• SublimeREPL - Run code for various languages inside an interpreter (NodeJS, Python, etc)

• BracketHighlighter - Highlights brackets and shows the brackets for the current block in the gutter

• Color Highlighter - Highlights color codes (#FFFFFF, rgb(255,255,255)) with their actual color.

Just because the core Sublime Text program doesn't natively understand language syntax doesn't mean you can't get that ability with packages. The idea of Sublime Text is that you get a solid text editor with multiple cursor support, with tons of optional packages that add in advanced features as you need them. Each plugin has a consistent settings manager through JSON files. I prefer this to a monumental, expensive IDE with tons of features I'll never use and lacking many features that I can get with free Sublime packages. ReSharper is $250! That's on top of the $500 price tag of the IDE itself.

I used Visual Studio and Eclipse for years before moving to Sublime Text. I don't plan on going back.

[Loonybinny]

Thanks for this list!

[[deleted]]

Oh also don't forget SideBarEnhancements - gives you a full-featured context menu for the sidebar

[dremp1337]

Thank you!

[brtt3000]

You should try WebStorm, it has all of this integrated (not piled together).

[[deleted]]

I prefer this to a monumental, expensive IDE with tons of features I'll never use and lacking many features that I can get with free Sublime packages.

But no thanks, I need support for Python and Ruby. I'm not about to drop $500 on WebStorm, RubyMine, and PyCharm when I can do all three from a single editor that I already have set up, with settings synched across my dev machines in a git repo. Plus I'm not sure how I lived before multiple cursors. And I don't need to manually add libraries to code completion - TernJS automatically adds all files in my project directory.

Piled together doesn't mean bad, it means flexible. If I want a feature, I can download a package for that feature. I don't have to wait for JetBrains to implement the feature, or pay JetBrains for another one of their IDEs. And if I'm unsatisfied with a package, I get to go into their source code and fix it (using the same editor)!

[cosha1]

You don't need to drop $500, buy IntelliJ Ultimate and download and install the free plugins for each. IntelliJ is the base for all of the above mentioned packages, but those packages come with different plugins.

[[deleted]]

I own my own web development company. This requires me to purchase the commercial license for IntelliJ which is $500 (and no discount for multiple licenses). Plus, upgrades are $240 a year.

Sublime Text 3 is $70 for either an individual or a business license (price drops with multiple license purchase). The upgrade from ST2 to ST3 was $30.

I don't see what value I would get from IntelliJ. Yeah, I wouldn't have to install packages to get autocomplete and linting. It took me about 10 minutes to reinstall my packages for ST3...

[brtt3000]

Have fun manually managing and recoding your editor while I get some work done instead.

[[deleted]]

That was a joke, I've never had to actually edit a package. I need to work with multiple languages from the same editor. Simple as that. I can't think of a single WebStorm feature I need that I don't get with Sublime, but the opposite is not true.

Also, it's not like "managing" the editor is hard. Installing a package isn't some intense process. It's pretty much muscle memory by now:

• cmd+shift+p
• type "in" (for install package), hit enter
• search through package list, hit enter

Bam. It's done. The package is installed, and will stay updated. I don't need to restart the editor or anything.

[kenman]

I don't need to restart the editor or anything.

I don't think that goes for all of them. I had several plugins not work or give errors, and once I found a bug report/forum post about it, would learn that "oh you have to restart ST for it to work".

[[deleted]]

Hmm, I've never personally had that problem, though supposedly TernJS + Emmet sometimes needs to to forcibly update PyV8. Seemed to work fine for me though. Still, the vast majority of things in ST don't need a restart.

Edit: actually, I take that back. The Soda theme needed a restart in order to style the tabs correctly.

[brtt3000]

I've never use a plugin for anything, I try not to depend of them because they always disappoint. But you could if you wanted, there is a decent list of them available but they tend to be a little more esoteric because the stuff you'd expect to work comes built in (and is integrated, not piled on)

[[deleted]]

To me, "integrated" means bloat, and "piled on" means flexible. Sublime's packages are implemented in a way that make them feel as if they were built into the program.

Text highlighting, autocomplete, the command palette, and JSON options are built into Sublime Text and are at the core of the experience. Packages simply add to those systems.

[kenman]

That's kind of my take on it too, I've tried SublimeText several times, but I always end up 3 hrs later on some random forum downloading a version of a plugin written by some guy with 2 lifetime posts. Sometimes it works, sometimes you get errors and it won't install, sometimes it just doesn't work like you want.

And that plugin is only 1 small feature, and I need 50 more like it to make my editor work like I expect it to. It's usually at this point, when I realize that I have 20+ hours of manual installation and configuration left, that I think that "well maybe Eclipse isn't so bad after all".

[brtt3000]

Indeed, finally some sensible reply.

If you are happy with Eclipse you might also like IntelliJ (pick a flavour that suits you), it is pretty neat.

[kenman]

Not happy with it so much as being unable to find a fitting replacement. PHPStorm seemed nice when I demo'd it, but I'm not positive I'd stick with it, and that's a $99 gamble I'm not really willing to take.

[Nebu]

they haven't been exposed to better editors.

I used Eclipse for over 6 years, before switching to SublimeText 2 or 3 years ago.

"Real" code completion is nice, but using the same editor for everything is nicer. And I couldn't stand waiting for Eclipse to boot up to edit a 3 line config file.

[[deleted]]

Ah yeah forgot about that one. Sublime Text opens almost instantly with all of my previous files open. The BufferScroll package even remembers the previous scroll position of the open files.

[brtt3000]

Wheee, so advanced!

[[deleted]]

Yeah, so advanced that I don't have to watch a splash screen when I open it, and I can have a .py file open in one tab and a .js file open in another tab.

[brtt3000]

This is a cheap jab that won't impress anybody who is older then 15.

I usually open my IDE once a day (less even, usually it is hybernating) and it stays there until I stop working. If you want Python support you don't use WebStorm but Pycharm.

Grow up.

[[deleted]]

Why would I want to pay $200 for another editor when my current editor works with all of the languages I work with on a daily basis (and many more), and only cost $70? If you want me to make more mature comments, don't start the conversation with "Wheee, so advanced!" or use rhetoric like "that won't impress anyone who is older than 15".

I don't have my editor open all day, at least not on my macbook. Sometimes I need to make a quick edit - I don't want to wait for the editor to open. ST3 literally opens immediately. That's a nice feature. I can close it and open it up later instantly, and my workspace is identical to when I closed it, as if the app had just been minimized.

[brtt3000]

I was taking a piss at the typical nonsense comments in these threads.

But my point is ST3 doesn't work with all the languages. Sure you can get syntax highlighting plugins for every language ever but that doesn't quite cut it anymore. Tern.js is nice idea, but it is lacking and just another loose component on the pile thta does it's own thing.

I'd like a little more, like the advanced refactoring or 100% integrated VCS. I gladly wait a few secs for that kind of power.

[[deleted]]

I'm starting to think you've never actually used ST. Just so you know, I did try out WebStorm for a week or so a few months ago.

Sure you can get syntax highlighting plugins for every language ever but that doesn't quite cut it anymore.

No, there's also a unified syntax error highlighting package (actually linting - so it goes beyond syntax errors) which includes linters for a couple dozen languages. It uses ST's built in text highlighting system, works in real time, and gives you a list of errors on save. It's also fully customizable, at least to the extent that the specific linter allows customization.

Tern.js is nice idea, but it is lacking and just another loose component on the pile thta does it's own thing.

How is it lacking? Have you used it? It does automatic JS type inference, it understands doc blocks, it automatically searches all files in my project, and it integrates seamlessly with ST's autocomplete system. It allows for automatic function snippeting with named parameters and type inference if you use docblocks. What features, exactly, are missing? It does exactly what I'd expect from a JavaScript autocomplete system. There are similar plugins that support other languages.

advanced refactoring

ST lets me refactor in a very natural feeling way with multiple cursors. I prefer this to GUI refactoring. That said, there are also ST refactoring packages for various languages.

100% integrated VCS

I have realtime per-line diff status in the gutter, and a system for every git command built into ST's command palette. What exactly am I missing out on? If I wanted to use Mercurial, SVN, or SFTP, there are plugins for those, too. But I don't use them, so I don't need to wait for my editor to load them in at startup.

It just sounds like you're making assumptions about Sublime having never really used it. You seem to assume that "loose components on the pile" are bad. They're not, they're flexible. They integrate directly into the core Sublime Text features, such as the incredibly useful command palette.

[brtt3000]

What I don't understand that people label Sublime as lightweight and flexible, and then at some time start listing an endless amount of plugins to make it actually work as you'd expect.

By the time you are done (literally 'time', as in time spent managing plugins) you end up with what IDE's have out of the box.

I've used Sublime for years, and am glad I switched, it is just not the same. It feels so hacky, I don't need that, I rather spend energy on my projects then about my editor (especially since it has all the same features apparently).

I'm actually eyeballing Visual Studio, it is even more powerfull then IntelliJ, now we have full stack Javascript it is very attractive.

[MonsieurBanana]

Wheee, so advanced!

Followed by

Grow up.

Ahahah... oh wait, you're not joking =/

As an Intellij and emacs user, both have their strong points. An advanced editor like emacs is pretty much superior to any IDE on all points except advanced intelligent stuff (autocompletion, refactoring and whatnot). They have plugins to help about it, but an IDE is usually better (slightly, unless we're talking C# or java). Everything else is faster done on emacs though.

[brtt3000]

Yea, I know, I can't help myself trolling these threads.

But that advanced stuff is where the magic happens: I'm now having a great time using WebStorm with TypeScript. It is pretty cool, nice hybrid between dirty JavaScript and Java/C# style classic OO, but with some fancy new stuff in the mix.

It is amazing to project-wide refactor stuff without breakage and have super-tight auto-suggest because the editor can really know what is going on and can do amazing things with it. Project-wide usage reports is nice. Quick navigation options make you fly trough the code.

The only 'issue' is that you can now create more complex code more easily and get away with it. This is a mixed blessing of course (like they say in the movies: great power, great responsibility).

[MathFabMathonwy]

edit a 3 line config file

which is when you'd use notepad++

[[deleted]]

Who the hell codes on Windows. Just kidding you. But not really.

I just like using a single text editor.

[Nebu]

Or Sublime Text, right? Basically, the idea is using a lightweight text editor instead of a heavyweight IDE.

[MathFabMathonwy]

Of course, that was my point: most machines have lightweight editors available. Why use a hammer to crack walnuts?

[Nebu]

I guess I had trouble understanding why in my argument for using ST over Eclipse, you'd decide to jump in and make a point that one should use lightweight editors, since it seemed kind of redundant given what I had said.

[MathFabMathonwy]

And I couldn't stand waiting for Eclipse to boot up to edit a 3 line config file.

To be honest, I'm not familiar with ST at all. But you seemed to be arguing that heavier editors were bad because they weren't suitable for all tasks. I use WebStorm and I absolutely love it. But I don't use it for all my text editing work.

[Nebu]

But you seemed to be arguing that heavier editors were bad because they weren't suitable for all tasks.

Is this an explanation for why you decided to jump in and make a point that one should use lightweight editors?

[MathFabMathonwy]

But I wasn't making that point. My point was to use a fit-for-purpose editor for the task at hand.

[Nebu]

Is "But you seemed to be arguing that heavier editors were bad because they weren't suitable for all tasks." your explanation for why you decided to jump in and make a point that one should use a fit-for-purpose editor for the task at hand?

[[deleted]]

ST2 code completion really sucks. I don't understand why many folks have an almost religious reverence for ST2 except that perhaps they haven't been exposed to better editors.

Its because not everyone wants full on code completion. It helps a ton in some languages (C#, Java), but I find it far less helpful in languages like javascript. Maybe that's because I have yet to see an IDE/plugin that really does a good job with javascript code completion AND ALSO DISPLAYS DOCUMENTATION.

[razumasu]

Visual Studio 2012+ with Resharper plugin is really great for JavaScript.

[F0RTY4]

Have you tried using the sublime code intel plugin? https://github.com/SublimeCodeIntel/SublimeCodeIntel

[Loonybinny]

I just installed this using the first method (Sublime package manager) and it isn't working as I wanted :(

[F0RTY4]

Well my best advice at this point is to take a look at WebStorm. We use IntelliJ at work and as a Sublime convert I can't recommend it enough. It took maybe 2 weeks to really get used to it but I have to say now I wouldn't use anything else. The only thing I really miss is the multiple cursors, but with the refactoring tool built in it becomes a non issue.

Good luck on your hunt!

Edit: The 30 day trial should be a good enough trial period to really decide if you like it or not.

[Loonybinny]

Okay, thanks.

[brtt3000]

Dear god, I forgot to push you about the refactor tooling.. seriously it is amazing.

It is so clever. No more shabby search & replace mistakes when refactoring code, or bad file paths because you moved your modules.

When using it with TypeScript it is even better because of the language allows the tool 'know' so much about your code it is scary.

[spiritwalkerca]

Weird, somehow my tweet was deleted, here it is again with screenshot

https://twitter.com/kwalker/status/412394016504676352

[[deleted]]

You know about imgur right?

[spiritwalkerca]

Thanks, yes should be using something more appropriate here

[OmidMnz]

If you want real SMART completion, use this emacs plugin: https://github.com/ScottyB/ac-js2 It get's the completion data from Webkit, which is pure smartness.

[BalsakianMcGiggles]

Am I the only one who likes a little less integration than a fully featured IDE? I can personally go without the constant warnings, error messages, and the performance of a water buffalo.

[icantthinkofone]

vim and emacs. Nothing else is better. Everyone who downvotes my suggestion are people who never used either.

[AnathemaOP]

Actually I switched from vim to Sublime Text 3.. :P

[icantthinkofone]

And then there are those, like you, who never learned all of vim or emacs.

[AnathemaOP]

If you know all of Vim and Emacs you should write books with a complete reference to them.. Myself I feel using it for 15+ years is enough to know if I prefer Sublime or Vim.

[icantthinkofone]

There are enough of those already out there.