Js-beautify: Возможность сохранить или встроить «короткие объекты» в одну строку.

Созданный на 14 авг. 2013  ·  109Комментарии  ·  Источник: beautify-web/js-beautify

Обычно JS Beautifier расширяет все объявления объектов JS в несколько строк, каждая строка имеет пару ключ-значение. Однако во многих ситуациях это слишком многословно (например, короткие объекты, которые легко помещаются в одну строку).

Дополнительные сведения можно найти здесь: https://github.com/einars/js-beautify/pull/55 .

enhancement

Самый полезный комментарий

Для таких людей, как я, которые приходят сюда в поисках способа заставить это работать: это работает, и его можно включить с помощью параметров в .jsbeautifyrc.

   "brace_style": "collapse-preserve-inline"

Все 109 Комментарий

+1 ... хотя бы один объект свойства может оставаться на одной строке, поэтому c1[key] = { $exists: true }; не изменится на

                c1[key] = {
                    $exists: true
                };

+1

Популярный запрос. :улыбка:

Старый запрос на извлечение для этого был сделан до того, как у нас появился перенос строк. Наличие переноса строки должно облегчить задачу.

Мы определяем, когда находимся внутри объявления объекта, так что это неплохо, но мы обнаруживаем это поздно (см. #200), поэтому может потребоваться отслеживание назад для исправления расширенного объекта.

Я только за, но у меня есть вопрос. Что если литерал объекта имеет ровно одно свойство, которое само по себе является литералом объекта ровно с одним свойством? Это можно было повторить несколько раз. В приведенном ниже примере я бы предпочел, чтобы код был отформатирован в одну строку. Другие могут не согласиться, но я думаю, что это важный аспект, который следует учитывать.

Это может быть доведено до крайности, когда код должен быть обернут из-за длины строки, но в моем коде есть случаи, когда:

//I prefer this...
{ foo : { bar : { baz : 42 } } }

//... over this.
{
    foo : {
        bar : {
            baz : 42
        }
    }
}

@TheLudd Я полностью согласен и сам собирался предложить это. Возможно и глубинный вариант. Существует предел того, насколько читаемым это будет после нескольких уровней глубины. Я бы сказал, что у вас там будет макс по умолчанию.

@mokkabonna Хорошая идея насчет опции глубины. Это устраняет некоторую двусмысленность в отношении того, как должен быть отформатирован такой код. Если это выполнимо...

Если не по глубине, возможно, ограничьте ее длиной... скажем, она переносится после 80 символов. Не так элегантно, как глубина, но все, что можно сделать быстро.

+1

Я предпочитаю идею длины. Если все это может поместиться в ширину окна, пусть так и будет.

Мощная поддержка для этого. Добавлено в версии 1.5.0.

: хлопать :: хлопать :: хлопать :: хлопать:

Будет ли он также сохранять однострочные операторы, подобные этому?

if(someCondition) { return something; }

Это как решение спецификации/реализации. Это кажется возможным, но, возможно, не стоит объединять их вместе.

Согласованный. Не знаете, как вы хотите это отслеживать, может быть, другая проблема «Сохранять короткие выражения/операторы в одной строке»?

Конечно, и обратите внимание, что это связано с этой проблемой.

К вашему сведению, это в основном другая версия # 114. Один из старейших открытых вопросов.

Есть новости по этому поводу? js-beautify — один из лучших форматировщиков, за исключением этой оставшейся проблемы.

Я думаю, что это единственная причина, по которой я не запускаю js beautifier при сохранении.

+1

Как бы я ни хотел сделать это в 1.5.0, мне придется перенести это на 1.5.2.

В 1.5.0 уже внесено большое количество изменений, и это важная функция, которая потребует некоторых итераций и обратной связи, чтобы получить чистую посадку.

Это, безусловно, самое приоритетное улучшение для версии 1.5.2.

:+1: Я вижу, 1.5.1 вчера выпустили. Это вошло? Если да, то какой вариант?

Обновил свой комментарий выше.

Хорошо спасибо. Тогда поищу в следующем релизе.

:+1:

+1

Эй, я только что узнал о jsbeautify и настроил его с помощью Sublime Text 3. Это круто!! И я тоже столкнулся с этим, поискал в сети и нашел это обсуждение. Рад слышать, что это будет в версии 1.5.2.

Прошло уже почти 5 месяцев с момента последнего комментария по поводу 1.5.2... какое ожидаемое время прибытия? Хотелось бы, чтобы var obj = { one: property } оставался на одной строке :) :)

