We Keep Coding

How to catch typos errors in VIM for EmberJS (Javascript)

I am starting to learn EmberJS/JS/VIM . I was going through the official ToDoMVC guide for EmberJS, and I ran into typos errors that was really really hard to detect with the "eyes" and the browser really didn't help in this case at all. So, can you please suggest me what tools or techniques that can be used to detect these types of typos errors?
For example:
### todo_controller should've been todos_controller
<script src="js/todo_controller.js"></script>
### catching the end of { } closed scoping
### typo within a model js "property"
inflection: function() {
var remaining = this.get('remaining');
return remaining === 1 ? 'todo' : 'todos';
}.proprety('remaining')
EDIT;
Yes, I did search before posting here. The first was this website, and the comments here basically suggest DreamWeaver Frustration with Typos.
I searched SO itself (through google), and there was Is there a way to catch typos. I did find out there is something called LINT, but it dealt with coffeescript.
I did find out ember.vim as you pointed out before, but as you see the README in the github profile, i believe it strictly wants you to follow the layout as prescribed. It may be a good thing in future, but right now, I wanted to just stick with what the official ToDoMVC way. I am just beginning to get a hang of hjkl, so I do not think I can makes changes to it to fit my way. Also, second point, is the layout format it supports is Ember-AppKit which has been deprecated. SO I am having doubts if I should follow the layout pattern itself.
And all of them didn't particularly address what I am asking. In the todo_controller typo above, the browser didn't throw any sort of errors. I am using FF/Firebug, and on the Console, it only showed the message about Ember loading, and no errors at all. It took me a while to see that typo. The second one did throw errors, but typos are a hard thing to discover in VIM. The third one, took a bit of time, and there were others. These don't throw errors at all. I am used to PHP, and while there is no direct showing of errors as in Android, I am finding Javascript typo hunting to be very hard.

it took me like 3 looks before I saw your typo.
Set your browser to pause on exceptions (sometimes pause on Caught Exceptions). It's been one of the quickest ways I've found to track down a weird bug. In this case I'm sure you were getting Uncaught TypeError: undefined is not a function....

Don't take this the wrong way, but did you try to search before asking? There has been, for quite a while now, a plugin for Vim that has syntax highlighting improvements.
https://github.com/dsawardekar/ember.vim
Beyond that plugin, you could try writing your own solution. I haven't tried, but I doubt there is anything out there that will pick up spelling errors for Ember...
I use JSLint for SublimeText 3, which lints as you code so you get a live update of any potential bugs. Kinda nice. Here's something similar for Vim: https://github.com/hallettj/jslint.vim
As #kingpin2k suggests, you should really learn how to use your browser tools. The big three are just jam-packed full with development and debug tools. 9 times out of 10 it gives you the line and column of the error, and you can set breakpoints within the code to watch it execute in-context. And, that is really just the tip of the iceberg in terms of how detailed you can get with debugging in-browser.

Unminify / Decompress JavaScript

