Js-beautify: Opção para preservar ou "objetos curtos" embutidos em uma única linha

+1 ... pelo menos um objeto de propriedade poderia permanecer em uma única linha, então c1[key] = { $exists: true }; não mudaria para

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

+1

Pedido popular. :sorriso:

O antigo pull request para isso foi feito antes de termos a quebra de linha. Ter o envoltório de linha deve facilitar.

Nós detectamos quando estamos dentro de uma declaração de objeto, então isso não é ruim, mas detectamos tarde (veja #200), então pode envolver algum rastreamento para corrigir um objeto expandido.

Eu sou a favor disso, mas tenho uma pergunta. E se um literal de objeto tiver exatamente uma propriedade que em si é um literal de objeto com exatamente uma propriedade? Isso pode ser repetido várias vezes. No exemplo que tenho abaixo, eu preferiria que o código fosse formatado em uma linha. Outros podem discordar, mas acho que é um aspecto importante a considerar nisso.

Isso pode ser levado a extremos em que o código deve ser quebrado devido ao comprimento da linha, mas tenho casos no meu código em que:

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

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

@TheLudd Eu concordo totalmente e ia sugerir isso eu mesmo. Possivelmente uma opção de profundidade também. Há um limite de legibilidade após alguns níveis de profundidade. Eu diria que o que você tem lá seria o padrão máximo.

@mokkabonna Boa ideia sobre a opção de profundidade. Isso elimina alguma ambiguidade de como um código como esse deve ser formatado. Se for factível...

Se não for a profundidade, talvez limite-o por comprimento... digamos que ele termina depois de 80 caracteres. Não tão elegante quanto a profundidade, mas o que pode ser feito rapidamente.

+1

Prefiro a ideia de comprimento. Se caber tudo na largura da janela, deixe.

Forte apoio para isso. Adicionado à v1.5.0.

: palmas :: palmas :: palmas :: palmas:

Também vai preservar declarações de linha única como esta?

if(someCondition) { return something; }

Isso é como decisão de especificação/implementação. Parece possível, mas pode não ser uma boa ideia juntá-los.

Acordado. Não tenho certeza de como você deseja rastreá-lo, talvez outro problema "Preservar expressões/instruções curtas em uma única linha"?

Claro, e observe que está relacionado a esse problema.

Feito. https://github.com/einars/js-beautify/issues/338

Para sua informação, esta é basicamente outra versão #114. Uma das questões em aberto mais antigas.

Alguma atualização sobre isso? js-beautify é um dos melhores formatadores disponíveis, exceto por esse problema restante.

Acho que essa é a única razão pela qual não estou executando o js beautifier no save.

+1

Por mais que eu queira fazer isso em 1.5.0, vou ter que colocá-lo em 1.5.2.

Já existe um grande número de mudanças na versão 1.5.0, e esse é um recurso significativo que exigirá algumas iterações e feedback para chegar de forma limpa.

É certamente o aprimoramento de maior prioridade para 1.5.2.

:+1: Vejo que 1.5.1 foi lançado ontem. Isso entrou? Se sim, qual é a opção?

Atualizei meu comentário acima.

Ok obrigado. Vou procurá-lo na próxima versão então.

:+1:

+1

Ei, acabei de descobrir sobre o jsbeautify e configurei com o Sublime Text 3. É demais!! E eu também me deparei com isso e pesquisei na web e encontrei essa discussão. Fico feliz em saber que está chegando em 1.5.2.

Já se passaram quase 5 meses desde o último comentário sobre 1.5.2 ... qual é o ETA? Adoraria ter var obj = { one: property } ficar em uma linha :) :)

ETA é quando alguém faz isso. Provavelmente serei eu, em algum momento do próximo mês.

Impressionante!!! Ótimo saber

Em 17 de setembro de 2014, às 23h49, Liam Newman [email protected] escreveu:

ETA é quando alguém faz isso. Provavelmente serei eu, em algum momento do próximo mês.

—
Responda a este e-mail diretamente ou visualize-o no GitHub.

Eu vou ter que empurrar isso para v1.6.0.

