Làm cách nào để làm đẹp mã JavaScript bằng Dòng lệnh?


101

Tôi đang viết một tập lệnh hàng loạt để làm đẹp mã JavaScript. Nó cần hoạt động trên cả WindowsLinux .

Làm cách nào để làm đẹp mã JavaScript bằng các công cụ dòng lệnh?


Công cụ My Pretty Diff được viết hoàn toàn bằng JavaScript nên hoạt động tốt như nhau trên tất cả các hệ điều hành. Nó hỗ trợ làm đẹp và thu nhỏ JavaScript, CSS, bất kỳ ngôn ngữ đánh dấu nào sử dụng dấu phân cách kiểu XML, bao gồm cả HTML. khádiff.com/?m=beautify

Câu trả lời:


64

Đầu tiên, chọn Pretty Print / Beautifier dựa trên Javascript yêu thích của bạn. Tôi thích cái ởhttp://jsbeautifier.org/ , vì đó là thứ tôi tìm thấy đầu tiên. Tải xuống tệp của nó https://github.com/beautify-web/js-beautify/blob/master/js/lib/beautify.js

Thứ hai, tải xuống và cài đặt công cụ Javascript dựa trên Java của Mozilla, Rhino . "Cài đặt" là một chút sai lầm; Tải xuống tệp zip, giải nén mọi thứ, đặt js.jar vào đường dẫn Java của bạn (hoặc Thư viện / Java / Phần mở rộng trên OS X). Sau đó, bạn có thể chạy các tập lệnh với một lời gọi tương tự như thế này

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

Sử dụng Pretty Print / Beautifier từ bước 1 để viết một tập lệnh shell nhỏ sẽ đọc trong tệp javascript của bạn và chạy nó qua Pretty Print / Beautifier từ bước một. Ví dụ

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

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

Rhino cung cấp cho javascript một vài chức năng hữu ích bổ sung không nhất thiết phải có ý nghĩa trong ngữ cảnh trình duyệt, nhưng có thể thực hiện trong ngữ cảnh bảng điều khiển. Hàm print thực hiện những gì bạn mong đợi và in ra một chuỗi. Hàm readFile chấp nhận một chuỗi đường dẫn tệp làm đối số và trả về nội dung của tệp đó.

Bạn sẽ gọi ở trên một cái gì đó như

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

Bạn có thể kết hợp và kết hợp Java và Javascript trong các tập lệnh chạy Rhino của mình, vì vậy nếu bạn biết một chút Java thì cũng không quá khó để chạy nó với các luồng văn bản.


3
liên kết mà bạn đã đưa ra bị hỏng, nó phải được cái này tôi nghĩ rằng, jsbeautifier.org
Sinan

2
Tôi đã làm như thế nào:: ~ $ sudo apt-get install libv8-dev libv8-2.2.18: ~ $ cd einars-js-beauty-f90ce72 / v8: ~ $ g ++ -o jsbeautify jsbeautify.cpp -lv8 -Llib -lpthread Nó chỉ hoạt động. Cảm ơn Einar Lielmanis và tất cả mọi người tham gia!
Беров

1
Đây dường như là một mục tiêu di động. Bây giờ thông tin trên trang jsbeautifier cho biết nó được viết bằng python.
Seth

cập nhật cho người dùng cmdline, repo sau có dễ dàng để cài đặt đứng công cụ dòng lệnh riêng cho js in khá: github.com/einars/js-beautify.git
drhodes

Sử dụng phương pháp tiếp cận JS hiện đại bằng cách sử dụng Grunt: stackoverflow.com/questions/18985/…
Tchakabam

33

CẬP NHẬT tháng 4 năm 2014 :

Trình làm đẹp đã được viết lại kể từ khi tôi trả lời câu hỏi này vào năm 2010. Hiện tại có một mô-đun python trong đó, Gói npm cho nodejs và tệp jar đã biến mất. Vui lòng đọc trang dự án trên github.com .

Kiểu Python:

 $ pip install jsbeautifier

Phong cách NPM:

 $ npm -g install js-beautify

để dùng nó:

 $ js-beautify file.js

Câu trả lời ban đầu

Thêm vào câu trả lời của @Alan Storm

trình làm đẹp dòng lệnh dựa trên http://jsbeautifier.org/ đã trở nên dễ sử dụng hơn một chút, bởi vì nó hiện (cách khác) dựa trên công cụ javascript V8 (mã c ++) thay vì tê giác (công cụ JS dựa trên java, được đóng gói là "js.jar"). Vì vậy, bạn có thể sử dụng V8 thay vì tê giác.

Cách sử dụng:

tải xuống tệp zip jsbeautifier.org từ http://github.com/einars/js-beautify/zipball/master