Original Question
This maybe a stupid question but is there a way in VS 2013 to unminify JavaScript?
Just making sure we are all on the same page here.
Minify:
var flashVer=-1;if(navigator.plugins!=null&&navigator.plugins.length>0){if(navigator.plugins["Shockwave Flash 2.0"]||navigator.plugins["Shockwave Flash"]){var swVer2=navigator.plugins["Shockwave Flash 2.0"]?"
That's just an example to make sure we all know what I'm on about. As far as I can tell there is no way to be able to do this. I have only been using VS 2013 for around 3 weeks so there is probably still stuff that is hidden to me.
If there is no way to do this within the program what is the next best thing for this?
I did see on another similar post that recommends the site http://jsbeautifier.org/ , so may have to give that ago but would make life easier if it was built into VS 2013
Thanks in advance as I know someone will be able to help me out here.
Update:
I have looked around VS 2013 and found nothing that can help me with this problem, like I said before they maybe some things I have missed (certain settings) so I guess if it cannot be done in VS what's the next best thing for the job? I seem to run into a fair amount of JS that is minifed and would like the quickest and best way to get the job done. I couple sites I have tried seem to have problems with it, is there a program I could install that would just allow me to short cut it with a hot-key or something. That would be pretty handy.
Update 2:
So I think its safe to say this cannot be done within VS2013, or for that matter at all due to missing var names and so on. So I have seen a few links and programs that allow you to format the code. Is there a way to do with within VS2013? And again if not what is the most reliable website/program that I can use to do this. Like I said I can see there have been answers and I appreciate all of them. I will be leaving this question open for a while to get more people to look at it and possibly give a better answer. Keep it up guys!
Update 3:
If anyone has any more information on this please do share. I am still looking around now and then waiting for someone to come up with something amazing for this. One day people.... One day!

The thing is that you cannot really "unminify" your code since some data was already lost - e.g. variable names. You can reformat it to more readable form though.
According to this question, since VisualStudio 2012 you can just use Ctrl+E, D keyboard shortcut
If the above is not right, there is this extension for VS 2010: http://visualstudiogallery.msdn.microsoft.com/41a0cc2f-eefd-4342-9fa9-3626855ca22a but I am not sure if it works with VS 2013
There is an extension to VisualStudio called ReSharper which can reformat javascript in a few different manners.
Also there are online formatters already mentioned in other answers (if your code is confidential, I would advise some paranoia manifested by downloading sources and using them locally).
Also you may always try to find unminified version of desired library on the interwebs
Also, there is the WebStorm IDE from JetBrains that is able to reformat JS - you may download a trial for the sole purpose of reformatting your minified scripts :)
If that's just to make debugging easier, you may want to use source maps
Also, here is a bunch of related questions:
How to automatically indent source code? <-- this is for VS2010, but it looks promising, maybe it will help you if it supports JavaScript (and it does since VS2012 according to MS support):
Ctrl+E, D - Format whole doc
Ctrl+K, Ctrl+F - Format selection
reindent(reformat) minimized jquery/javascript file in visual studio
Visual Studio 2010 can't format complex JavaScript documents
Visual Studio code formatter
how to make visual studio javascript formatting work?
I am not sure if they figured out a working way to reformat JS, but I've seen a few answers which might be helpful - I am just pasting this in here just FYI.
Added 03.06.2014:
http://www.jsnice.org/
This tool could be useful too, it even tries to infer minified names. As stated on their website:
We will rename variables and parameters to names that we learn from thousands of open source projects.

Personally I can't think of a reason to ever unminify code^:
If you're using a compiled js file (a-la google closure) and want more readable code to debug, use source maps available for well-supported libraries (speaking of jQuery, if it is served from a google CDN it already maps to the correct source)
If you're using a whitespace-only minified js file and want more readable code to debug, you could just toggle pretty print in-browser. This seems to best fit your question.
If you're using either of the above and want to modify the source code for a third-party js file, don't. Any future release will cancel out your change - instead consider one of the many patterns to extend a framework (or, perhaps, do some duck punching depending on the exact scenario.)
The other answers seem to cover the "unminification" process (maxification?) well, but it's worth making sure it's a necessary step first.
^ - Except when version control falls over, there are no backups and the only version of the file left is a minified copy in browser cache. Don't ask.

Its just a one way transformation .... sorry in normal cases you will not get something understandable back from minified JavaScript !
Make just a quick look at JQuery source for a second:
(function( window, undefined ) {
// Can't do this because several apps including ASP.NET trace
// the stack via arguments.caller.callee and Firefox dies if
// you try to trace through "use strict" call chains. (#13335)
// Support: Firefox 18+
//"use strict";
var
// The deferred used on DOM ready
readyList,
// A central reference to the root jQuery(document)
rootjQuery,
// Support: IE<10
// For `typeof xmlNode.method` instead of `xmlNode.method !== undefined`
core_strundefined = typeof undefined,
// Use the correct document accordingly with window argument (sandbox)
location = window.location,
document = window.document,
docElem = document.documentElement,
// Map over jQuery in case of overwrite
_jQuery = window.jQuery,
// Map over the $ in case of overwrite
_$ = window.$,
// [[Class]] -> type pairs
class2type = {},
// List of deleted data cache ids, so we can reuse them
core_deletedIds = [],
core_version = "1.10.2",
------
And now at the minify source:
(function(e,t){var n,r,i=typeof t,o=e.location,a=e.document,s=a.documentElement,
l=e.jQuery,u=e.$,c={},p=[],f="1.10.2", ....
I think now you see it =>
window => e
undefined => t
readyList => n
rootjQuery => r
core_strundefined => i
location => o
document => a
So its mapped somehow to make it more shorter look here to minify something
People normally use this so there is no way back
you can just format it look here

If the code has only been minified then the best you can do automatically is reformat to make it more readable. One way of doing this is using an online formatter/beautifier. E.g. Copy and paste the line of code you posted into http://jsbeautifier.org/ or http://www.jspretty.com/ and it'll produce something like this:
var flashVer = -1;
if (navigator.plugins != null && navigator.plugins.length > 0) {
if (navigator.plugins["Shockwave Flash 2.0"]
|| navigator.plugins["Shockwave Flash"]) {
var swVer2 = navigator.plugins["Shockwave Flash 2.0"] ? ""
But of course what these don't do is put any comments that have been removed by the minifier back in. And if the code has also been obfuscated then it will be a lot less readable since the variable names will have changed (e.g. var a instead of var flashVer). See here for further details.

As you can see from the other answers, there is no way to reconstitute minified Javascript back into its original form, it is a lossy compression. The best you can do is make it readable by reformatting it.
If the code is open source, then it is likely that the code will exists in a raw state on some form of version control site or as a zip. Why not just download the raw version if available?

There is an online tool to unminify Javascripts
http://jsbeautifier.org/
And also for CSS
http://mrcoles.com/blog/css-unminify/

Vim Javascript autocompletion picks comments as suggestions

I have the following line in my vimrc to enable Javascript completion:
autocmd FileType javascript set omnifunc=javascriptcomplete#CompleteJS
The problem is that if I'm working on a JS file that contains a lot of comments, for example:
// draws the map and the pieces depending on the state of the game
Vim picks words from those comments, such as draws, map, etc.; and considers them as acceptable code suggestions, which they are clearly not. How can I filter them out?

Vim has a number of completion mechanism suited for different needs: keyword completion, file name completion… and omni completion, the kind of completion most suited to programming.
Omni completion is usually initiated by pressing <C-x><C-o> and will certainly never pick a suggestion from the comments in your file. Are you sure you are using omni completion and not something else? <C-n> or <C-p>, maybe? See :h ins-completion for the full list.
Also, that line is totally useless. Supposing you have filetype plugin indent on in your ~/.vimrc, it's completely unnecessary to tell Vim to use JS completion in JS file.

JS autocompletion requires dynamic type inference, which is difficult for non-IDE text editors.(JS has no static class, you know!) Vim probably just implement a fuzzy matching algorithm to make completion. (I just guess, because I don't use vim personally). I think Vim also takes comments into consideration because it probably does not interpret js!
You can try the new Ternjs plugin for Vim. You need node.JS. Make sure your Vim has Python support.
Online demo is on http://ternjs.net/
Generally, javascript autocompletion is difficult to accomplish due to the dynamic nature of that language. Ternjs makes type inference like javascript engine, and thus makes autocompletion better.
(Personally I have tried tern in SublimeText. Great Experience except initial loading and no builtin function such as document.body.appendChild)

Renaming variables in JavaScript

I've been stuck with the unpleasant task of "unminifying" a minified JavaScript code file. Using JSBeautifier, the resulting file is about 6000 lines long.
Ordinarily, the variable and parameter names would be permanently lost, but in this case, I have an obsolete version of the original file that the minified JavaScript code file was generated from. This obsolete version of the original file contains most of the code comments and variable names, but absolutely cannot be used in place of the current version.
I would like to know if there is some way of renaming all instances of a particular parameter or variable in JavaScript. Since minification reduces the names to a single character, find-and-replace is impossible.
Is there some tool out there, which I can tell, in this file, the parameter a to function foo should be clientName and have it semantically rename all instances of that parameter to clientName?
Unfortunately, I work for a large organization with an approved list of software and I am stuck with Visual Studio 2010 for the forseeable future (no VS 2012).
Update: #Kos, we don't use Git, but we do use source control. The problem is that a developer who doesn't work for my organization anymore once made changes to the file, minified it, and only checked in the minified version to source control, so his changes to the original have been lost.

I'm a year late for this answer, but I had a similar problem to yours so I built this: https://github.com/zertosh/beautify-with-words. It unminifies code using UglifyJS2 but uses a phonetic word generator to rename variables. You get "long-ish" variable names so it's a breeze to do a find-and-replace. Hope this helps someone else!

You might have another way out.
Check out the last unminified version of the code. Compare to the minified version. Arguably most of it should be the same modulo consistent variable renaming. The differences you'll have to rename and remerge.
Diff won't do this kind of compare; you need tools that compare the programs as code, not text. Our SmartDifferencer tool will do this (by using language-specific full parsers to generate ASTs, and then comparing the ASTs); in effect, it compares the programs in spite of whitepspacing. SmartDifferencer also handles renaming; if two file are identical modulo a single renaming, that's what SmartDifferencer tell you.
I don't know how well this work work out; we haven't tried SmartDifferencer with 6000 lines of "consistently renamed" variables.

I found that a Visual Studio extension we've licensed here called "Telerik JustCode" has functionality to do what I want.

How to find functions/operators/methods in JS files quickly and easily

I'm looking for an app or a command line tool that can help me quickly find a defined function in a file. The file in question here is the EXT-debug.js file. I want to override some methods(in this case onRender) however I need to figure out the signature of said functions.
I've yet to try Eclipse or Aptana; I'm looking for a more lightweight solution.

I use agent ransack. It's able to search for files as well as content. I also like the fact that you can run it on demand as it does not use an invasive, indexing service.
Agent Ransack

Visual Studio is not exactly a lightweight solution, but I have to recommend it. It's come a long way towards becoming an excellent JavaScript editor.
Visual Studio's IntelliSense is able to infer JavaScript types and give you a dropdown of the functions and values in your object (works pretty well).
Of course, I always have my handy little muscle memory spasm: double-click-select -> Ctrl-C -> Ctrl-Shift-F -> Ctrl-V -> ENTER
And here's a plugin that pre-searches for exact string matches in your entire solution and highlights them for you, so jumping to a function definition is instantaneous. Whole Tomato's Visual Assist X