Bagaimana cara mempercantik kode JavaScript menggunakan Command Line?

101

Saya menulis skrip batch untuk mempercantik kode JavaScript. Ini perlu bekerja pada Windows dan Linux .

Bagaimana cara mempercantik kode JavaScript menggunakan alat baris perintah?

grom
sumber
Alat Pretty Diff saya seluruhnya ditulis dalam JavaScript sehingga berfungsi dengan baik di semua sistem operasi. Ini mendukung kecantikan dan minifikasi JavaScript, CSS, bahasa markup apa pun yang menggunakan pembatas gaya XML, termasuk HTML. prettydiff.com/?m=beautify

Jawaban:

64

Pertama, pilih Pretty Print / Beautifier berbasis Javascript favorit Anda. Saya lebih suka yang dihttp://jsbeautifier.org/ , karena itulah yang saya temukan pertama kali. Unduh filenya https://github.com/beautify-web/js-beautify/blob/master/js/lib/beautify.js

Kedua, unduh dan instal mesin Javascript berbasis Java milik Grup Mozilla, Rhino . "Instal" agak menyesatkan; Unduh file zip, ekstrak semuanya, tempatkan js.jar di jalur kelas Java Anda (atau Library / Java / Extensions di OS X). Anda kemudian dapat menjalankan skrip dengan pemanggilan yang mirip dengan ini

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

Gunakan Pretty Print / Beautifier dari langkah 1 untuk menulis skrip shell kecil yang akan dibaca di file javascript Anda dan jalankan melalui Pretty Print / Beautifier dari langkah pertama. Sebagai contoh

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

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

Rhino memberikan beberapa fungsi tambahan yang berguna pada javascript yang tidak selalu masuk akal dalam konteks browser, tetapi dilakukan dalam konteks konsol. Fungsi print melakukan apa yang Anda harapkan, dan mencetak string. Fungsi readFile menerima string jalur file sebagai argumen dan mengembalikan konten file itu.

Anda akan meminta sesuatu seperti di atas

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

Anda dapat mencampur dan mencocokkan Java dan Javascript di skrip yang dijalankan Rhino, jadi jika Anda tahu sedikit tentang Java, seharusnya tidak terlalu sulit untuk menjalankannya dengan aliran teks juga.

Alan Storm
sumber
3
tautan yang Anda berikan rusak, seharusnya yang ini saya pikir, jsbeautifier.org
Sinan
2
Bagaimana saya melakukannya:: ~ $ sudo apt-get install libv8-dev libv8-2.2.18: ~ $ cd einars-js-beautify-f90ce72 / v8: ~ $ g ++ -o jsbeautify jsbeautify.cpp -lv8 -Llib -lpthread Ini berhasil. Terima kasih kepada Einar Lielmanis dan semua orang yang terlibat!
Беров
1
Ini sepertinya menjadi target yang bergerak. Sekarang info di situs jsbeautifier mengatakan itu ditulis dengan python.
seth
perbarui untuk pengguna cmdline, repo berikut memiliki mudah untuk menginstal alat baris perintah yang berdiri sendiri untuk pencetakan cantik js: github.com/einars/js-beautify.git
drhodes
Gunakan pendekatan JS modern menggunakan Grunt: stackoverflow.com/questions/18985/…
Tchakabam
33

UPDATE April 2014 :

Beautifier telah ditulis ulang sejak saya menjawab ini pada tahun 2010. Sekarang ada modul python di sana, Paket npm untuk nodejs, dan file jar hilang. Silakan baca halaman proyek di github.com .

Gaya Python:

 $ pip install jsbeautifier

Gaya NPM:

 $ npm -g install js-beautify

untuk menggunakannya:

 $ js-beautify file.js

Jawaban asli

Menambah Answer dari @Alan Storm

beautifier baris perintah berdasarkan http://jsbeautifier.org/ telah menjadi sedikit lebih mudah digunakan, karena sekarang (alternatif) didasarkan pada mesin javascript V8 (kode c ++) bukan rhino (mesin JS berbasis java, dikemas sebagai "js.jar"). Jadi Anda bisa menggunakan V8 sebagai pengganti badak.

Cara Penggunaan:

unduh file zip jsbeautifier.org dari http://github.com/einars/js-beautify/zipball/master