ETA — это когда кто-то это делает. Это, вероятно, буду я, где-то в следующем месяце.

Потрясающий!!! здорово знать

17 сентября 2014 г., в 23:49, Лиам Ньюман ( [email protected] ) написал:

ETA — это когда кто-то это делает. Это, вероятно, буду я, где-то в следующем месяце.


Ответьте на это письмо напрямую или просмотрите его на GitHub.

Я собираюсь довести это до версии 1.6.0.

Я проделал значительную работу (как указано в № 530) для включения этой функции. но, честно говоря, это все еще слишком большая задача, чтобы сделать это в этом выпуске.

Ух ты...

Просто прочитайте некоторые из спецификаций сценариев ECMA и откройте ошибки в своем github, это
кажется огромным!

К счастью, в моем случае мне обычно нужно украсить мой JS только один раз для каждого файла.

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

Если я когда-нибудь это сделаю, по какой-то причине, это всего лишь несколько дополнительных секунд, чтобы вручную
восстановить разбитые однострочные операторы if или литералы объектов обратно в одну строку. (нет я
у них нет регулярного выражения find + replace для них, лол)

В воскресенье, 28 сентября 2014 г., Лиам Ньюман с уведомлением на адрес github.com написал:

Я собираюсь довести это до версии 1.6.0.

Я проделал значительную работу (как указано в #530
https://github.com/beautify-web/js-beautify/pull/530) для включения
эта особенность. но, откровенно говоря, это все еще слишком большое предприятие, чтобы превратить его в
этот релиз.


Ответьте на это письмо напрямую или просмотрите его на GitHub
https://github.com/beautify-web/js-beautify/issues/315#issuecomment -57132532
.

:+1: Я очень взволнован этой функцией :)

+1 Хотелось бы, чтобы это было доступно!

+1 - Это нужно, чтобы мы могли украсить сохранение везде

+1

:+1:

+1 - тоже не использую с предсохранением из-за этого

:+1:

Кроме того, Escodegen делает это правильно, его код может быть источником вдохновения:

var esprima = require("esprima"),
    esgen = require("escodegen").generate;

console.log(esgen(esprima.parse("var a = {code: 'code'}")));
console.log(esgen(esprima.parse("var a = {code: 'code', more: 'code'}")));

@bitwiseman
Эта проблема не может быть решена для произвольного количества вложенности (например, действительно большого количества вложенности), поскольку язык, соответствующий этой вложенности, не является регулярным, но, возможно, вы можете принять ограничение для практических целей (например, максимум 10-го уровня вложенности или использование размера файла для определения разумного предела вложенности)

+1 за этот запрос.

Это слишком многословно, чтобы разделить, например, это

