Existe um formatador JSX para texto sublime?


91

Estou usando o Sublime Text como editor de texto.

Existe um jsFormat para formatar arquivos javascript, mas não consigo encontrar um para JSX.

Como vocês lidam com a formatação JSX?


Sim, procure o pacote jsx textmate que pode ser usado com praticamente qualquer editor.
Brigand

parece apenas um iluminador de sintaxe, estou procurando o formatador que identifica e classifica as coisas
fin

2
Eu não conheço nenhum. O grupo de reação do google seria um lugar melhor para perguntar.
Brigand

também não consigo encontrar uma boa solução. Atualmente é possível analisar o código-fonte com esprima-fb e usar escodegen-jsx para gerar a saída formatada. As opções de formatação são limitadas e você perde linhas brancas ... além disso, escodegen-jsx é um fork sem rastreamento de problemas ... não tenho certeza se será mantido ativamente. Eu me pergunto como o fb lida com sua base de código jsx.
user1600124

a versão beta do esformatter parece ter alguma habilidade de formatar JSX porque está usando esprima-fb, mas ainda não está pronto para produção
fin

Respostas:


60

Atualização 4

Verifique mais bonito , não configurável como esformatter, mas atualmente usado para formatar alguns grandes projetos ( como o próprio React )

Atualização 3

Verifique jsfmt sublime . Se você adicionar esformatter-jsx à configuração e instalar o pacote dentro do forlder para sublime-jsfmt. Você poderá formatar arquivos JSX diretamente do Sublime. Aqui está um guia para isso

Atualização 2

na linha de comando, você também pode usar esbeautifier . É um empacotador em torno do formato que aceita uma lista de globs para formatar

# install the dependencies globally
npm i -g esbeautifier

# beautify the files under src/ and specs/ both .js and .jsx
esbeautifier src/**/*.js* specs/**/*.js*

Atualizar

Então acabei fazendo um plugin para esformatter para habilitar a formatação de arquivos JSX:

https://www.npmjs.com/package/esformatter-jsx

Aqui está uma demonstração ao vivo sobre requirebin

Deve ser de alguma forma viável chamar esformatter de Sublime passando o arquivo atual como o argumento. Em qualquer caso, para usá-lo na linha de comando, você pode seguir estas instruções:

Na linha de comando, ele pode ser usado assim:

# install the dependencies globally
npm i -g esformatter esformatter-jsx

# call it (this will print to stdout)
esformatter --plugins=esformatter-jsx ./path/to/your/file

# to actually modify the file
esformatter --plugins=esformatter-jsx ./path/to/your/file > ./path/to/your/file

# to specify a config file (where you can also specify the plugins)
# check esformatter for more info about the configuration options
esformatter -c ./path/to/.esformatter ./path/to/your/file > ./path/to/your/file

==== resposta antiga abaixo ===

Então, se o que você está procurando é apenas fazer com que seus arquivos jsx sejam formatados enquanto permite a jsxsintaxe (basicamente embelezar toda a sintaxe javascript e ignorar as jsxtags, o que significa deixá-los como estão), é isso que estou fazendo usandoesformatter

// needed for grunt.file.expand
var grunt = require('grunt');

// use it with care, I haven't check if there
// isn't any side effect from using proxyquire to 
// inject esprima-fb into the esformatter
// but this type of dependency replacement
// seems to be very fragile... if rocambole deps change 
// this will certainly break, same is true for esformatter
// use it with care
var proxyquire = require('proxyquire');
var rocambole = proxyquire('rocambole', {
  'esprima': require('esprima-fb')
});

var esformatter = proxyquire('esformatter', {
  rocambole: rocambole
});

// path to your esformatter configuration
var cfg = grunt.file.readJSON('./esformatter.json');

// expand the files from the glob
var files = grunt.file.expand('./js/**/*.jsx');

// do the actual formatting
files.forEach(function (fIn) {
  console.log('formatting', fIn);
  var output = esformatter.format(grunt.file.read(fIn), cfg);
  grunt.file.write(fIn, output);
});

Na verdade, gostaria que o esformatter usasse uma versão do rocambole que usasse esprima-fb em vez de esprima, para evitar proxyquire.


1
Isso só funcionou com esformatter-jsx-ignore para mim, mas isso é bom o suficiente. Obrigado!
Jasper

Estou usando o esformatter-jsx e funciona conforme o esperado. No entanto, eu também tive que adicionar "esformatter-jsx" a "options": {"plugins": {"esformatter-jsx"}} em "Preferences> Package Settings> Sublime JSFMT> Settings - Default" no Sublime 3 para torná-lo obras
Kuma

