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

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

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

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

austin cheney 22.08.2009 16:33
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
109
1
78 908
10
Перейти к ответу Данный вопрос помечен как решенный

Ответы 10

Ответ принят как подходящий

First, pick your favorite Javascript based Pretty Print/Beautifier. I prefer the one at http://jsbeautifier.org/, потому что это то, что я нашел первым. Скачивает свой файл https://github.com/beautify-web/js-beautify/blob/master/js/lib/beautify.js

Во-вторых, загрузите и установите механизм Javascript Носорог группы Mozilla на основе Java. «Установить» немного вводит в заблуждение; Загрузите 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 из шага 1. Например

//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, не должно быть слишком сложно запустить это с текстовыми потоками.

ссылка, которую вы дали, не работает, я думаю, это должна быть эта jsbeautifier.org

Sinan 12.01.2010 16:26

Как я это сделал:: ~ $ 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.03.2011 16:45

Кажется, это движущаяся цель. Теперь информация на сайте jsbeautifier гласит, что он написан на python.

seth 26.04.2011 07:57

update для пользователей cmdline, в следующем репозитории легко установить автономные инструменты командной строки для красивой печати js: github.com/einars/js-beautify.git

drhodes 29.08.2012 23:31

Используйте современный подход JS с использованием Grunt: stackoverflow.com/questions/18985/…

Tchakabam 15.09.2014 23:53

Вы можете легко запустить это без java из узла. Существует пакет npm под названием js-beautify. После его установки вы можете запустить команду js-beautify, передав нужные файлы в качестве параметра. Подробнее см .: npmjs.com/package/js-beautify

brafdlog 13.10.2015 23:28

Я, должно быть, делаю что-то не так. Я получаю js: неперехваченное исключение времени выполнения JavaScript: ReferenceError: "js_beautify" не определено. после выполнения команды java -jar js.jar beautify.js my-ugly-javascript.js. Я добавил print(js_beautify(readFile(arguments[0]))); в конец файла beautify.js и использую Rhino 1.7.7. Есть идеи?

mrswadge 25.01.2016 15:47

Я обнаружил, что ему не нравится обозначение (function() { ..blah.. }());, поэтому он никогда не выполнял этот код. Я закомментировал первый (function() { и последний }());, и он начал работать. Вот так :)

mrswadge 25.01.2016 16:25

Вам нужно будет обратиться к global.js_beautify. Я подумаю о внесении правки.

treat your mods well 16.01.2017 03:26

ОБНОВЛЕНИЕ апрель 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, когда настроен как «Внешний инструмент»

Или, если вы предпочитаете python v8, теперь там есть модуль Python также.

keturn 04.10.2011 04:15

Пакет npm называется js-beautify

brafdlog 13.10.2015 23:31

Я написал статью, в которой объясняется, как собрать улучшитель JavaScript для командной строки, реализованный на JavaScript менее чем за 5 минут. YMMV.

  1. Download the latest stable Rhino and unpack it somewhere, e.g. ~/dev/javascript/rhino
  2. Download beautify.js which is referenced from aforementioned jsbeautifier.org then copy it somewhere, e.g. ~/dev/javascript/bin/cli-beautifier.js
  3. Add this at the end of beautify.js (using some additional top-level properties to JavaScript):

    // Run the beautifier on the file passed as the first argument.
    print( j23s_beautify( readFile( arguments[0] )));
    
  4. Copy-paste the following code in an executable file, e.g. ~/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. (optional) Add the folder with jsbeautifier.js to PATH or moving to some folder already there.

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

В основном мне также нужен был 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 во время разработки.

В надежде, что это сэкономит вам время в вашем проекте.

Если вы используете 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.info("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.info("something something");
    return true;
}

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

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

Это ответ правильный для улучшения кода JavaScript в командной строке.

Alex Bitek 19.04.2016 12:05

uglifyjs -b делает гораздо больше, чем просто исправляет отступы, он меняет порядок и переписывает код, возможно, для повышения эффективности. Я не этого хотел. Я использовал старую версию в Ubuntu 14.04.

Sam Watkins 14.08.2017 06:28

Не могли бы вы подробнее объяснить, как uglifyjs -b перестраивает и переписывает код?

erapert 14.08.2017 21:06

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

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

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

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

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

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

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

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

В Ubuntu LTS

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

Для украшения места можно использовать любую из следующих команд:

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

Лучший ответ на данный момент. Для украшения на месте используйте js-beautify -o file.js file.js

Petr Javorik 04.11.2019 12:58

используйте -r, --replace Записать вывод на месте, заменив ввод js-beautify -r file.js

nkalra0123 07.10.2020 18:25

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

Семистандар

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

Стандарт

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

Красивее

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

Обратите внимание, что перечисленные команды перезаписывают исходные файлы. Сначала сделайте резервные копии или работайте в папке с контролируемой версией, чтобы при необходимости было легко вернуться назад.

Johan Bergens 19.11.2020 14:59

Другие вопросы по теме