(đây là URL tải xuống được liên kết với tệp zip như http://download.github.com/einars-js-beautify-10384df.zip )

cũ (không còn hoạt động, tệp jar đã biến mất)

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

mới (thay thế)

cài đặt / biên dịch v8 lib TỪ svn, xem v8 / README.txt trong tệp zip nói trên

  ./jsbeautify somefile.js

-có các tùy chọn dòng lệnh hơi khác so với phiên bản tê giác,

-và hoạt động tốt trong Eclipse khi được định cấu hình như một "Công cụ bên ngoài"


3
Hoặc nếu bạn thích python hơn v8, hiện tại cũng có một mô-đun python trong đó.
keturn

1
Các gói phần mềm được gọi là NPM js-làm đẹp
brafdlog

30

Nếu bạn đang sử dụng nodejs thì hãy thử uglify-js

Trên Linux hoặc Mac, giả sử bạn đã cài đặt nodejs, bạn có thể cài đặt uglify với:

sudo npm install -g uglify-js

Và sau đó nhận các tùy chọn:

uglifyjs -h

Vì vậy, nếu tôi có một tệp nguồn foo.jstrông giống như sau:

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

Tôi có thể làm đẹp nó như vậy:

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

uglifysử dụng dấu cách để thụt lề theo mặc định, vì vậy nếu tôi muốn chuyển đổi thụt lề 4 dấu cách thành các tab, tôi có thể chạy nó qua unexpandUbuntu 12.04 đi kèm:

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

Hoặc bạn có thể làm tất cả trong một lần:

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

Bạn có thể tìm hiểu thêm về unxpand tại đây

vì vậy sau tất cả những điều này, tôi kết thúc với một tệp trông giống như vậy:

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

cập nhật 2016-06-07

Có vẻ như người bảo trì uglify-js hiện đang làm việc trên phiên bản 2 mặc dù cài đặt vẫn như cũ.


4
Đây là câu trả lời chính xác cho trình làm đẹp mã JavaScript dòng lệnh.
cắnk

uglifyjs -bkhông chỉ sửa lỗi thụt lề, nó sắp xếp lại và viết lại mã, có lẽ để hiệu quả. Đó không phải là điều tôi muốn. Tôi đang sử dụng phiên bản cũ hơn, trong Ubuntu 14.04.
Sam Watkins

Bạn có thể vui lòng giải thích thêm một chút về cách uglifyjs -bsắp xếp lại và viết lại mã không?
erapert

11

Trên Ubuntu LTS

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

1
Câu trả lời tốt nhất ở thời điểm hiện tại. Để sử dụng làm đẹp tại chỗjs-beautify -o file.js file.js
Petr Javorik

3

Trong bảng điều khiển, bạn có thể sử dụng Phong cách nghệ thuật (hay còn gọi là AStyle) với --mode=java.
Nó hoạt động tuyệt vời và miễn phí, mã nguồn mở và đa nền tảng (Linux, Mac OS X, Windows).


2

Sử dụng cách JavaScript hiện đại:

Sử dụng Grunt kết hợp với plugin jsbeautifier cho Grunt

Bạn có thể dễ dàng cài đặt mọi thứ vào môi trường nhà phát triển của mình bằng npm .

Tất cả những gì bạn cần là thiết lập một Gruntfile.js với các tác vụ thích hợp, cũng có thể liên quan đến việc nối tệp, lint, uglify, minify, v.v. và chạy lệnh grunt.


2

Tôi không thể thêm nhận xét vào câu trả lời được chấp nhận, vì vậy đó là lý do tại sao bạn thấy một bài đăng đáng lẽ không tồn tại ngay từ đầu.

Về cơ bản, tôi cũng cần một trình làm đẹp javascript trong mã java và tôi ngạc nhiên là không có cái nào khả dụng theo như tôi có thể tìm thấy. Vì vậy, tôi đã tự mình viết mã một câu hoàn toàn dựa trên câu trả lời được chấp nhận (nó bao bọc tập lệnh .js jsbeautifier.org beauty nhưng có thể gọi được từ java hoặc dòng lệnh).

Mã được đặt tại https://github.com/belgampaul/JsBeautifier

Tôi đã sử dụng tê giác và beauty.js

USAGE từ bảng điều khiển: java -jar jsbeautifier.jar script thụt lề

ví dụ: java -jar jsbeautifier.jar "function ff () {return;}" 2

SỬ DỤNG từ mã java: public static String jsBeautify (String jsCode, int indentSize)

Bạn có thể mở rộng mã. Trong trường hợp của tôi, tôi chỉ cần thụt lề để có thể kiểm tra javascript được tạo trong khi phát triển.

Với hy vọng nó sẽ giúp bạn tiết kiệm thời gian trong dự án của mình.


1

Tôi đã viết một bài báo giải thích cách xây dựng trình làm đẹp JavaScript dòng lệnh được triển khai trong JavaScript trong vòng chưa đầy 5 phút. YMMV.

  1. Tải xuống Rhino ổn định mới nhất và giải nén nó ở đâu đó, ví dụ: ~ / dev / javascript /hino
  2. Tải xuống beauty.js được tham chiếu từ jsbeautifier.org đã nói ở trên, sau đó sao chép nó ở đâu đó, ví dụ ~ / dev / javascript / bin / cli-beauty.js
  3. Thêm cái này vào cuối beauty.js (sử dụng một số thuộc tính cấp cao nhất bổ sung cho JavaScript):

    // Run the beautifier on the file passed as the first argument.
    print( j23s_beautify( readFile( arguments[0] )));
  4. Sao chép-dán mã sau vào tệp thực thi, ví dụ: ~ / 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. (tùy chọn) Thêm thư mục có jsbeautifier.js vào PATH hoặc di chuyển đến một số thư mục đã có ở đó.


1

Tôi tin rằng khi bạn hỏi về công cụ dòng lệnh, bạn chỉ muốn làm đẹp hàng loạt các tệp js của mình.

Trong trường hợp này, Intellij IDEA (được thử nghiệm với 11.5) có thể thực hiện điều này.

Bạn chỉ cần chọn bất kỳ tệp dự án nào của mình và chọn "Mã" -> "Định dạng lại mã .." trong menu IDE chính. Sau đó trong hộp thoại chọn "all files in directory ..." và nhấn "enter". Chỉ cần đảm bảo rằng bạn dành đủ bộ nhớ cho JVM.


0

Bạn có một vài lựa chọn một lớp lót. Sử dụng với npm hoặc độc lập với npx .

Semistandar

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

Tiêu chuẩn

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

Đẹp hơn

npx prettier --single-quote --write --trailing-comma all "js/**/*.js"
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.