Eu fiz um trabalho significativo (como observado em #530) para habilitar esse recurso. mas, francamente, ainda é um grande empreendimento fazer isso neste lançamento.

Uau...

Apenas lendo algumas das especificações do script ECMA e abrindo bugs no seu github isso
parece enorme!

Felizmente, no meu caso de uso, geralmente só preciso embelezar meu JS uma vez por arquivo.

Eu criei um segundo conjunto de regex simples para localizar e substituir padrões que
executo quando salvo meu arquivo e geralmente nunca preciso executar o beautify novamente no
esse arquivo.

Se eu fizer isso, por algum motivo, são apenas alguns segundos extras para
restaurar ifs de uma linha ou literais de objeto quebrados de volta para uma linha. (não eu
não tem um regex find + replace para aqueles, lol)

No domingo, 28 de setembro de 2014, Liam Newman [email protected] escreveu:

Eu vou ter que empurrar isso para v1.6.0.

Eu fiz um trabalho significativo (como observado em #530
https://github.com/beautify-web/js-beautify/pull/530) para habilitar
este recurso. mas francamente ainda é um grande empreendimento para torná-lo em
esta liberação.

—
Responda a este e-mail diretamente ou visualize-o no GitHub
https://github.com/beautify-web/js-beautify/issues/315#issuecomment -57132532
.

:+1: Estou muito empolgado com esse recurso :)

+1 Eu gostaria que estivesse disponível!

+1 - Precisa disso para que possamos embelezar e salvar em todos os lugares

+1

:+1:

+1 - também não usando com pre-save por causa disso

:+1:

Além disso, Ecodegen faz isso corretamente, seu código pode ser a fonte de inspiração:

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
Este problema pode não ser resolvido para uma quantidade arbitrária de aninhamento (por exemplo, uma quantidade muito grande de aninhamento) já que a linguagem correspondente a esse aninhamento não é regular, mas talvez você possa assumir um limite para fins práticos (por exemplo, no máximo aninhamento de nível 10 ou usando o tamanho do arquivo para determinar um limite de aninhamento razoável)

+1 para esta solicitação.

É muito detalhado para dividir, por exemplo, isso

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

para várias linhas.

+1

Existe algum novo ETA?

:+1:

Nós precisamos disso!!

:+1:

:+1:

:+1:

+1

Embora esse recurso não seja implementado, eu uso regex em meu próprio script de execução em algum lugar aqui como pretty = pretty.replace(/{([^{}]*?)}/g, function(s, p) { return (s.length < 100 && !/;/.test(p)) ? s.replace(/\n\s*/g, ' ') : s })
Pode ser que seja útil para alguém.

@aves84 não consegue fazer funcionar .. Mas você me fez dar uma olhada no código-fonte em vez de apenas esperar agora, então muito obrigado :D

@schoening talvez eu esteja confuso escreveu, a linha deve ser adicionada depois de "embelezar", não em vez de. Agora eu tentei mudar este script em particular:

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
        });

E funciona corretamente.

@aves84 , nah, eu entendi, fazia sentido. Estou no Linux Mint e estou navegando nesta pasta / alterando este arquivo:
/home/username/.config/sublime-text-3/Packages/HTML-CSS-JS Prettify/scripts/node_modules/js-beautify/js/lib/cli.js

Alterando esta função:

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 );
  }

}

E então, quando tento algo assim, ainda o objeto é dividido:

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

Desculpe por todas as perguntas amigo.

@schoening provavelmente a extensão não usa cli.js e o substitui por seu próprio arquivo com require('js-beautify') . Em Brackets fiz alterações em ~/.config/Brackets/extensions/user/hirse.beautify/main.js
Ou você pode tentar editar https://github.com/beautify-web/js-beautify/blob/master/js/lib/beautify.js#L369 por exemplo.

Eu acho que o sublime usa a versão python.

@mokkabonna - depende. Alguns plugins sublimes envolvem chamadas de node.js, outros usam python diretamente.

:+1: mais um mais um

+1. Existe essa opção por enquanto?

:+1: ansioso por isso, obrigado.

:+1:

@FrankFang Foi adiado para 1.6.0, que ainda não chegou
@aves84 Seu truque quebra / colapsa funções / instruções for-of-loops / if às vezes

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 Bem, esse método está longe de ser o ideal, ele depende do ponto e vírgula na definição de objetos curtos e blocos de código: se não houver ponto e vírgula e o número de caracteres for menor que 100, as quebras de linha serão removidas. Ele ainda causará erros no código que usa a inserção automática de ponto e vírgula do javascript.

:+1:

:+1: Ansioso por isso.

+1 ... eu adoraria ver isso em breve.

é a única razão pela qual não podemos usar este plugin neste momento.

+1

+1

+1 nisso, me impede de usar isso. Mesmo uma opção para desabilitar isso ajudaria!

+1 +1 +1

+1

+1 e obrigado por todo o seu trabalho duro nisso!

+1 Agora, embelezar literalmente dobra meu código em uma bagunça horrível e feia por causa desse problema. É um bug bastante incapacitante em algumas circunstâncias. Especialmente porque eu uso js-beautify como um psedo-linter (se os recuos não estiverem corretos, eu perdi um colchete em algum lugar.) Minha memória muscular transforma meus belos testes de unidade em uma tarefa de 10 minutos para corrigir todos os meus literais de objeto.

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

esta linha de código dobrará as coisas desdobradas entre 30 a 180 caracteres sem blocos incorporados. provavelmente pode ser útil para algumas pessoas.

+1 e obrigado por todo o seu trabalho duro nisso!

+1. Três linhas em vez de uma é demais.

Espero que isso possa ser feito. :+1:

