Existe-t-il un formateur JSX pour un texte sublime?

J'utilise Sublime Text comme éditeur de texte.

Il existe un jsFormat pour formater les fichiers javascript mais je n'en trouve pas pour JSX.

Comment gérez-vous le formatage JSX?

Mise à jour 4

Vérifiez plus joli , pas si configurable comme esformatter, mais actuellement utilisé pour formater certains grands projets ( comme React lui-même )

Mise à jour 3

Vérifiez sublime jsfmt . Si vous ajoutez esformatter-jsx à la configuration et installez le paquet dans le forlder pour sublime-jsfmt. Vous pourrez formater les fichiers JSX directement depuis Sublime. Voici un guide pour cela

Mise à jour 2

à partir de la ligne de commande, vous pouvez également utiliser esbeautifier . C'est un wrapper autour d' esformatter qui accepte une liste de globs à formater

# install the dependencies globally
npm i -g esbeautifier

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

Mettre à jour

J'ai donc fini par faire un plugin pour esformatter pour activer le formatage des fichiers JSX:

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

Voici une démo en direct sur requirebin

Il devrait être possible d'appeler esformatter à partir de Sublime en passant le fichier courant comme argument. Dans tous les cas, pour l'utiliser depuis la ligne de commande, vous pouvez suivre ces instructions:

Depuis la ligne de commande, il peut être utilisé comme ceci:

# 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

==== ancienne réponse ci-dessous ===

Donc, si ce que vous cherchez est juste de faire en sorte que vos fichiers jsx soient formatés tout en permettant la jsxsyntaxe (essentiellement embellir toute la syntaxe javascript et ignorer les jsxbalises, c'est-à-dire les laisser telles quelles), c'est ce que je fais en utilisantesformatter

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

J'aimerais en fait qu'esformatter utilise une version de rocambole qui utilise esprima-fb au lieu d'esprima, pour éviter proxyquire.

Il existe un paramètre dans le plugin HTML-CSS-JS Prettify qui vous permet d'ignorer la syntaxe xml dans le fichier js / jsx. De cette façon, cela ne gâche pas le code jsx. Le paramètre est: "e4x": truedans la section "js" du fichier de paramètres

Préférences> Paramètres du package> HTML \ CSS \ JS Prettify> Définir les préférences Prettify

Cela ne fonctionne pas bien si vous avez des balises à fermeture automatique, par exemple. balises se terminant par />

Vous pouvez installer un package JsPrettier pour Sublime 2 et 3. C'est un formateur JavaScript assez récent (au moment de la rédaction de cet article: février-2017). Il prend en charge la plupart des derniers développements tels que: ES2017, JSX et Flow.

Démarrage rapide

1. Installez plus joli globalement en utilisant le terminal: $ npm install -g prettier
2. Dans Sublime, allez dans Outils -> Palette de commandes ... -> Contrôle du package: Installer le package, tapez le mot JsPrettier, puis sélectionnez-le pour terminer l'installation.
3. Formatez votre fichier à l'aide du menu contextuel de l'éditeur ou liez-le à un raccourci clavier: { "keys": ["super+b"], "command": "js_prettier" }

Liens:

• https://github.com/jonlabelle/SublimeJsPrettier
• https://github.com/jlongster/prettier

Pour ajouter à ce que @Shoobah a dit:

Il existe un paramètre dans le plugin HTML-CSS-JS Prettify qui vous permet d'ignorer la syntaxe xml dans le fichier js / jsx. De cette façon, cela ne gâche pas le code jsx. Le paramètre est: "e4x": true dans la section "js" du fichier de paramètres

Allez dans: Préférences> Paramètres du package> HTML \ CSS \ JS Prettify> Définir les préférences Prettify

Allez dans la section "js":

Ajoutez "jsx" à "allowed_file_extension", puis remplacez "e4x" par "true"

la réponse sur Internet qui vous a toujours dit de définir 'e4x' sur true, mais parfois, nous devons définir l'option 'format_on_save_extensions' puis ajouter 'jsx' dans le tableau

modifier jsFormat.sublime-settings

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

En utilisant le programme d'installation de Sublime, installez Babel . Ensuite:

1. Ouvrez un fichier .jsx.
2. Sélectionnez Vue dans le menu,
3. Puis Syntaxe -> Tout ouvrir avec l'extension actuelle comme ... -> Babel -> JavaScript (Babel).

Pas spécifiquement pour Sublime Text, mais il existe un embellisseur en JavaScript pour React JSX.

http://prettydiff.com/?m=beautify prétend prendre en charge JSX à l'adresse: http://prettydiff.com/guide/react_jsx.xhtml