(ini adalah URL unduhan yang ditautkan ke file zip seperti http://download.github.com/einars-js-beautify-10384df.zip )

lama (tidak lagi berfungsi, file jar hilang)

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

baru (alternatif)

instal / kompilasi v8 lib DARI svn, lihat v8 / README.txt di file zip yang disebutkan di atas

  ./jsbeautify somefile.js

-memiliki opsi baris perintah yang sedikit berbeda dari versi badak,

-dan berfungsi dengan baik di Eclipse jika dikonfigurasi sebagai "Alat Eksternal"

knb
sumber
3
Atau jika Anda lebih suka python daripada v8, ada juga modul python di sana sekarang.
keturn
1
Paket npm disebut js-beautify
brafdlog
30

Jika Anda menggunakan nodejs, coba uglify-js

Di Linux atau Mac, dengan asumsi Anda sudah menginstal nodejs, Anda dapat menginstal uglify dengan:

sudo npm install -g uglify-js

Dan kemudian dapatkan opsi:

uglifyjs -h

Jadi jika saya memiliki file sumber foo.jsyang terlihat seperti ini:

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

Saya bisa mempercantiknya seperti ini:

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

uglifymenggunakan spasi untuk lekukan secara default jadi jika saya ingin mengubah lekukan 4-spasi ke tab, saya dapat menjalankannya melalui unexpandUbuntu 12.04 yang dilengkapi dengan:

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

Atau Anda dapat melakukan semuanya sekaligus:

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

Anda dapat mengetahui lebih lanjut tentang unexpand di sini

jadi setelah semua ini saya berakhir dengan file yang terlihat seperti ini:

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

perbarui 2016-06-07

Tampaknya pengelola uglify-js sekarang bekerja pada versi 2 meskipun pemasangannya sama.

erapert
sumber
4
Ini adalah jawaban yang benar untuk beautifer kode JavaScript baris perintah.
bitek
uglifyjs -bmelakukan lebih dari sekadar memperbaiki lekukan, ia mengatur ulang dan menulis ulang kode, mungkin untuk efisiensi. Bukan itu yang saya inginkan. Saya menggunakan versi yang lebih lama, di Ubuntu 14.04.
Sam Watkins
Bisakah Anda menjelaskan sedikit lebih banyak bagaimana uglifyjs -bmengatur ulang dan menulis ulang kode?
erapert
11

Di Ubuntu LTS

$ sudo apt install jsbeautifier
$ js-beautify ugly.js > beautiful.js
Serge Stroobandt
sumber
1
Jawaban terbaik saat ini. Untuk penggunaan mempercantik di tempatjs-beautify -o file.js file.js
Petr Javorik
3

Di konsol, Anda dapat menggunakan Artistic Style (alias AStyle) dengan --mode=java.
Ini berfungsi dengan baik dan gratis, open-source dan lintas platform (Linux, Mac OS X, Windows).

tmaric
sumber
2

Gunakan cara JavaScript modern:

Gunakan Grunt dalam kombinasi dengan plugin jsbeautifier untuk Grunt

Anda dapat menginstal semuanya dengan mudah ke dalam lingkungan dev Anda menggunakan npm .

Yang Anda perlukan hanyalah menyiapkan Gruntfile.js dengan tugas yang sesuai, yang juga dapat melibatkan penggabungan file, lint, uglify, minify dll, dan menjalankan perintah grunt.

Tchakabam
sumber
2

Saya tidak dapat menambahkan komentar ke jawaban yang diterima jadi itu sebabnya Anda melihat postingan yang seharusnya tidak ada.

Pada dasarnya saya juga membutuhkan beautifier javascript dalam kode java dan yang mengejutkan saya tidak ada yang tersedia sejauh yang saya bisa temukan. Jadi saya mengkodekannya sendiri sepenuhnya berdasarkan jawaban yang diterima (ini membungkus skrip jsbeautifier.org beautifier .js tetapi dapat dipanggil dari java atau baris perintah).

Kode tersebut terletak di https://github.com/belgampaul/JsBeautifier

Saya menggunakan rhino dan beautifier.js

PENGGUNAAN dari konsol: indentasi skrip java -jar jsbeautifier.jar

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

PENGGUNAAN dari kode java: public static String jsBeautify (String jsCode, int indentSize)

Anda dipersilakan untuk memperpanjang kode. Dalam kasus saya, saya hanya membutuhkan lekukan sehingga saya dapat memeriksa javascript yang dihasilkan saat mengembangkan.

Dengan harapan ini akan menghemat waktu Anda dalam proyek Anda.

ioikka
sumber
1

Saya telah menulis artikel yang menjelaskan cara membuat beautifier JavaScript baris perintah yang diimplementasikan dalam JavaScript dalam waktu kurang dari 5 menit. YMMV.

  1. Unduh Rhino stable terbaru dan ekstrak di suatu tempat, misalnya ~ / dev / javascript / rhino
  2. Unduh beautify.js yang direferensikan dari jsbeautifier.org tersebut lalu salin di suatu tempat, misal ~ / dev / javascript / bin / cli-beautifier.js
  3. Tambahkan ini di akhir beautify.js (menggunakan beberapa properti tingkat atas tambahan ke JavaScript):

    // Run the beautifier on the file passed as the first argument.
    print( j23s_beautify( readFile( arguments[0] )));
  4. Salin-tempel kode berikut dalam file yang dapat dijalankan, misalnya ~ / 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. (opsional) Tambahkan folder dengan jsbeautifier.js ke PATH atau pindah ke beberapa folder yang sudah ada.

Shonzilla
sumber
1

Saya yakin ketika Anda bertanya tentang alat baris perintah, Anda hanya ingin mempercantik semua file js Anda secara batch.

Dalam hal ini Intellij IDEA (diuji dengan 11.5) dapat melakukannya.

Anda hanya perlu memilih salah satu file proyek Anda dan memilih "Code" -> "Reformat code .." di menu IDE utama. Kemudian di dialog pilih "semua file di direktori ..." dan tekan "enter". Pastikan Anda mendedikasikan cukup memori untuk JVM.

permen karet
sumber
0

Anda memiliki beberapa pilihan satu liner. Gunakan dengan npm atau standalone dengan npx .

Semistandar

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

Standar

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

Lebih cantik

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