view.on('post', {action: 'removeTask'}, function(next) {

на несколько строк.

+1

Есть ли новое расчетное время прибытия?

:+1:

Нам это нужно!!

:+1:

:+1:

:+1:

+1

Хотя эта функция не реализована, я использую регулярное выражение в своем собственном сценарии запуска где- то здесь, например, pretty = pretty.replace(/{([^{}]*?)}/g, function(s, p) { return (s.length < 100 && !/;/.test(p)) ? s.replace(/\n\s*/g, ' ') : s })
Может кому пригодится.

@aves84 не может заставить его работать.. Но вы заставили меня взглянуть на исходный код вместо того, чтобы просто ждать, так что большое вам спасибо :D

@schoening , возможно, я путаю написал, строку нужно добавить после «украсить», а не вместо. Теперь я попытался изменить этот конкретный скрипт:

var pretty = beautify[fileType](code, config);
if (fileType == 'js') pretty = pretty.replace(/{([^{}]*?)}/g, function(s, p) {
            return (s.length < 100 && !/;/.test(p)) ? s.replace(/\n\s*/g, ' ') : s
        });

И работает исправно.

@aves84 , нет, я понял, это имело смысл. Я на Linux Mint и просматриваю эту папку/изменяю этот файл:
/home/username/.config/sublime-text-3/Packages/HTML-CSS-JS Prettify/scripts/node_modules/js-beautify/js/lib/cli.js

Изменение этой функции:

function makePretty( code, config, outfile, callback ) {
  try {
    var fileType = getOutputType( outfile, config.type );
    var pretty = beautify[ fileType ]( code, config );
    if ( fileType == 'js' ) pretty = pretty.replace( /{([^{}]*?)}/g, function ( s, p ) {
      return ( s.length < 100 && !/;/.test( p ) ) ? s.replace( /\n\s*/g, ' ' ) : s
    } );

    callback( null, pretty, outfile, config );
  } catch ( ex ) {
    callback( ex );
  }

}

И затем, когда я пытаюсь сделать что-то подобное, объект все еще разделяется:

var foo = {
  bar: "Hello world!"
};

Извини за все вопросы, приятель.

@schoening, скорее всего, расширение не использует cli.js и заменяет его собственным файлом с require('js-beautify') . В Brackets я внес изменения в ~/.config/Brackets/extensions/user/hirse.beautify/main.js
Или вы можете попробовать отредактировать, например, https://github.com/beautify-web/js-beautify/blob/master/js/lib/beautify.js#L369 .

Я думаю, что возвышенное использует версию Python.

@mokkabonna - это зависит. Некоторые возвышенные плагины оборачивают вызовы node.js, другие напрямую используют python.

:+1: плюсодинплюсодин

+1. Есть ли сейчас такой вариант?

:+1: жду с нетерпением, спасибо.

:+1:

@FrankFang Он был перенесен на версию 1.6.0, которая еще не вышла.
@aves84 Ваш трюк иногда ломает/сворачивает функции/операторы for-of-loops/if

for (var data of columnData) { ctx.drawImage(data.img, data.options.x, data.options.y) }

img.onerror = function() { reject() }

if (index >= rows.length) { return }

@dani-h Ну, этот метод далек от идеала, он опирается на точку с запятой в определении коротких объектов и блоков кода: если точек с запятой нет и количество символов меньше 100, переносы строк удаляются. Это даже вызовет ошибки в коде, который использует автоматическую вставку точки с запятой в javascript.

:+1:

:+1: С нетерпением жду этого.

+1 ... я бы хотел, чтобы это скоро появилось.

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

+1

+1

+1 к этому, запрещает мне использовать это. Даже возможность просто отключить это поможет!

+1 +1 +1

+1

+1 и спасибо за всю вашу тяжелую работу над этим!

+1 Прямо сейчас, из-за этой проблемы, украшение буквально удваивает мой код, превращая его в ужасный уродливый беспорядок. В некоторых обстоятельствах это довольно опасная ошибка. Тем более, что я использую js-beautify как псевдо-линтер (если отступы неправильные, я где-то пропустил скобку.) Моя мышечная память превращает мои прекрасные юнит-тесты в 10-минутную задачу по исправлению всех литералов моих объектов.

js-beautify -pX <filename> | perl -0777 -i -pe 's/\{\s*([^{}]{30,180}?)\s*\}/\{ $1 \}/mg'

эта строка кода свернет развернутые элементы длиной от 30 до 180 символов без встроенных блоков. возможно, это может быть полезно для некоторых людей.

+1 и спасибо за всю вашу тяжелую работу над этим!

+1. Три строчки вместо одной - это слишком.

Я надеюсь, что это можно сделать. :+1:

Это единственное поведение js-beautify, которое вызывает у меня недовольство. :пот_улыбка:

@vekat - Как видите, вы не одиноки. :улыбка:

@nels-o - совсем другое, извините. Фигурные скобки шаблона, такие как {{ и }} , обрабатываются совершенно иначе, чем фигурные скобки javascript. Кроме того, при встраивании объектов они будут выглядеть как { a: { b: {} } } } .

(Биты шаблона WRT, такие как {{}} и {{!}} ) Это так? Если они находятся в тегах script, они кажутся отформатированными. Например это:

image

становится таким после запуска prettifier.

image

Ах :) Спасибо @bitwiseman

Возможно, я должен был сказать, что _если_ с ними нужно было обращаться, они _будут_ обрабатываться совершенно отдельно. :smile: Тем не менее, извините.

