Como posso embelezar o código JavaScript usando a linha de comando?

101

Estou escrevendo um script em lote para embelezar o código JavaScript. Ele precisa funcionar no Windows e no Linux .

Como posso embelezar o código JavaScript usando as ferramentas de linha de comando?

grom
fonte
A ferramenta My Pretty Diff é escrita inteiramente em JavaScript, por isso funciona igualmente bem em todos os sistemas operacionais. Ele suporta embelezamento e minimização de JavaScript, CSS, qualquer linguagem de marcação que use delimitadores de estilo XML, incluindo HTML. prettydiff.com/?m=beautify

Respostas:

64

Primeiro, escolha seu Pretty Print / Beautifier baseado em Javascript favorito. Eu prefiro aquele emhttp://jsbeautifier.org/ , porque foi o que encontrei primeiro. Faz download de seu arquivo https://github.com/beautify-web/js-beautify/blob/master/js/lib/beautify.js

Em segundo lugar, baixe e instale o mecanismo Javascript baseado em Java do grupo Mozilla, Rhino . "Instalar" é um pouco enganador; Baixe o arquivo zip, extraia tudo, coloque js.jar em seu classpath Java (ou Library / Java / Extensions no OS X). Você pode então executar scripts com uma invocação semelhante a esta

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

Use o Pretty Print / Beautifier da etapa 1 para escrever um pequeno script de shell que será lido em seu arquivo javascript e o executará por meio do Pretty Print / Beautifier da etapa um. Por exemplo

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

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

Rhino fornece ao javascript algumas funções úteis extras que não necessariamente fazem sentido no contexto de um navegador, mas fazem em um contexto de console. A função print faz o que você espera e imprime uma string. A função readFile aceita uma string de caminho de arquivo como argumento e retorna o conteúdo desse arquivo.

Você invocaria o acima algo como

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

Você pode misturar e combinar Java e Javascript em seus scripts de execução do Rhino, então se você conhece um pouco de Java não deve ser muito difícil executá-lo com fluxos de texto também.

Alan Storm
fonte
3
o link que você forneceu está quebrado, eu acho que deveria ser este, jsbeautifier.org
Sinan
2
Como fiz isso:: ~ $ sudo apt-get install libv8-dev libv8-2.2.18: ~ $ cd einars-js-beautify-f90ce72 / v8: ~ $ g ++ -o jsbeautify jsbeautify.cpp -lv8 -Llib -lpthread Simplesmente funciona. Obrigado a Einar Lielmanis e a todos os envolvidos!
Беров
1
Este parece ser um alvo móvel. Agora, a informação no site jsbeautifier diz que foi escrito em python.
seth
atualização para usuários do cmdline, o seguinte repo tem ferramentas de linha de comando autônomas fáceis de instalar para Pretty printing js: github.com/einars/js-beautify.git
drhodes
Use uma abordagem JS moderna usando Grunt: stackoverflow.com/questions/18985/…
Tchakabam
33

ATUALIZAÇÃO de abril de 2014 :

O embelezador foi reescrito desde que respondi a isso em 2010. Agora há um módulo python lá, um pacote npm para nodejs e o arquivo jar se foi. Leia a página do projeto em github.com .

Estilo Python:

 $ pip install jsbeautifier

Estilo NPM:

 $ npm -g install js-beautify

para usá-lo:

 $ js-beautify file.js

Resposta original

Adicionando à resposta de @Alan Storm

o embelezador de linha de comando baseado em http://jsbeautifier.org/ ficou um pouco mais fácil de usar, porque agora (alternativamente) é baseado no motor javascript V8 (código c ++) em vez de rhino (motor JS baseado em java, empacotado como "js.jar"). Então você pode usar o V8 em vez do rhino.

Como usar:

baixe o arquivo zip jsbeautifier.org em http://github.com/einars/js-beautify/zipball/master

