I'm using Sublime Text as a text editor.
There's a jsFormat for formatting javascript files but I can't find one for JSX.
How you guys deal with formatting JSX?
Beautify on Save sublime-settings : Ctrl+Shift+P or Cmd+Shift+P in Linux/Windows/OS X.
JSX stands for JavaScript XML. It is simply a syntax extension of JavaScript. It allows us to directly write HTML in React (within JavaScript code). It is easy to create a template using JSX in React, but it is not a simple template language instead it comes with the full power of JavaScript.
Both JS and JSX are interchangeable but JSX makes the code easier to understand for users. JSX is popularly used in React, as it makes the job of building an application much easier.
Just select all lines ( CTRL + A ) and then from the menu select Edit → Line → Reindent. This will work if your file is saved with an extension that contains HTML like . html or . php .
Update 4
Check prettier, not that configurable as esformatter, but currently used to format some big projects (like React itself)
Update 3
Check sublime jsfmt. If you add esformatter-jsx to the config and install the package inside the forlder for sublime-jsfmt. You will be able to format JSX files directly from Sublime. Here is a guide for that
Update 2
from the command line you can also use esbeautifier. It is a wrapper around esformatter that accept a list of globs to format
# install the dependencies globally npm i -g esbeautifier # beautify the files under src/ and specs/ both .js and .jsx esbeautifier src/**/*.js* specs/**/*.js*
Update
So I ended up doing a plugin for esformatter to enable the formatting of JSX files:
https://www.npmjs.com/package/esformatter-jsx
Here is a live demo on requirebin
It should be somehow feasible to call esformatter from Sublime passing the current file as the argument. In any case to use it from the command line you can follow these instructions:
From the command line it can be used like this:
# 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
==== old answer below ===
So if what you're looking is just to make your jsx files to be formatted while allowing the jsx
syntax (basically beautify all the javascript syntax and ignore jsx
tags, meaning leave them as is), this is what I'm doing using 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); });
I would actually like that esformatter use a version of rocambole that use esprima-fb instead of esprima, to avoid proxyquire.
There is a setting in the HTML-CSS-JS Prettify plugin that allows you to ignore xml syntax in the js/jsx file. That way it doesn't mess up the jsx code. The setting is: "e4x": true
in the "js" section of the settings file
Preferences > Package Settings > HTML\CSS\JS Prettify > Set Prettify Preferences
This does not work well if you have self closing tags eg. tags ending in />
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With