javascript – openSUSE Lizards https://lizards.opensuse.org Blogs and Ramblings of the openSUSE Members Fri, 06 Mar 2020 11:29:40 +0000 en-US hourly 1 https://wordpress.org/?v=4.7.5 Javascript tools in openSUSE round 2: js-beautify https://lizards.opensuse.org/2014/08/18/javascript-tools-in-opensuse-round-2-js-beautify/ Mon, 18 Aug 2014 05:38:14 +0000 http://lizards.opensuse.org/?p=10943 I’ve been talking about how code construction is necessary to your coding project. With Javascript obfuscation or making code shine is more important than ever. There will be many many eyes looking at your code and see if it’s worth of nothing. After getting friend with js-beautify there ain’t no excuse to keep you ugly looking code laying around.

js-beautify

Js-beautify lives as (like last time JSHint tool) as a web service. If you just want to drop you Javascript code to http://jsbeautifier.org/ and see is this tools working go ahead. You can also use site to find your code guidelines parameters because you can test instantly how parameters looks like. Js-beautify github repository can be found https://github.com/beautify-web/js-beautify

How does it work?

Like last time we torture leaflet 0.7.2 minified code. It’s pain to make it look good with hand (and why one should there is good looking source available without touching minified version) with this king of example one can see how this tool really works. After installation with npm-tool or from my personal repo https://build.opensuse.org/project/show/home:illuusio:nodejs-fedora you have tool called js-beautify in you path. Running it is simple as this

js-beautify leaflet.js

after typing command one sees code outputted to STDOUT more readable form. So one can only get this like code style? No you can customize it until the bitter end of you life. If you like more K&R style formatting you can get one with:

js-beautify --brace-style=expand --indent-size=4 -f leaflet.js

Ok one have remember command line parameters every time.. nice. Actually not. There can be JSON formatted config file and defaults are like this: https://github.com/beautify-web/js-beautify/blob/master/js/config/defaults.json so using command line like this you can use your own defaults.

js-beautify --config=yourjsonconfig.json leaflet.js

Wait it’s not over yet!

With this tool there is also possibility to format CSS and HTML. You can use same js-beautify tool or short cuts css-beautify or html-beautify. These are nice tools to format HTML or CSS. There is also Python version of Js-beautify available but it’s not in focus of this post. It have same capabilities than Node.js version. So if you have read this and you code still look like dog have eat your home work then it’s your own fault. Now we have make code looking very good next time i’ll make it ugly..

]]> Javascript tools in openSUSE round 1: JSHint https://lizards.opensuse.org/2014/07/02/javascript-tools-in-opensuse-round-1-jshint/ Wed, 02 Jul 2014 09:04:31 +0000 http://lizards.opensuse.org/?p=10911 Node.js is not getting as much attention in openSUSE community as it’s gaining foot in development world.  Node.js is not just fancy buzz word that I just to be couple years back. There is plethora of libraries and tools that you can use for Node.js development or web-coding. I have been in this Nnode.js dependency hell (ok you can use npm if you like but if you like to make RPM-files you are in trouble) for a while but now I figured out most troubles and start using new tools! I copied most Node.js packaging stuff from Fedora as like Java Javascript is first class citizen of their ecosystem. I also added packages that were missing and updated and added and updated.

JSHint