É o único comportamento do js-beautify que me deixa descontente. :sweat_smile:

@vekat - Como você pode ver, você não está sozinho. :sorriso:

@nels-o - coisa totalmente diferente, desculpe. Chaves de modelo como {{ e }} são analisadas de forma completamente diferente das chaves de javascript. Além disso, ao inserir objetos, eles se pareceriam com { a: { b: {} } } } .

(bits de modelo WRT como {{}} e {{!}} ) É? Se eles estiverem em tags de script, eles parecem estar formatados. Por exemplo isso:

torna-se isso depois de executar o embelezador.

Ah :) Obrigado @bitwiseman

Talvez o que eu deveria ter dito é que, se eles fossem tratados, eles seriam tratados completamente separadamente. :smile: Ainda assim, desculpe.

+1. Alguma ideia de ETA? Isso está me deixando muito triste :(

+1. Também adoraria esse recurso! Infelizmente não tenho tempo para ajudar de alguma forma :(

+1, ainda estamos esperando pacientemente. Esta será uma adição incrível

A mudança que fiz não entende realmente objetos "curtos" - ela apenas tenta preservar os objetos que a entrada fornece que não têm novas linhas neles. Quando ocorre a quebra de linha, o objeto muda para a formatação "recolher". Portanto, esta ainda é uma solução imperfeita, mas uma melhoria.

Se isso funcionar como eu entendi, acho que já é uma grande melhoria para a situação atual. Na maioria dos casos, isso é suficiente.

+1

+1 espero que isso seja feito em breve

@NerdPad - _está_ feito.

Podemos usar com Brackets? o_O

@C-Weinstein - Talvez você possa abrir um novo problema com exemplo de entrada e saída desejada?

Para pessoas como eu que vêm aqui procurando uma maneira de fazê-lo funcionar: funciona e pode ser ativado com as opções em .jsbeautifyrc

   "brace_style": "collapse-preserve-inline"

Infelizmente, isso não funcionou :( Mas obrigado por tentar.

@Ceyaje - Como não funcionou? Onde não funcionou? Quais foram suas entradas e saídas?

A entrada foi

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

Ele "embeleza" para

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

@Ceyaje você precisa definir a opção "brace-style" para "collapse-preserve-inline"

@aves84 - obrigado! Continuando a discussão em #995.

@aves84 eu fiz isso. Eu estava dizendo que ainda estava acontecendo, então abri o #995, mas estou usando Brackets e não sabia que era um código diferente

@Kutsan - Por favor, abra um novo problema.

Não consegui encontrar a opção expandir-preserve-inline com o arquivo html no átomo. Eu escrevo javascript no arquivo html e no arquivo js.

Coloque "preserve-inline" após a configuração que deseja usar (recolher, expandir etc.)

"brace_style": "recolher, preservar-inline"

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

O acima acontece, no entanto, meu estilo de chave é colapso-preserve-inline. Li o tópico completo, não acredito que esteja fazendo algo errado. Já reiniciei o Atom, só por precaução, nada.

alguma atualização disso? O colapso-preserve-inline ainda expande a função de seta em várias linhas.

@grandslammer - Por favor, dê uma olhada nas questões em aberto que incluem a palavra "seta". Se você não encontrar um problema que abranja o que você está falando, abra um novo problema.

Desculpe: o tópico original é "Opção para preservar ou "objetos curtos" embutidos em uma única linha #315?
esta discussão se desviou de muitas maneiras, por favor, alguém pode apontar as configurações corretas para a versão mais recente do js-beautify para obter a formatação solicitada? Obrigado

@ainthek é "brace_style": "collapse,preserve-inline"

Que tal as configurações na versão mais recente do código vs para corrigir esse problema?

No código vs 1.20.1 , não consigo fazer com que o estilo "brace_style": "expand,preserve-inline", funcione.

Entrada :

const
 {
 diálogo
 } = require("elétron").remote;

Saída (Depois de selecionar esta área e clicar em F1 ---> Beautify Selection) : NO CHANGE :(

Saída esperada: const {dialog} = require("electron").remote;

PS ----> a entrada distorcida foi obtida após Embelezar todo o arquivo. Ninguém escreve código dessa maneira distorcida :P

Para vscode, adicionar abaixo nas configurações do usuário funcionou para mim:
"beautify.config": { "brace_style": "recolher,preserve-inline" }

Obrigado pelo apoio galera.

@sulkhanp - Registre um problema descrevendo o comportamento.

A solução da @vipingoel funciona!
Por que esta opção só funciona na preferência do usuário vscode, não no meu arquivo .jsbeautifyrc ?

"brace_style": "expandir,preserve-inline" não funciona.

comportamento esperado:

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

comportamento atual:

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

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

@SiJinmin estes não são objetos curtos e, portanto, não estão relacionados a esse problema.

@vipingoel Funciona. Eu estou realmente feliz. Obrigado!!!