(este é um URL de download vinculado a um arquivo zip, como http://download.github.com/einars-js-beautify-10384df.zip )

antigo (não funciona mais, o arquivo jar se foi)

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

novo (alternativa)

instalar / compilar lib v8 DE svn, consulte v8 / README.txt no arquivo zip mencionado acima

  ./jsbeautify somefile.js

-tem opções de linha de comando ligeiramente diferentes da versão rhino,

- e funciona muito bem no Eclipse quando configurado como uma "ferramenta externa"

knb
fonte
3
Ou se você preferir python em vez de v8, também há um módulo python lá agora.
Keturn,
1
O pacote npm é chamado js-beautify
brafdlog
30

Se você estiver usando nodejs, tente uglify-js

No Linux ou Mac, supondo que você já tenha o nodejs instalado, você pode instalar o uglify com:

sudo npm install -g uglify-js

E, em seguida, obtenha as opções:

uglifyjs -h

Portanto, se eu tiver um arquivo de origem foo.jsparecido com este:

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

Posso embelezá-lo assim:

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

uglifyusa espaços para indentação por padrão, portanto, se eu quiser converter o recuo de 4 espaços em guias, posso executá-lo com o unexpandUbuntu 12.04:

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

Ou você pode fazer tudo de uma vez:

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

Você pode descobrir mais sobre não expandido aqui

então, depois de tudo isso, acabo com um arquivo assim:

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

atualização 07/06/2016

Parece que o mantenedor do uglify-js agora está trabalhando na versão 2, embora a instalação seja a mesma.

erapertar
fonte
4
Esta é a resposta correta para um embelezador de código JavaScript de linha de comando.
bitek
uglifyjs -bfaz muito mais do que apenas corrigir o recuo, ele reorganiza e reescreve o código, talvez para eficiência. Não era isso que eu queria. Eu estava usando uma versão mais antiga, no Ubuntu 14.04.
Sam Watkins de
Você poderia explicar um pouco mais como uglifyjs -breorganiza e reescreve o código?
erapert
11

No Ubuntu LTS

$ sudo apt install jsbeautifier
$ js-beautify ugly.js > beautiful.js
Serge Stroobandt
fonte
1
A melhor resposta no momento. Para uso de embelezamento localjs-beautify -o file.js file.js
Petr Javorik
3

No console, você pode usar o Estilo Artístico (também conhecido como AStyle) com --mode=java.
Ele funciona muito bem e é gratuito, de código aberto e multiplataforma (Linux, Mac OS X, Windows).

tmaric
fonte
2

Use a maneira moderna de JavaScript:

Use o Grunt em combinação com o plugin jsbeautifier para Grunt

Você pode instalar tudo facilmente em seu ambiente de desenvolvimento usando npm .

Tudo que você precisa é configurar um Gruntfile.js com as tarefas apropriadas, que também podem envolver concatenação de arquivo, lint, uglify, minify etc, e executar o comando grunt.

Tchakabam
fonte
2

Não consigo adicionar um comentário à resposta aceita, então é por isso que você vê uma postagem que não deveria ter existido.

Basicamente, eu também precisava de um embelezador de javascript em um código java e, para minha surpresa, nenhum está disponível até onde pude encontrar. Portanto, codifiquei um inteiramente com base na resposta aceita (envolve o script jsbeautifier.org beautifier .js, mas pode ser chamado a partir de java ou da linha de comando).

O código está localizado em https://github.com/belgampaul/JsBeautifier

Usei rhino e beautifier.js

USO do console: recuo do script java -jar jsbeautifier.jar

exemplo: java -jar jsbeautifier.jar "function ff () {return;}" 2

USAGE do código java: public static String jsBeautify (String jsCode, int indentSize)

Você está convidado a estender o código. No meu caso só precisei do recuo para verificar o javascript gerado durante o desenvolvimento.

Na esperança de economizar algum tempo em seu projeto.

Ioikka
fonte
1

Escrevi um artigo explicando como construir um embelezador de JavaScript de linha de comando implementado em JavaScript em menos de 5 minutos. YMMV.

  1. Baixe o Rhino estável mais recente e descompacte-o em algum lugar, por exemplo, ~ / dev / javascript / rhino
  2. Baixe beautify.js, que é referenciado do jsbeautifier.org mencionado anteriormente, e copie-o em algum lugar, por exemplo, ~ / dev / javascript / bin / cli-beautifier.js
  3. Adicione isso no final de beautify.js (usando algumas propriedades adicionais de nível superior para JavaScript):

    // Run the beautifier on the file passed as the first argument.
    print( j23s_beautify( readFile( arguments[0] )));
  4. Copie e cole o seguinte código em um arquivo executável, por exemplo, ~ / 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. (opcional) Adicione a pasta com jsbeautifier.js ao PATH ou mova para alguma pasta que já esteja lá.

Shonzilla
fonte
1

Eu acredito que quando você perguntou sobre a ferramenta de linha de comando, você só queria embelezar todos os seus arquivos js em lote.

Neste caso, o Intellij IDEA (testado com 11.5) pode fazer isso.

Você só precisa selecionar qualquer um dos seus arquivos de projeto e selecionar "Código" -> "Reformatar código .." no menu principal do IDE. Em seguida, na caixa de diálogo, selecione "todos os arquivos do diretório ..." e pressione "Enter". Apenas certifique-se de ter dedicado memória suficiente para a JVM.

gomas de mascar
fonte
0

Você tem algumas opções de revestimento. Use com npm ou autônomo com npx .

Semistandar

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

Padrão

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

Mais bonita

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