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?
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?
Réponses:
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 jsx
syntaxe (essentiellement embellir toute la syntaxe javascript et ignorer les jsx
balises, 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": true
dans 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 />
/>
dans mon code, mais ça ne marche toujours pas
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
$ npm install -g prettier
{ "keys": ["super+b"], "command": "js_prettier" }
Liens:
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"]
}
"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",...]
En utilisant le programme d'installation de Sublime, installez Babel . Ensuite:
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