Komut Satırını kullanarak JavaScript kodunu nasıl güzelleştirebilirim?


101

JavaScript kodunu güzelleştirmek için bir toplu komut dosyası yazıyorum. Hem üzerinde çalışması gerekiyor , Windows ve Linux .

Komut satırı araçlarını kullanarak JavaScript kodunu nasıl güzelleştirebilirim?


Pretty Diff aracım tamamen JavaScript ile yazılmıştır, bu nedenle tüm işletim sistemlerinde eşit derecede iyi çalışır. JavaScript, CSS, HTML dahil olmak üzere XML stil sınırlayıcıları kullanan herhangi bir biçimlendirme dilinin güzelleştirilmesini ve küçültülmesini destekler. prettydiff.com/?m=beautify

Yanıtlar:


64

Öncelikle, en sevdiğiniz Javascript tabanlı Pretty Print / Beautifier'ı seçin. Ben de olanı tercih ederimhttp://jsbeautifier.org/ , bu ilk ne buldum çünkü. Dosyasını indirir https://github.com/beautify-web/js-beautify/blob/master/js/lib/beautify.js

İkinci olarak, Mozilla grubunun Java tabanlı Javascript motoru Rhino'yu indirin ve yükleyin . "Yükle" biraz yanıltıcıdır; Zip dosyasını indirin, her şeyi çıkarın, js.jar'ı Java sınıf yolunuza (veya OS X'te Kitaplık / Java / Uzantılar) yerleştirin. Daha sonra buna benzer bir çağrı ile komut dosyaları çalıştırabilirsiniz.

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

Javascript dosyanızda okuyacak ve birinci adımdan Pretty Print / Beautifier ile çalıştıracak küçük bir kabuk komut dosyası yazmak için 1. adımdaki Pretty Print / Beautifier'ı kullanın. Örneğin

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

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

Rhino, javascript'e bir tarayıcı bağlamında mutlaka bir anlam ifade etmeyen, ancak konsol bağlamında işe yarayan birkaç ekstra yararlı işlev sunar. Print işlevi beklediğiniz şeyi yapar ve bir dize yazdırır. ReadFile işlevi bir dosya yolu dizesini bağımsız değişken olarak kabul eder ve bu dosyanın içeriğini döndürür.

Yukarıdakileri şöyle çağırırsınız:

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

Rhino çalıştırma komut dosyalarınızda Java ve Javascript'i karıştırıp eşleştirebilirsiniz, bu nedenle biraz Java biliyorsanız, bunu metin akışlarıyla da çalıştırmak çok zor olmamalıdır.


3
verdiğiniz link bozuk, sanırım bu olmalı, jsbeautifier.org
Sinan

2
Nasıl yaptım:: ~ $ sudo apt-get install libv8-dev libv8-2.2.18: ~ $ cd einars-js-beautify-f90ce72 / v8: ~ $ g ++ -o jsbeautify jsbeautify.cpp -lv8 -Llib -lpthread Sadece çalışıyor. Einar Lielmanis ve ilgili herkese teşekkürler!
Беров

1
Bunlar hareketli bir hedef gibi görünüyor. Şimdi jsbeautifier sitesindeki bilgiler python ile yazıldığını söylüyor.
Seth

cmdline kullanıcıları için güncelleme, aşağıdaki repo, güzel js yazdırmak için bağımsız komut satırı araçlarını yüklemesi kolay: github.com/einars/js-beautify.git
drhodes

Grunt kullanarak modern bir JS yaklaşımı kullanın: stackoverflow.com/questions/18985/…
Tchakabam

33

GÜNCELLEME Nisan 2014 :

Güzelleştirici, 2010 yılında bunu yanıtladığımdan beri yeniden yazıldı. Şimdi orada bir python modülü var, nodejs için bir npm Paketi var ve jar dosyası gitti. Lütfen github.com'daki proje sayfasını okuyun .

Python stili:

 $ pip install jsbeautifier

NPM tarzı:

 $ npm -g install js-beautify

kullanmak için:

 $ js-beautify file.js

Orijinal cevap

@Alan Storm Cevabına Ekleniyor

http://jsbeautifier.org/ tabanlı komut satırı güzelleştiricisinin kullanımı biraz daha kolay hale geldi, çünkü artık (alternatif olarak) rhino (java tabanlı JS motoru, paketlenmiş) yerine V8 javascript motoruna (c ++ kodu) dayanıyor. "js.jar" olarak). Böylece gergedan yerine V8 kullanabilirsiniz.

Nasıl kullanılır:

jsbeautifier.org zip dosyasını http://github.com/einars/js-beautify/zipball/master adresinden indirin

(bu, http://download.github.com/einars-js-beautify-10384df.zip gibi bir zip dosyasına bağlı bir indirme URL'sidir )

eski (artık çalışmıyor, jar dosyası gitti)

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

yeni (alternatif)

svn'den v8 lib yükleyin / derleyin, yukarıda belirtilen zip dosyasında v8 / README.txt dosyasına bakın

  ./jsbeautify somefile.js

Rhino sürümünden biraz farklı komut satırı seçeneklerine sahiptir,

-ve Eclipse'de "Harici Araç" olarak yapılandırıldığında harika çalışıyor


3
Eğer v8 üzerinde piton tercih ederseniz, orada da artık orada bir piton modülü.
00:15

1
Npm paketinin adı js-beautify
brafdlog

30

Nodejs kullanıyorsanız uglify- js'yi deneyin

Linux veya Mac'te, halihazırda nodej'lerin kurulu olduğunu varsayarsak, uglify'i şu şekilde kurabilirsiniz:

sudo npm install -g uglify-js

Ve sonra seçenekleri alın:

uglifyjs -h

Yani foo.jsşuna benzeyen bir kaynak dosyam varsa :

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

Bunu şöyle güzelleştirebilirim:

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

uglifygirinti için boşlukları varsayılan olarak kullanır, bu nedenle 4 boşluk girintisini sekmelere dönüştürmek istersem, unexpandUbuntu 12.04'ün geldiği aracılığıyla çalıştırabilirim :

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

Veya hepsini tek seferde yapabilirsiniz:

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

Unexpand hakkında daha fazla bilgiyi burada bulabilirsiniz

tüm bunlardan sonra şöyle görünen bir dosya buluyorum:

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

güncelleme 2016-06-07

Görünüşe göre uglify-js'nin geliştiricisi artık sürüm 2 üzerinde çalışıyor, ancak kurulum aynı.


4
Bu bir komut satırı JavaScript kodu güzelliği için doğru cevaptır.
bitek

uglifyjs -bgirintiyi düzeltmekten çok daha fazlasını yapar, kodu yeniden düzenler ve yeniden yazar, belki verimlilik için. İstediğim bu değil. Ubuntu 14.04'te eski bir sürümü kullanıyordum.
Sam Watkins

uglifyjs -bKodun nasıl yeniden düzenlendiğini ve yeniden yazıldığını biraz daha açıklar mısınız?
erapert

11

Ubuntu LTS'de

$ sudo apt install jsbeautifier
$ js-beautify ugly.js > beautiful.js

1
Şu an için en iyi cevap. js-beautify -o file.js file.js
Yerinde

3

Konsolda Artistic Style'ı (AStyle olarak da bilinir) --mode=java.
Harika çalışıyor ve ücretsiz, açık kaynaklı ve çapraz platform (Linux, Mac OS X, Windows).


2

Modern JavaScript yöntemini kullanın:

Kullanım Grunt ile birlikte Grunt için jsbeautifier eklentisi

Npm kullanarak her şeyi geliştirme ortamınıza kolayca yükleyebilirsiniz .

İhtiyacınız olan tek şey, dosya birleştirme, lint, çirkinleştirme, küçültme vb. De içeren uygun görevlerle bir Gruntfile.js kurmak ve grunt komutunu çalıştırmaktır.


2

Kabul edilen yanıta yorum ekleyemiyorum, bu yüzden ilk etapta var olmaması gereken bir gönderi görüyorsunuz.

Temel olarak, bir java kodunda bir javascript güzelleştiricisine de ihtiyacım vardı ve şaşırtıcı bir şekilde hiçbiri bulabildiğim kadarıyla mevcut değil. Ben de bir tanesini tamamen kabul edilen cevaba göre kodladım (jsbeautifier.org beautifier .js betiğini sarar ancak java veya komut satırından çağrılabilir).

Kod https://github.com/belgampaul/JsBeautifier adresinde bulunmaktadır.

Rhino ve beautifier.js kullandım

Konsoldan KULLANIM: java -jar jsbeautifier.jar komut dosyası girintisi

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

Java kodundan KULLANIM: public static String jsBeautify (String jsCode, int indentSize)

Kodu uzatabilirsiniz. Benim durumumda sadece girintiye ihtiyacım vardı, böylece oluşturulan javascript'i geliştirme sırasında kontrol edebildim.

Umarım projenizde size biraz zaman kazandırır.


1

JavaScript'te 5 dakikadan kısa sürede uygulanan bir komut satırı JavaScript güzelleştiricisinin nasıl oluşturulacağını açıklayan bir makale yazdım . YMMV.

  1. En son kararlı Rhino'yu indirin ve bir yere açın, örneğin ~ / dev / javascript / rhino
  2. Yukarıda bahsedilen jsbeautifier.org'dan referans alınan beautify.js dosyasını indirin, ardından bir yere kopyalayın, örneğin ~ / dev / javascript / bin / cli-beautifier.js
  3. Bunu beautify.js'nin sonuna ekleyin (JavaScript'e bazı ek üst düzey özellikler kullanarak):

    // Run the beautifier on the file passed as the first argument.
    print( j23s_beautify( readFile( arguments[0] )));
  4. Aşağıdaki kodu, yürütülebilir bir dosyaya kopyalayıp yapıştırın, örneğin ~ / 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. (isteğe bağlı) jsbeautifier.js içeren klasörü PATH'e ekleyin veya zaten orada bulunan bir klasöre taşıyın.


1

Komut satırı aracını sorduğunuzda, tüm js dosyalarınızı toplu olarak güzelleştirmek istediğinize inanıyorum.

Bu durumda Intellij IDEA (11.5 ile test edilmiştir) bunu yapabilir.

Proje dosyalarınızdan herhangi birini seçmeniz ve ana IDE menüsünde "Kod" -> "Kodu yeniden biçimlendir .." seçeneğini seçmeniz yeterlidir. Ardından iletişim kutusunda "dizindeki tüm dosyalar ..." öğesini seçin ve "enter" tuşuna basın. JVM için yeterince bellek ayırdığınızdan emin olun.


0

Birkaç tek astar seçeneğiniz var. Npm ile veya npx ile tek başına kullanın .

Semistandar

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

Standart

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

Daha güzel

npx prettier --single-quote --write --trailing-comma all "js/**/*.js"
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.