web-dev-qa-db-fra.com

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

J'utilise Sublime Text comme éditeur de texte.

Il existe un format jsFormat pour formater les fichiers javascript, mais je ne parviens pas à en trouver un pour JSX.

Comment vous gérez le formatage de JSX?

reactjssublimetextreact-jsx
89
fin

Mise à jour 4

Vérifiez plus joli , pas configurable comme esformatter, mais actuellement utilisé pour formater de gros 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 à partir de Sublime. Voici un guide pour ça

Mise à jour 2

à partir de la ligne de commande, vous pouvez également utiliser esbeautifier . C'est un wrapper autour de 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 un démo en direct sur requirebin

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

À partir de 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 vous cherchez simplement à mettre en forme vos fichiers jsx tout en autorisant la syntaxe jsx (embellissez en gros toute la syntaxe javascript et ignore les balises jsx, ce qui signifie les laisser tels quels) , c’est ce que je fais en utilisant esformatter

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

En fait, j'aimerais que esformatter utilise une version de rocambole qui utilise esprima-fb au lieu de esprima, afin d'éviter proxyquire.

57
roy riojas

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, le code jsx ne sera pas gâché. Le réglage est: "e4x": true dans la section "js" du fichier de paramètres

Préférences> Paramètres de 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 />

57
Shoobah

Vous pouvez installer un package JsPrettier pour Sublime 2 & 3. Il s'agit d'un nouveau formateur JavaScript (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 globalement la plus jolie en utilisant le terminal: $ npm install -g prettier
  2. Dans Sublime, allez dans Outils -> Palette de commandes ... -> Contrôle du paquet: Installer le paquet, tapez Word JsPrettier, puis sélectionnez-le pour terminer l’installation.
  3. Formatez votre fichier en utilisant le menu contextuel de l'éditeur ou associez-le à un raccourci clavier: { "keys": ["super+b"], "command": "js_prettier" }

Liens:

19
Eugene Kulabuhov

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, le code jsx ne sera pas gâché. Le paramètre est: "e4x": true dans la section "js" du fichier de paramètres

Aller à: Préférences> Paramètres de package> HTML\CSS\JS Prettify> Définir les préférences de Prettify

Aller à la section "js":

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

18
brownmamba

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

modifier jsFormat.sublime-settings

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

En utilisant l'installateur de paquets de Sublime, installez Babel . Ensuite:

  1. Ouvrez un fichier .jsx.
  2. Sélectionnez Vue dans le menu,
  3. Puis Syntaxe -> Ouvrir tout avec l'extension en cours sous ... -> Babel -> JavaScript (Babel).
3
Alan P.

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

1
Austin Cheney