Comment puis-je embellir le code JavaScript à l'aide de la ligne de commande?

101

J'écris un script batch afin d'embellir le code JavaScript. Il doit fonctionner à la fois sous Windows et Linux .

Comment puis-je embellir le code JavaScript à l'aide des outils de ligne de commande?

grom
la source
Mon outil Pretty Diff est entièrement écrit en JavaScript, il fonctionne donc aussi bien sur tous les systèmes d'exploitation. Il prend en charge l'embellissement et la minification de JavaScript, CSS, tout langage de balisage utilisant des délimiteurs de style XML, y compris HTML. prettydiff.com/?m=beautify

Réponses:

64

Tout d'abord, choisissez votre Pretty Print / Beautifier basé sur Javascript. Je préfère celui àhttp://jsbeautifier.org/ , car c'est ce que j'ai trouvé en premier. Télécharge son fichier https://github.com/beautify-web/js-beautify/blob/master/js/lib/beautify.js

Ensuite, téléchargez et installez le moteur Javascript basé sur Java du groupe Mozilla, Rhino . "Installer" est un peu trompeur; Téléchargez le fichier zip, extrayez tout, placez js.jar dans votre chemin de classe Java (ou Bibliothèque / Java / Extensions sous OS X). Vous pouvez ensuite exécuter des scripts avec un appel similaire à celui-ci

java -cp js.jar org.mozilla.javascript.tools.shell.Main name-of-script.js

Utilisez le Pretty Print / Beautifier de l'étape 1 pour écrire un petit script shell qui lira votre fichier javascript et l'exécutera via le Pretty Print / Beautifier de la première étape. Par exemple

//original code    
(function() { ... js_beautify code ... }());

//new code
print(global.js_beautify(readFile(arguments[0])));

Rhino donne à javascript quelques fonctions supplémentaires utiles qui n'ont pas nécessairement de sens dans un contexte de navigateur, mais qui le font dans un contexte de console. La fonction print fait ce que vous attendez et imprime une chaîne. La fonction readFile accepte une chaîne de chemin de fichier comme argument et renvoie le contenu de ce fichier.

Vous invoqueriez quelque chose comme ci-dessus

java -cp js.jar org.mozilla.javascript.tools.shell.Main beautify.js file-to-pp.js

Vous pouvez mélanger et associer Java et Javascript dans vos scripts d'exécution de Rhino, donc si vous connaissez un peu Java, il ne devrait pas être trop difficile de le faire fonctionner avec des flux de texte.

Alan Storm
la source
3
le lien que vous avez donné est cassé, il devrait être celui-ci je pense, jsbeautifier.org
Sinan
2
Comment je l'ai fait:: ~ $ sudo apt-get install libv8-dev libv8-2.2.18: ~ $ cd einars-js-beautify-f90ce72 / v8: ~ $ g ++ -o jsbeautify jsbeautify.cpp -lv8 -Llib -lpthread Cela fonctionne juste. Merci à Einar Lielmanis et à toutes les personnes impliquées!
Беров
1
Cela semble être une cible mouvante. Maintenant, les informations sur le site jsbeautifier indiquent qu'elles sont écrites en python.
seth le
mise à jour pour les utilisateurs de cmdline, le repo suivant propose des outils de ligne de commande autonomes faciles à installer pour de jolies impressions js: github.com/einars/js-beautify.git
drhodes
Utilisez une approche JS moderne en utilisant Grunt: stackoverflow.com/questions/18985/…
Tchakabam
33

MISE À JOUR Avril 2014 :

L'embellisseur a été réécrit depuis que j'ai répondu à cela en 2010. Il y a maintenant un module python dedans, un package npm pour nodejs, et le fichier jar a disparu. Veuillez lire la page du projet sur github.com .

Style Python:

 $ pip install jsbeautifier

Style NPM:

 $ npm -g install js-beautify

pour l'utiliser:

 $ js-beautify file.js

Réponse originale

Ajout à Answer of @Alan Storm

l'embellisseur de ligne de commande basé sur http://jsbeautifier.org/ est devenu un peu plus facile à utiliser, car il est maintenant (alternativement) basé sur le moteur javascript V8 (code c ++) au lieu de rhino (moteur JS basé sur java, emballé comme "js.jar"). Vous pouvez donc utiliser V8 au lieu de rhino.

Comment utiliser:

télécharger le fichier zip jsbeautifier.org à partir de http://github.com/einars/js-beautify/zipball/master

