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


91

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?


Oui, recherchez le bundle jsx textmate qui peut être utilisé avec à peu près n'importe quel éditeur.
Brigand

cela semble être un éclaireur de syntaxe seulement, je recherche le formateur qui identifie et sorte de choses
fin

2
Je n'en connais pas. Le groupe React google serait un meilleur endroit pour demander.
Brigand

ne trouve pas non plus de bonne solution. Actuellement, il est possible d'analyser la source avec esprima-fb et d'utiliser escodegen-jsx pour générer une sortie formatée. Les options de formatage sont limitées, et vous perdez des lignes blanches ... plus escodegen-jsx est un fork sans suivi des problèmes .. je ne sais pas s'il sera activement maintenu. Je me demande comment fb gère sa base de code jsx.
user1600124

la version bêta d'esformatter semble avoir une certaine capacité à formater JSX car elle utilise esprima-fb, mais elle n'est toujours pas prête pour la production
fin

Réponses:


60

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.


1
Cela n'a fonctionné qu'avec esformatter-jsx-ignore pour moi, mais cela suffit. Merci!
Jasper

J'utilise esformatter-jsx et cela fonctionne comme prévu. Cependant, j'ai également dû ajouter "esformatter-jsx" aux "options": {"plugins": {"esformatter-jsx"}} dans "Préférences> Paramètres du package> Sublime JSFMT> Paramètres - Par défaut" dans Sublime 3 pour le faire oeuvres
Kuma

C'est une excellente réponse, j'ai cet outil utilisé depuis un certain temps maintenant, mais nous sommes passés à l'utilisation d'es6 / es7 avec babel et cela ne fonctionne plus.

1
vérifiez votre sublime console, dans mac pour ouvrir la console, appuyez sur ctrl + `vous pouvez ouvrir un ticket sur esformatter-jsx repo ou dans JSFMT repo avec l'erreur que vous voyez dans la console
roy riojas

2
plus jolie fait le travail pour moi. sublime plugin ici github.com/jonlabelle/SublimeJsPrettier et il a également le support eslint github.com/prettier/prettier#eslint . Heureux que cette question soit finalement acceptée après près de 3 ans.
fin

57

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 />


1
Cela fonctionne toujours très bien avec les dernières versions de babel-sublime et HTML-CSS-JS Prettify. Assurez-vous simplement d'ajouter "jsx" ou n'importe quelle extension de fichier que vous utilisez à "allowed_file_extensions".
damd

Cette réponse est-elle obsolète? Il n'y en a pas />dans mon code, mais ça ne marche toujours pas
Andy Darwin

2
plus joli (aka jsprettier) pour sublime est de loin le meilleur !! Voir la réponse ci-dessous: stackoverflow.com/a/42169688/2178112
majorBummer

20

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:


1
C'est de loin la meilleure réponse maintenant! plus jolie est une bombe!
majorBummer

1
Oui, en effet, cela a fonctionné parfaitement pour moi aussi. La chose la plus importante à noter est la partie «globalement».
Ionut Necula

19

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"


16

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"]
}

J'ai fait comme vous l'avez dit, mais cela n'a pas fonctionné pour moi. :(
Yash Vekaria

Où se trouve "jsFormat.sublime-settings" ? afin que je puisse modifier "format_on_save_extensions": ["js", "json", "jsx"]. Le plus proche que je trouve sur les extensions de fichiers est:"js": { "allowed_file_extensions": ["js", "json",...]
Chris22

Vous pouvez le trouver ici: Préférences> Paramètres du package> jsFormat> Paramètres - Utilisateur. Cela n'a pas fonctionné pour moi cependant, indente toujours JSX bizarrement :(
Niclas

J'ai cherché une solution et celle-ci a résolu mon problème, merci!
Al-Maamari Tareq

4

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).

Il existe également un package de langage JSX qui peut être utilisé
TabsNotSpaces

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.