One can find JSHint from website jshint.com (or from Github:  https://github.com/jshint/jshint/). JSHint is tool for linting Javascript. It has plenty of tips how to make your code work in every browser or how to be more compatible with Ecmascript-standard or just make you code rock. While website version is neat and works as expected you can come in the point when you need local version. Then you just install Node.js and version for it from: https://build.opensuse.org/project/show/home:illuusio:nodejs-fedora (they are pure openSUSE packages that are ported from Fedora project and I can image this is causing some cruel battles in court but you can use them if you wish.)

How does it work?

JSHint is very easy tool and it will drive you nuts because it will reveal all you bad habits to the World. Using it is simple as typing

jshint yourbestscript.js

For example Leaflet 0.7.2 script gives errors like that (this is minified version)

leaflet.js: line 6, col 215, Missing semicolon.
leaflet.js: line 6, col 385, Expected an assignment or function call and instead saw an expression.
leaflet.js: line 6, col 386, Missing semicolon.
leaflet.js: line 6, col 395, Missing semicolon.
leaflet.js: line 6, col 534, Missing semicolon.
leaflet.js: line 6, col 535, Missing semicolon.
leaflet.js: line 6, col 623, Missing semicolon.
leaflet.js: line 6, col 624, Missing semicolon.
leaflet.js: line 6, col 777, Missing semicolon.
leaflet.js: line 6, col 786, Missing semicolon.
leaflet.js: line 6, col 942, Expected an assignment or function call and instead saw an expression.
leaflet.js: line 6, col 943, Missing semicolon.
leaflet.js: line 6, col 966, Missing semicolon.
leaflet.js: line 6, col 967, Missing semicolon.
leaflet.js: line 6, col 996, Missing semicolon.
leaflet.js: line 6, col 1070, Missing semicolon.
leaflet.js: line 6, col 1138, Missing semicolon.
leaflet.js: line 6, col 1197, Missing semicolon.
leaflet.js: line 6, col 1275, Missing semicolon.
leaflet.js: line 6, col 1459, Missing semicolon.
leaflet.js: line 6, col 1646, Missing semicolon.
leaflet.js: line 6, col 1648, Missing semicolon.
leaflet.js: line 6, col 1743, Missing semicolon.
leaflet.js: line 6, col 1844, 'e' is already defined.
leaflet.js: line 6, col 1929, Missing semicolon.
leaflet.js: line 6, col 1949, 'i' is already defined.
leaflet.js: line 6, col 1955, Missing '()' invoking a constructor.
leaflet.js: line 6, col 2013, Missing semicolon.
leaflet.js: line 6, col 2195, Missing semicolon.
leaflet.js: line 6, col 2291, Missing semicolon.
leaflet.js: line 6, col 2341, Expected an assignment or function call and instead saw an expression.
leaflet.js: line 6, col 2342, Missing semicolon.
leaflet.js: line 6, col 2342, Expected an assignment or function call and instead saw an expression.
leaflet.js: line 6, col 2343, Missing semicolon.
leaflet.js: line 6, col 2597, Expected an assignment or function call and instead saw an expression.
leaflet.js: line 6, col 2598, Missing semicolon.
leaflet.js: line 6, col 2652, Missing '()' invoking a constructor.
leaflet.js: line 6, col 2682, Expected an assignment or function call and instead saw an expression.
leaflet.js: line 6, col 2756, Expected an assignment or function call and instead saw an expression.
leaflet.js: line 6, col 2986, Expected an assignment or function call and instead saw an expression.
leaflet.js: line 6, col 3171, Expected an assignment or function call and instead saw an expression.
leaflet.js: line 6, col 3241, Missing semicolon.
leaflet.js: line 6, col 3245, Missing semicolon.
leaflet.js: line 6, col 3301, Missing semicolon.
leaflet.js: line 6, col 3370, Missing semicolon.
leaflet.js: line 6, col 3507, Missing semicolon.
leaflet.js: line 6, col 3597, Expected an assignment or function call and instead saw an expression.
leaflet.js: line 6, col 3598, Missing semicolon.
leaflet.js: line 6, col 3598, Expected an assignment or function call and instead saw an expression.
leaflet.js: line 6, col 4018, Expected an assignment or function call and instead saw an expression.
leaflet.js: line 6, col 4018, Too many errors. (66% scanned).

Line numbers are broken because as I said it’s minified version of Leaflet but you get the point. Now if you do Javascript there is no excuse to wait your customer, user, mom or lover to nag about how bad your code it you can check it and feel the pain. Next time I’ll make your code shine.

]]>