Как я могу украсить код JavaScript с помощью командной строки?

101

Я пишу пакетный скрипт, чтобы украсить код JavaScript. Он должен работать как в Windows, так и в Linux .

Как я могу украсить код JavaScript с помощью инструментов командной строки?

гром
источник
Инструмент My Pretty Diff полностью написан на JavaScript, поэтому он одинаково хорошо работает во всех операционных системах. Он поддерживает улучшение и минификацию JavaScript, CSS, любого языка разметки, использующего разделители стилей XML, включая HTML. prettydiff.com/?m=beautify

Ответы:

64

Во-первых, выберите свой любимый Pretty Print / Beautifier на основе Javascript. Я предпочитаю тот, что находится вhttp://jsbeautifier.org/ , потому что это то, что я нашел первым. Скачивает свой файл https://github.com/beautify-web/js-beautify/blob/master/js/lib/beautify.js

Во-вторых, загрузите и установите Rhino, основанный на 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 предоставляет javascript несколько дополнительных полезных функций, которые не обязательно имеют смысл в контексте браузера, но имеют смысл в контексте консоли. Функция print делает то, что вы ожидаете, и выводит строку. Функция readFile принимает строку пути к файлу в качестве аргумента и возвращает содержимое этого файла.

Вы бы вызывали приведенное выше что-то вроде

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

Вы можете смешивать и сопоставлять Java и Javascript в своих сценариях запуска Rhino, поэтому, если вы немного знаете Java, не должно быть слишком сложно запустить это с текстовыми потоками.

Алан Сторм
источник
3
ссылка, которую вы дали, не работает, я думаю, это должна быть эта, jsbeautifier.org
Синан
2
Как я это сделал:: ~ $ sudo apt-get install libv8-dev libv8-2.2.18: ~ $ cd einars-js-beautify-f90ce72 / v8: ~ $ g ++ -o jsbeautify jsbeautify.cpp -lv8 -Llib -lpthread Просто работает. Спасибо Эйнару Лиелманису и всем участникам!
Беров 06
1
Кажется, это движущаяся цель. Теперь информация на сайте jsbeautifier говорит, что он написан на python.
сет
update для пользователей cmdline, в следующем репозитории легко установить автономные инструменты командной строки для красивой печати js: github.com/einars/js-beautify.git
drhodes,
Используйте современный подход JS с использованием Grunt: stackoverflow.com/questions/18985/…
Tchakabam
33

ОБНОВЛЕНИЕ Апрель 2014 г . :

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/ стало немного проще в использовании, потому что теперь (альтернативно) он основан на движке javascript V8 (код C ++) вместо rhino (движок JS на основе java, упакованный как "js.jar"). Таким образом, вы можете использовать V8 вместо rhino.

Как пользоваться:

загрузите 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

-имеет немного другие параметры командной строки, чем версия rhino,

-и отлично работает в Eclipse, когда настроен как «Внешний инструмент»

knb
источник
3
Или, если вы предпочитаете python v8, теперь там также есть модуль python.
keturn
1
Пакет npm называется js-
beautify
30

Если вы используете 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 пробелами в вкладки, я могу запустить его, в unexpandкотором поставляется Ubuntu 12.04:

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

Или вы можете сделать все за один присест:

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

Вы можете узнать больше о неразвернутом здесь

так что после всего этого я получаю файл, который выглядит так:

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

обновление 2016-06-07

Похоже, что разработчик uglify-js сейчас работает над версией 2, хотя установка такая же.

эсперт
источник
4
Это правильный ответ для улучшения кода JavaScript из командной строки.
bitek
uglifyjs -bделает гораздо больше, чем просто исправляет отступы, он меняет порядок и переписывает код, возможно, для повышения эффективности. Я не этого хотел. Я использовал старую версию в Ubuntu 14.04.
Сэм Уоткинс,
Не могли бы вы подробнее объяснить, как uglifyjs -bпереставляет и переписывает код?
erapert
11

В Ubuntu LTS

$ sudo apt install jsbeautifier
$ js-beautify ugly.js > beautiful.js
Серж Строобандт
источник
1
Лучший ответ на данный момент. Для украшения на местеjs-beautify -o file.js file.js
Петр Яворик
3

В консоли вы можете использовать Artistic Style (он же AStyle) с --mode=java.
Он отлично работает, бесплатный, с открытым исходным кодом и кроссплатформенный (Linux, Mac OS X, Windows).

тмарик
источник
2

Используйте современный способ JavaScript:

Используйте Grunt в сочетании с плагином jsbeautifier для Grunt

Вы можете легко установить все в свою среду разработки с помощью npm .

Все, что вам нужно, это настроить Gruntfile.js с соответствующими задачами, которые также могут включать конкатенацию файлов, lint, uglify, minify и т. Д., А также запустить команду grunt.

Чакабам
источник
2

Я не могу добавить комментарий к принятому ответу, поэтому вы видите сообщение, которого вообще не должно было существовать.

По сути, мне также нужен был javascript beautifier в java-коде, и, к моему удивлению, ни один из них недоступен, насколько я мог найти. Поэтому я сам написал его полностью на основе принятого ответа (он является оболочкой для сценария jsbeautifier.org beautifier .js, но его можно вызвать из java или из командной строки).

Код находится по адресу https://github.com/belgampaul/JsBeautifier.

Я использовал rhino и beautifier.js

ИСПОЛЬЗОВАНИЕ с консоли: java -jar jsbeautifier.jar скрипт отступа

пример: java -jar jsbeautifier.jar "function ff () {return;}" 2

ИСПОЛЬЗОВАНИЕ из кода Java: общедоступная статическая строка jsBeautify (String jsCode, int indentSize)

Вы можете расширить код. В моем случае мне нужен был только отступ, чтобы я мог проверять сгенерированный javascript во время разработки.

Надеюсь, это сэкономит вам время в вашем проекте.

ioikka
источник
1

Я написал статью, в которой объясняется, как создать улучшитель 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 или переместитесь в уже существующую папку.

Шонзилла
источник
1

Я считаю, что когда вы спросили об инструменте командной строки, вы просто хотели украсить все свои js-файлы в пакетном режиме.

В этом случае это может сделать Intellij IDEA (протестировано с 11.5).

Вам просто нужно выбрать любой из файлов вашего проекта и выбрать «Код» -> «Переформатировать код ..» в главном меню IDE. Затем в диалоговом окне выберите «все файлы в каталоге ...» и нажмите «Enter». Просто убедитесь, что вы выделили достаточно памяти для JVM.

гамкинс
источник
0

У вас есть несколько вариантов одного лайнера. Используйте с npm или автономно с npx .

Семистандар

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

Стандарт

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

Красивее

npx prettier --single-quote --write --trailing-comma all "js/**/*.js"
Алекс Ноласко
источник