ฉันกำลังเขียนสคริปต์แบทช์เพื่อตกแต่งโค้ด JavaScript ให้สวยงาม จะต้องมีการทำงานได้ทั้งบนวินโดวส์และลินุกซ์

ฉันจะทำให้โค้ด JavaScript สวยงามโดยใช้เครื่องมือบรรทัดคำสั่งได้อย่างไร

ขั้นแรกเลือก Javascript ที่คุณชื่นชอบจาก Pretty Print / Beautifier ฉันชอบที่http://jsbeautifier.org/เพราะเป็นสิ่งที่ฉันพบก่อน ดาวน์โหลดไฟล์https://github.com/beautify-web/js-beautify/blob/master/js/lib/beautify.js

ประการที่สองการดาวน์โหลดและติดตั้ง Java ตามเครื่องยนต์ Javascript กลุ่มของ Mozilla, แรด "ติดตั้ง" ทำให้เข้าใจผิดเล็กน้อย ดาวน์โหลดไฟล์ zip แยกทุกอย่างวาง js.jar ในคลาสพา ธ Java ของคุณ (หรือ Library / Java / Extensions บน OS X) จากนั้นคุณสามารถเรียกใช้สคริปต์ด้วยการเรียกใช้ที่คล้ายกันนี้

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

ใช้ Pretty Print / Beautifier จากขั้นตอนที่ 1 เพื่อเขียนเชลล์สคริปต์ขนาดเล็กที่จะอ่านในไฟล์ javascript ของคุณและเรียกใช้ผ่าน Pretty Print / Beautifier จากขั้นตอนที่หนึ่ง ตัวอย่างเช่น

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

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

Rhino มอบฟังก์ชันที่มีประโยชน์พิเศษให้กับจาวาสคริปต์ซึ่งไม่จำเป็นต้องมีเหตุผลในบริบทของเบราว์เซอร์ แต่ทำในบริบทคอนโซล การพิมพ์ฟังก์ชันทำในสิ่งที่คุณคาดหวังและพิมพ์สตริงออกมา ฟังก์ชัน readFile ยอมรับสตริงพา ธ ไฟล์เป็นอาร์กิวเมนต์และส่งคืนเนื้อหาของไฟล์นั้น

คุณจะเรียกสิ่งที่กล่าวมาข้างต้นเช่น

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

คุณสามารถผสมและจับคู่ Java และ Javascript ในสคริปต์รัน Rhino ของคุณได้ดังนั้นหากคุณรู้จัก Java เพียงเล็กน้อยก็ไม่ควรยากเกินไปที่จะให้สิ่งนี้ทำงานกับสตรีมข้อความ

อัพเดทเมษายน 2557 :

Beautifier ถูกเขียนใหม่ตั้งแต่ฉันตอบคำถามนี้ในปี 2010 ตอนนี้มีโมดูล python อยู่ในนั้นแพ็คเกจ npm สำหรับ nodejs และไฟล์ jar ก็หายไป โปรดอ่านหน้าโครงการ github.com

สไตล์ Python:

 $ pip install jsbeautifier

สไตล์ NPM:

 $ npm -g install js-beautify

ที่จะใช้:

 $ js-beautify file.js

คำตอบเดิม

กำลังเพิ่มคำตอบของ @Alan Storm

ตัวตกแต่งบรรทัดคำสั่งที่ใช้http://jsbeautifier.org/ ใช้งาน ได้ง่ายขึ้นเล็กน้อยเนื่องจากตอนนี้ (หรือ) ใช้เครื่องยนต์จาวาสคริปต์ V8 (รหัส c ++) แทนแรด (เอ็นจิ้น JS ที่ใช้จาวาบรรจุ เป็น "js.jar") คุณสามารถใช้ V8 แทนแรดได้

วิธีใช้:

ดาวน์โหลดไฟล์ zip jsbeautifier.org จาก http://github.com/einars/js-beautify/zipball/master