+1. Есть идеи о расчетном времени прибытия? Меня это очень огорчает :(

+1. Тоже хотел бы эту функцию! К сожалению, у меня нет времени, чтобы как-то помочь :(

+1, мы все еще терпеливо ждем. Это будет отличным дополнением

Сделанное мной изменение на самом деле не понимает «короткие» объекты — оно просто пытается сохранить объекты, которые предоставляет ввод, в которых нет новых строк. Как только происходит перенос строк, объект переворачивается в форматирование «свернуть». Итак, это все еще несовершенное решение, но улучшение.

Если это работает, как я понял, я думаю, что это уже огромное улучшение текущей ситуации. В большинстве случаев этого достаточно.

+1

+1 надеюсь это скоро будет сделано

@NerdPad - дело сделано.

Можем ли мы использовать его со скобками? о_О

@ C-Weinstein - Может быть, вы могли бы открыть новую проблему с примером ввода и желаемого результата?

Для таких людей, как я, которые приходят сюда в поисках способа заставить это работать: это работает, и его можно включить с помощью параметров в .jsbeautifyrc.

   "brace_style": "collapse-preserve-inline"

К сожалению, это не сработало :( Но спасибо за попытку.

@Ceyaje - Как не сработало? Где не получилось? Каковы были ваши входы и выходы?

Вход был

var q = { x: "a", b: "c" }

Он «украшает»

var q = {
    x: "a",
    b: "c"
}

@Ceyaje , вам нужно установить для параметра «brace-style» значение «collapse-preserve-inline».

@aves84 - спасибо! Продолжение обсуждения в #995.

@aves84 Я так и сделал. Я говорил, что это все еще происходит, поэтому я открыл # 995, но я использую скобки и не знал, что это другой код.

@Kutsan - Пожалуйста, откройте новую проблему.

Я не смог найти опцию расширения-сохранения-встроенного файла с html-файлом в атоме. Я пишу javascript как в файле html, так и в файле js.

Поместите «preserve-inline» после настройки, которую вы хотите использовать (свернуть, развернуть и т. д.).

"brace_style": "свернуть, сохранить встроенный"

https://i.gyazo.com/2831254cc47d08c879c7d36a7f1a30d0.png

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

Есть новости по этому поводу? roll-preserve-inline по-прежнему расширяет функцию стрелки на несколько строк.

@grandslammer - Пожалуйста, взгляните на открытые проблемы, в которых есть слово «стрелка». Если вы не видите вопрос, который охватывает то, о чем вы говорите, пожалуйста, откройте новый вопрос.

Извините: исходная тема: «Возможность сохранить или встроить «короткие объекты» в одну строку # 315?
это обсуждение разошлось по многим направлениям, может ли кто-нибудь указать правильные настройки для последней версии js-beautify для достижения запрошенного форматирования? спасибо

@ainthek это "brace_style": "collapse,preserve-inline"

Как насчет настроек в последней версии vs code, чтобы решить эту проблему?

В коде vs 1.20.1 я не могу заставить работать стиль "brace_style": "expand,preserve-inline".

Вход :

константа
 {
 диалог
 } = требуют("электрон").remote;

Вывод (после выбора этой области и нажатия F1 ---> Украсить выделение): БЕЗ ИЗМЕНЕНИЙ :(

Ожидаемый результат: const {dialog} = require("electron").remote;

PS ----> искаженный ввод был получен после Beautification всего файла. Никто не пишет код таким искаженным образом :P

Для vscode у меня сработало добавление ниже в пользовательских настройках:
"beautify.config": { "brace_style": "свернуть, сохранить встроенный" }

Спасибо за поддержку, ребята.

@sulkhanp - Пожалуйста, сообщите о проблеме с описанием поведения.

Решение @vipingoel работает!
Почему эта опция работает только в пользовательских настройках vscode, а не в моем файле .jsbeautifyrc ?

"brace_style": "expand,preserve-inline" не работает.

ожидаемое поведение:

  let $w = $(window),  w = $w.width(),  h = $w.height();
  constructor()
  {
    this.setupData(); this.setupMenus(); this.setupUser(); this.setupUI();
  }

текущее поведение:

    let $w = $(window),
      w = $w.width(),
      h = $w.height();

  constructor()
  {
    this.setupData();
    this.setupMenus();
    this.setupUser();
    this.setupUI();
  }

@SiJinmin это не короткие объекты и поэтому не имеют отношения к этой проблеме.

@vipingoel Это работает. Я действительно счастлив. Спасибо!!!

Была ли эта страница полезной?
0 / 5 - 0 рейтинги