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?
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?
Respostas:
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 jsx
sintaxe (basicamente embelezar toda a sintaxe javascript e ignorar as jsx
tags, 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.
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": true
na 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 />
/>
em meu código, mas ainda não funciona
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
$ npm install -g prettier
{ "keys": ["super+b"], "command": "js_prettier" }
Links:
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"
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"]
}
"format_on_save_extensions": ["js", "json", "jsx"]
. O mais próximo que encontro sobre extensões de arquivo é:"js": { "allowed_file_extensions": ["js", "json",...]
Usando o instalador de pacotes do Sublime, instale o Babel . Então:
Não especificamente para Sublime Text, mas há um embelezador em JavaScript para React JSX.
http://prettydiff.com/?m=beautify afirma oferecer suporte a JSX em: http://prettydiff.com/guide/react_jsx.xhtml