(นี่คือ URL ดาวน์โหลดที่เชื่อมโยงกับไฟล์ zip เช่นhttp://download.github.com/einars-js-beautify-10384df.zip )

เก่า (ใช้งานไม่ได้อีกต่อไปไฟล์ jar หายไป)

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

ใหม่ (ทางเลือก)

ติดตั้ง / คอมไพล์ v8 lib จาก svn ดู v8 / README.txt ในไฟล์ zip ที่กล่าวถึงข้างต้น

  ./jsbeautify somefile.js

- มีตัวเลือกบรรทัดคำสั่งที่แตกต่างจากเวอร์ชันแรดเล็กน้อย

- และใช้งานได้ดีใน Eclipse เมื่อกำหนดค่าเป็น "เครื่องมือภายนอก"

หากคุณใช้ nodejs ให้ลอง uglify -js

บน Linux หรือ Mac สมมติว่าคุณติดตั้ง nodejs แล้วคุณสามารถติดตั้ง uglify ด้วย:

sudo npm install -g uglify-js

จากนั้นรับตัวเลือก:

uglifyjs -h

ดังนั้นถ้าฉันมีไฟล์ต้นฉบับfoo.jsที่มีลักษณะดังนี้:

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

ฉันสามารถทำให้มันสวยงามได้:

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

uglifyใช้ช่องว่างสำหรับการเยื้องโดยค่าเริ่มต้นดังนั้นหากฉันต้องการแปลง 4-space-indentation เป็นแท็บฉันสามารถเรียกใช้ผ่านunexpandUbuntu 12.04 ที่มาพร้อมกับ:

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

หรือคุณสามารถทำทั้งหมดได้ในครั้งเดียว:

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

คุณสามารถดูข้อมูลเพิ่มเติมเกี่ยวกับ unexpand ได้ที่นี่

ดังนั้นหลังจากนี้ฉันก็จบลงด้วยไฟล์ที่มีลักษณะดังนี้:

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

อัพเดท 2016-06-07

ดูเหมือนว่าผู้ดูแล uglify-js กำลังทำงานบนเวอร์ชัน 2แม้ว่าการติดตั้งจะเหมือนกัน

บน Ubuntu LTS

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

คำสั่งต่อไปนี้เพื่อความสวยงามในสถานที่:

$ js-beautify -r file.js
$ js-beautify --replace file.js

ในคอนโซลให้คุณสามารถใช้รูปแบบศิลปะ (aka Astyle) --mode=javaด้วย
ใช้งานได้ดีและฟรีโอเพ่นซอร์สและข้ามแพลตฟอร์ม (Linux, Mac OS X, Windows)

ใช้วิธี JavaScript ที่ทันสมัย:

ใช้Gruntร่วมกับปลั๊กอิน jsbeautifier สำหรับ Grunt

คุณสามารถติดตั้งทุกอย่างได้อย่างง่ายดายในสภาพแวดล้อม dev ของคุณโดยใช้NPM

สิ่งที่คุณต้องมีคือตั้งค่า Gruntfile.js ด้วยงานที่เหมาะสมซึ่งอาจเกี่ยวข้องกับการต่อไฟล์, lint, uglify, minify ฯลฯ และรันคำสั่ง grunt

ฉันไม่สามารถเพิ่มความคิดเห็นในคำตอบที่ยอมรับได้นั่นคือเหตุผลที่คุณเห็นโพสต์ที่ไม่ควรมีมาตั้งแต่แรก

โดยพื้นฐานแล้วฉันยังต้องการเครื่องตกแต่งจาวาสคริปต์ในรหัสจาวาและด้วยความประหลาดใจของฉันไม่มีให้บริการเท่าที่ฉันสามารถหาได้ ดังนั้นฉันจึงเขียนโค้ดด้วยตัวเองทั้งหมดตามคำตอบที่ยอมรับ (มันห่อสคริปต์ jsbeautifier.org beautifier .js แต่สามารถเรียกได้จาก java หรือบรรทัดคำสั่ง)

รหัสอยู่ที่https://github.com/belgampaul/JsBeautifier

ฉันใช้แรดและ beautifier.js

การใช้งานจากคอนโซล: java -jar jsbeautifier.jar การเยื้องสคริปต์

ตัวอย่าง: java -jar jsbeautifier.jar "function ff () {return;}" 2

การใช้งานจากรหัส java: สตริงแบบคงที่สาธารณะ jsBeautify (สตริง jsCode, int indentSize)

คุณสามารถขยายรหัสได้ ในกรณีของฉันฉันต้องการเพียงการเยื้องเพื่อที่ฉันจะได้ตรวจสอบจาวาสคริปต์ที่สร้างขึ้นในขณะที่พัฒนา

หวังว่าจะช่วยประหยัดเวลาในโครงการของคุณได้บ้าง

ฉันได้เขียนบทความอธิบายวิธีสร้างความสวยงามของ JavaScript แบบบรรทัดคำสั่งที่ใช้ใน JavaScriptภายในเวลาไม่ถึง 5 นาที YMMV.

1. ดาวน์โหลด Rhino ที่เสถียรล่าสุดและแกะออกจากที่ใดที่หนึ่งเช่น ~ / dev / javascript / rhino
2. ดาวน์โหลด beautify.js ซึ่งอ้างอิงจาก jsbeautifier.org ดังกล่าวข้างต้นแล้วคัดลอกไปที่ใดที่หนึ่งเช่น ~ / dev / javascript / bin / cli-beautifier.js

3. เพิ่มสิ่งนี้ในตอนท้ายของ beautify.js (โดยใช้คุณสมบัติระดับบนสุดเพิ่มเติมบางอย่างกับ JavaScript):

   // Run the beautifier on the file passed as the first argument.
   print( j23s_beautify( readFile( arguments[0] )));
   

4. คัดลอกและวางรหัสต่อไปนี้ในไฟล์ปฏิบัติการเช่น ~ / 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. (ไม่บังคับ) เพิ่มโฟลเดอร์ด้วย jsbeautifier.js ไปที่ PATH หรือย้ายไปยังโฟลเดอร์ที่มีอยู่แล้ว

ฉันเชื่อว่าเมื่อคุณถามเกี่ยวกับเครื่องมือบรรทัดคำสั่งคุณแค่ต้องการทำให้ไฟล์ js ทั้งหมดของคุณสวยงามเป็นชุด

ในกรณีนี้ Intellij IDEA (ทดสอบด้วย 11.5) สามารถทำได้

คุณเพียงแค่ต้องเลือกไฟล์โปรเจ็กต์ของคุณแล้วเลือก "Code" -> "ฟอร์แมตโค้ด .. " ในเมนู IDE หลัก จากนั้นในกล่องโต้ตอบให้เลือก "ไฟล์ทั้งหมดในไดเรกทอรี ... " และกด "Enter" ตรวจสอบให้แน่ใจว่าคุณมีหน่วยความจำเพียงพอสำหรับ JVM

คุณมีตัวเลือกซับสองสามตัว ใช้กับ NPM หรือเดี่ยวพร้อมnpx

เซมิสแตนดาร์

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

มาตรฐาน

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

สวยกว่า

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