Esta é uma ótima resposta, eu tenho essa ferramenta usada há algum tempo, mas mudamos para o es6 / es7 com o babel e não funciona mais.

1
verifique seu console sublime, no mac para abrir o console pressione ctrl + `você pode abrir um tíquete no repo esformatter-jsx ou no repo JSFMT com o erro que você está vendo no console
roy riojas

2
mais bonita faz o trabalho para mim. plugin sublime aqui github.com/jonlabelle/SublimeJsPrettier e também tem suporte eslint github.com/prettier/prettier#eslint . Ainda bem que esta questão foi finalmente aceite após quase 3 anos.
fin

57

Há uma configuração no plugin HTML-CSS-JS Prettify que permite ignorar a sintaxe xml no arquivo js / jsx. Dessa forma, ele não bagunça o código jsx. A configuração é: "e4x": truena seção "js" do arquivo de configurações

Preferências> Configurações do pacote> HTML \ CSS \ JS Prettify> Definir preferências de compactação

Isso não funciona bem se você tiver tags de fechamento automático, por exemplo. tags que terminam em />


1
Isso ainda funciona muito bem com as versões mais recentes do babel-sublime e HTML-CSS-JS Prettify. Apenas certifique-se de adicionar "jsx" ou qualquer extensão de arquivo que você usa em "allowed_file_extensions".
dia

Esta resposta está desatualizada? Não há />em meu código, mas ainda não funciona
Andy Darwin

2
mais bonita (aka jsprettier) para sublime é de longe o melhor !! Veja a resposta abaixo: stackoverflow.com/a/42169688/2178112
majorBummer

20

Você pode instalar um pacote JsPrettier para Sublime 2 e 3. É um formatador JavaScript relativamente novo (no momento em que este artigo foi escrito: fevereiro de 2017). Suporta a maioria dos desenvolvimentos mais recentes como: ES2017, JSX e Flow.

Começo rápido

  1. Instale globalmente mais bonito usando o terminal: $ npm install -g prettier
  2. Em Sublime, vá para Ferramentas -> Paleta de comandos ... -> Controle de pacote: Instalar pacote, digite a palavra JsPrettier e selecione-a para concluir a instalação.
  3. Formate seu arquivo usando o menu de contexto dentro do editor ou vincule-o a um atalho de teclado: { "keys": ["super+b"], "command": "js_prettier" }

Links:


1
Esta é de longe a melhor resposta agora! mais bonita é da bomba!
majorBummer

1
Sim, de fato, funcionou perfeitamente para mim também. A coisa mais importante a notar é a parte "global".
Ionut Necula

19

Para adicionar ao que @Shoobah disse:

Há uma configuração no plugin HTML-CSS-JS Prettify que permite ignorar a sintaxe xml no arquivo js / jsx. Dessa forma, ele não bagunça o código jsx. A configuração é: "e4x": verdadeiro na seção "js" do arquivo de configurações

Vá para: Preferências> Configurações do pacote> HTML \ CSS \ JS Prettify> Definir preferências do Prettify

Vá para a seção "js":

Adicione "jsx" a "allowed_file_extension" e, em seguida, altere "e4x" para "true"


16

a resposta na internet que sempre dizia para você definir 'e4x' como verdadeiro, mas às vezes, temos que definir a opção de 'format_on_save_extensions' e adicionar 'jsx' no array

modificar configurações de jsFormat.sublime

{
  "e4x": true,
  "format_on_save": true,
  "format_on_save_extensions": ["js", "json", "jsx"]
}

Eu fiz conforme dito por você, mas não funcionou para mim. :(
Yash Vekaria

Onde "jsFormat.sublime-settings" foi encontrado? para que eu possa modificar "format_on_save_extensions": ["js", "json", "jsx"]. O mais próximo que encontro sobre extensões de arquivo é:"js": { "allowed_file_extensions": ["js", "json",...]
Chris22

Você pode encontrá-lo aqui: Preferências> Configurações do pacote> jsFormat> Configurações - Usuário. Não funcionou para mim, ainda recua JSX estranhamente :(
Niclas

Tenho procurado uma solução e esta resolveu o meu problema, obrigado!
Al-Maamari Tareq

4

Usando o instalador de pacotes do Sublime, instale o Babel . Então:

  1. Abra um arquivo .jsx.
  2. Selecione Exibir no menu,
  3. Então Sintaxe -> Abrir tudo com a extensão atual como ... -> Babel -> JavaScript (Babel).

Há também um pacote de linguagem JSX que pode ser usado
TabsNotSpaces

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.