(il s'agit d'une URL de téléchargement liée à un fichier zip tel que http://download.github.com/einars-js-beautify-10384df.zip )

ancien (ne fonctionne plus, le fichier jar a disparu)

  java -jar js.jar  name-of-script.js

nouveau (alternative)

installez / compilez v8 lib FROM svn, voir v8 / README.txt dans le fichier zip mentionné ci-dessus

  ./jsbeautify somefile.js

-a des options de ligne de commande légèrement différentes de la version rhino,

-et fonctionne très bien dans Eclipse lorsqu'il est configuré comme un "outil externe"

knb
la source
3
Ou si vous préférez python à la v8, il y a aussi un module python là-dedans maintenant.
retour
1
Le paquet npm s'appelle js-beautify
brafdlog
30

Si vous utilisez nodejs, essayez uglify-js

Sous Linux ou Mac, en supposant que vous ayez déjà installé nodejs, vous pouvez installer uglify avec:

sudo npm install -g uglify-js

Et puis obtenez les options:

uglifyjs -h

Donc, si j'ai un fichier source foo.jsqui ressemble à ceci:

// foo.js -- minified
function foo(bar,baz){console.log("something something");return true;}

Je peux l'embellir comme ça:

uglifyjs foo.js --beautify --output cutefoo.js

uglifyutilise des espaces pour l'indentation par défaut, donc si je veux convertir l'indentation à 4 espaces en onglets, je peux l'exécuter avec unexpandUbuntu 12.04:

unexpand --tabs=4 cutefoo.js > cuterfoo.js

Ou vous pouvez tout faire en une seule fois:

uglifyjs foo.js --beautify | unexpand --tabs=4 > cutestfoo.js

Vous pouvez en savoir plus sur unxpand ici

donc après tout cela, je me retrouve avec un fichier qui ressemble à ceci:

function foo(bar, baz) {
    console.log("something something");
    return true;
}

mise à jour 07/06/2016

Il semble que le mainteneur de uglify-js travaille maintenant sur la version 2 bien que l'installation soit la même.

erapert
la source
4
C'est la bonne réponse pour un embellisseur de code JavaScript en ligne de commande.
bitek
uglifyjs -bfait beaucoup plus que corriger l'indentation, il réorganise et réécrit le code, peut-être pour plus d'efficacité. Ce n'est pas ce que je voulais. J'utilisais une ancienne version, dans Ubuntu 14.04.
Sam Watkins
Pourriez-vous s'il vous plaît expliquer un peu plus comment uglifyjs -bréorganise et réécrit le code?
erapert
11

Sur Ubuntu LTS

$ sudo apt install jsbeautifier
$ js-beautify ugly.js > beautiful.js
Serge Stroobandt
la source
1
La meilleure réponse pour le moment. Pour une utilisation embellissante en placejs-beautify -o file.js file.js
Petr Javorik
3

Dans la console, vous pouvez utiliser Artistic Style (aka AStyle) avec --mode=java.
Cela fonctionne très bien et c'est gratuit, open-source et multiplateforme (Linux, Mac OS X, Windows).

tmaric
la source
2

Utilisez la méthode JavaScript moderne:

Utilisez Grunt en combinaison avec le plugin jsbeautifier pour Grunt

Vous pouvez tout installer facilement dans votre environnement de développement en utilisant npm .

Tout ce dont vous aurez besoin est de configurer un Gruntfile.js avec les tâches appropriées, qui peuvent également impliquer la concaténation de fichiers, lint, uglify, minify, etc., et exécuter la commande grunt.

Tchakabam
la source
2

Je ne suis pas en mesure d'ajouter un commentaire à la réponse acceptée, c'est pourquoi vous voyez un message qui n'aurait pas dû exister au départ.

Fondamentalement, j'avais également besoin d'un embellisseur javascript dans un code java et à ma grande surprise, aucun n'est disponible pour autant que je puisse trouver. J'en ai donc codé un moi-même entièrement en fonction de la réponse acceptée (il enveloppe le script jsbeautifier.org beautifier .js mais peut être appelé à partir de java ou de la ligne de commande).

Le code se trouve sur https://github.com/belgampaul/JsBeautifier

J'ai utilisé rhino et beautifier.js

UTILISATION depuis la console: indentation du script java -jar jsbeautifier.jar

exemple: java -jar jsbeautifier.jar "function ff () {return;}" 2

USAGE from java code: public static String jsBeautify (String jsCode, int indentSize)

Vous êtes invités à étendre le code. Dans mon cas, je n'avais besoin que de l'indentation pour pouvoir vérifier le javascript généré pendant le développement.

Dans l'espoir que cela vous fera gagner du temps dans votre projet.

ioikka
la source
1

J'ai écrit un article expliquant comment créer un embellisseur JavaScript en ligne de commande implémenté en JavaScript en moins de 5 minutes. YMMV.

  1. Téléchargez le dernier Rhino stable et décompressez-le quelque part, par exemple ~ / dev / javascript / rhino
  2. Téléchargez beautify.js qui est référencé à partir de jsbeautifier.org susmentionné puis copiez-le quelque part, par exemple ~ / dev / javascript / bin / cli-beautifier.js
  3. Ajoutez ceci à la fin de beautify.js (en utilisant des propriétés de niveau supérieur supplémentaires pour JavaScript):

    // Run the beautifier on the file passed as the first argument.
    print( j23s_beautify( readFile( arguments[0] )));
  4. Copiez-collez le code suivant dans un fichier exécutable, par exemple ~ / dev / javascript / bin / jsbeautifier.sh:

    #!/bin/sh
    java -cp ~/dev/javascript/rhino/js.jar org.mozilla.javascript.tools.shell.Main ~/dev/web/javascript/bin/cli-beautifier.js $*
  5. (facultatif) Ajoutez le dossier avec jsbeautifier.js à PATH ou déplacez-vous vers un dossier déjà présent.

Shonzilla
la source
1

Je crois que lorsque vous avez posé des questions sur l'outil de ligne de commande, vous vouliez simplement embellir tous vos fichiers js par lots.

Dans ce cas, Intellij IDEA (testé avec 11.5) peut le faire.

Il vous suffit de sélectionner l'un de vos fichiers de projet et de sélectionner "Code" -> "Reformater le code .." dans le menu principal de l'IDE. Ensuite, dans la boîte de dialogue, sélectionnez "tous les fichiers du répertoire ..." et appuyez sur "Entrée". Assurez-vous simplement de consacrer suffisamment de mémoire à la JVM.

gumkins
la source
0

Vous avez quelques choix d'une seule doublure. Utiliser avec npm ou autonome avec npx .

Sémistandar

npx semistandard "js/**/*.js" --fix

la norme

npx standard "js/**/*.js" --fix

Plus jolie

npx prettier --single-quote --write --trailing-comma all "js/**/*.js"
Alex Nolasco
la source