How to setup Xcode for proper javascript formatting? - javascript

Xcode3 (and newer ;) doesn't properly format Javascript when I type something like:
doSomething(somewhere, function(err, result) {
It inserts a huge indentation. I tried to change Xcode formatting rules but no luck. One way or another it breaks indentations.
Is there a proper way to use Xcode for javascript development?

What worked fairly well for me is to switch the .js files to use C syntax coloring.
In XCode 4: Editor -> Syntax Coloring -> C
It still highlights numbers and strings and comments, and it indents braces in a sane way.

With some tweaking it is possible to modify the way Xcode indents JavaScript by supplying a custom xclangspec file. Xcode for formatting and syntax uses language definitions in xclangspec files kept in directory SharedFrameworks/DVTFoundation.framework/Versions/A/Resources. Since the formatting for C language works actually better for JavaScript than the Xcode original JavaScript formatting, it is possible to use some parts of definition for C in JS definition. More details you can find at http://www.conhar.com/xcode-and-javascript/.

A quick solution is to choose View -> Syntax Coloring -> Simple Coloring.
If you are okay to edit Javascript without fancy syntax highlight, this is pretty useful.
This way only the numbers and strings are colored, and the indentation stops being so annoying.

Unfortunatelly XCode has very limited formatting options.
But you can use uncrustify which is pretty good. You can find some information here:
Xcode source automatic formatting
Objective-C Tidy
These articles all talk about formatting objective-c code, however uncrustify can format the source code of various languages ;)
Hope this helps.

Uncrustify requires a .cfg file to setup which can be somewhat overwhelming. There's an alternative here

Related

Semi-obfuscate/uglify JavaScript

I know about JS minfiers, obfuscators and minifiers. I was wondering if there is any existing tool (or any fast-to-code solution) to partially obfuscate JavaScript. By partially I mean that it should become difficult to read, but not appear as uglified/minified. It should keep indentation, but lose comments, and partially change variable names, making them unclear without converting them to "a, b, c" like an obfuscator.
The purpose of this could be to take an explicit and reusable code and make it implicit and difficult to be reused by other people, without making it impossible to work with for yourself.
Any idea from where to start to achieve this ? Maybe editing an existing obfuscator ?
[This answer is a direct response to OP's request].
Semantic Designs JavaScript obfuscator will do what you want, but you'll need two passes.
On the first pass, run it as obfuscator; it will rename identifiers (although you can control how much or how that is done), strip whitepspace and comments. If you limit its ability to rename the identifiers, you lose some the strength of the obfuscator but that's your choice.
On the second pass, run it as a prettyprinter; it will introduce nice indentation again.
(In fact, the idea for obfsucation came from building a prettyprinter; if you can print-pretty, surely it is easy to print-ugly).
From the point of view of working with the code, you are better off working with your master copy any way you like, complete with your indentation and nice commentary as documentation. When you are ready to obfsucate, you run the obfuscator, shipping the obfuscated result. Errors reported in the obfuscated result that involve obfuscated names can be mapped back to the original names, using the map of obfuscated <--> original names produced during the obfuscation step.
This a product of my company. I'd provide a link but SO hates it when I do that, so you'll have to find it via my bio or googling.
PS: It works exactly as #georg suggests, by parsing to an AST, mangling, and prettyprinting. It doesn't use esprima.
I'm not aware of a tool that would meet your specific requirements, but it seems to be relatively easy to create, given that the vital parts already exist.
parse the source into an AST, using esprima or similar
manipulate the tree in the way you want (eg. remove comments, mangle identifiers etc)
rebuild the source from the tree using escodegen

JavaScript libarary for coding in a textarea (with proper indentation)

I am looking for a JavaScript libarary for coding in a textarea (with proper indentation).
I found Behave.js (http://jakiestfu.github.io/Behave.js/). However, that is lacking one basic feature: Indent a new line according to the last lines indent. It only does automatic indentation by recognizing braces and parentheses. Also, Codemirror and MarkItUp do not indent according to the last line, as far as I could see.
Do you know either an alternative library that does exactly that (and potentially more) or a way to add (or enable?) that functionality in Behave.js?
The reason why I need indentation like last line is that I want to be able to use a non standard programming language.
OK, I found the answer.
The Ace editor is the absolutely best code editor for JavaScript as far as I can see.
http://ace.c9.io/ it is developed by Cloud9 and some time ago the whole SkyWriter/Bespin team from Mozilla joined their efforts and have merged some of their features into Ace.

Javascript syntax checker for Text Area text?

Im working on a project and one of the requirements is that users can write their own javascript code, on a simple text area component.
This is easy, but I have to validate the syntax, something like 'error: missing ; at the end'... like most syntax checkers do.
I dont want to develop it, cause it would take a lot of time.
Does anybody know if a plugin exists for that?
I found one called Javascript Lint but it is a .exe file and it doesnt have native integration with Java (its a java ee project, jsp files, etc)
Thanks for the help!
Here is a simple top-down parser: https://github.com/douglascrockford/TDOP/blob/master/parse.js.
A more complicated parser is JSLint: https://github.com/douglascrockford/JSLint. JSLint is half parser, have C-style "lint" tool (for checking for common mistakes), but you can just make use of the parser half by not reporting 'lint' results to your users. You can also turn off all of the "lint" checks.
The major difference is that JSLint will do things like checking that variables are defined and in scope and checking for other mistakes/common bad practices.
If the data is not critical, you can ask users to paste their data in http://www.jslint.com/ (Doug Crockford's site) and it displays the errors within the JSON.
We had used YUI in our JS application, so we used YAHOO.lang.JSON.parse(your textarea's json content) to validate the user's Json. However, we were never able to give them an exact list of errors within the Json, we could only tell them if it was valid Json.
Thanks

How to setup Eclipse to be warned about trailing comma in JavaScript

As many of us know, IE7 is not quite friendly with JavaScript code containing trailing commas, which can be a large problem for projects using modern JS framerworks and containing a lot of JS code.
In a pretty good article on the subject, the author mentions:
On the tools front, my preference for combating these devils is the Eclipse JavaScript Development Tools. The JavaScript source editor in JSDT flags trailing commas as errors: http://www.enterprisedojo.com/wp-content/uploads/2010/12/jsdtRules.png
However, using Eclipse Indigo with WTP/JSDT, I'm not seeing trailing commas as errors, and I can't find a proper setting to fix this.
How do I setup Eclipse to flag trailing commas in JavaScript as errors?
It looks like the fix for another bug involving erroneous syntax errors on the comma operator also removed the syntax error on trailing commas in initializers. That's technically correct; the standard says they're allowed and IE7 is just nonconformant. There's a feature request open asking that they be reinstated.
Slightly off topic, but you should also look into using JSLint to check the syntax of the JavaScript code. It will warn you about the trailing comma, but also about many other potential problems. There is a good plugin for Eclipse, http://marketplace.eclipse.org/content/phonegap-android-jslintjshint. The instructions for setting it up: http://www.mobiledevelopersolutions.com/home/announce-1/mds12released-nowwithjslintjshint
Make sure you're in the correct perspective (ie JavaScript as opposed to Java).
Also, I found in Helios that if I added a JS file to the project by right-clicking and adding a new 'File' (which I would then name with a .js extension) didn't make the UI pick up that it should be treated as a JS file--no syntax highlighting, checking, etc. If I added it specifically using the new JavaScript file option, it worked fine.

Best way to decompress javascript files

There are many tools to compress a Javascript file (Packer YUI for example).
But how can I decompress them back to a human readable format?
I have compressed a file using a tool like Packer YUI , but I couldn't reach the source back again.
Is there any good software or tricks you can suggest to decompress the JS ?
You can't. Javascript compression is usually a lossy one, and the information is lost forever.
What you can do, is use a source formatter and a good refactoring tool and -- painfully -- reconstruct the original source. Even if you are not familiar with the code it should be possible; Jeff and a few others reverse engineered the WMD javascript code from a minified version.
Finally, you should consider using a version control system and proper backups to keep your source code safe.
This website is really cool. You can paste a minified JS, then you get a human readable view.
Try JSMinNpp (now called JSToolNpp) plugin for notepad++ (to compress and decompress).
http://www.sunjw.us/jstoolnpp/
DECOMPRESS JAVASCRIPT
A typical JavaScript compressed with /packer/ starts with the following code:
`eval(function(p,a,c,k,e,r)`…
`eval` can simply be replaced by alert.
The eval function evaluates a string argument that contains JavaScript. In most packers, eval is used, followed by document.write.
To decompress JavaScript, replace these methods by one of the following:
1. Replace eval by alert (The alert will simply print the code in a popup-window)
2. If the JavaScript appears after the <body> element, you can add a <textarea> like so:
`<textarea id="code"></textarea>`
Then, replace eval(…); by document.getElementById("code").value=…;.
A linter like ESLint can be handy as well. It can format the code using the "fix all auto-fixable problems" to a point where you can at least start doing manual editing with greater ease.
I never used Packer YUI. But if you use this javascript packer, you can always get your code back using this javascript beautifier which also decompresses the code.
Some javascipt minifier shorten the variable names while compressing the js. In that case you could never get your original code back even if you beautify it.

Categories

Resources