Is there a JSX formatter for sublime text?

Question

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?

Solution 1

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.

Solution 2

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

Solution 3

You can install a JsPrettier package for Sublime 2 & 3. It's a fairly new JavaScript formatter (at the time of writing this: Feb-2017). It supports most of the latest developments like: ES2017, JSX, and Flow.

Quickstart

1. Install prettier globally using terminal: $ npm install -g prettier
2. In Sublime go to Tools -> Command Palette... -> Package Control: Install Package, type the word JsPrettier, then select it to complete the installation.
3. Format your file using context menu inside the editor or bind it to a keyboard shortcut: { "keys": ["super+b"], "command": "js_prettier" }

Links:

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

Solution 4

To add to what @Shoobah said:

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

Go to: Preferences > Package Settings > HTML\CSS\JS Prettify > Set Prettify Preferences

Go to "js" section:

Add "jsx" to the "allowed_file_extension", and then change "e4x" to "true"

Solution 5

the answer in the internet that always told you set 'e4x' to true, but sometimes, we have to set option of 'format_on_save_extensions' then add 'jsx' in array

modify jsFormat.sublime-settings

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

View more solutions

Comments

[Jasper]

This only worked with esformatter-jsx-ignore for me, but that is good enough. Thanks!

[Kuma]

I'm using esformatter-jsx and It works as I expected. However, I also had to add "esformatter-jsx" to "options":{"plugins":{"esformatter-jsx"}} in "Preferences>Package Settings>Sublime JSFMT>Settings - Default" in Sublime 3 to make it works

[Admin]

This is a great answer, I have this used tool for awhile now, but we have switched to using es6/es7 with babel and it doesn't work anymore.

[roy riojas]

@Rkhayat are you sure? latest version of esformatter-jsx should support a bunch of ES6/ES7. If there is something not working you can file a bug, and as workaround you can mark blocks that don't work in /*esfmt-ignore-start*/ code here /*esfmt-ignore-end*/

[roy riojas]

make sure to use the latest esformatter as well as previous ones don't recognize ES6/ES7 syntax

[Admin]

@royriojas I am using @Radium as a decorator, and the linter blows up with "unexpected token ILLEGAL" unless I remove it, also on static propTypes. How do I go about upgrading it?

[roy riojas]

@Rkhayat latest version of it handles decorators and class properties as well... github.com/royriojas/esformatter-jsx/blob/master/…

[Admin]

Does this have to be installed per project? How do I go about upgrading it?

[roy riojas]

you can use esbeautifier from the command line and you can also use it in sublime with JSFMT, check this guide: github.com/royriojas/esformatter-jsx/wiki/Usage-with-jsfmt

[Admin]

I believe I followed the instructions for JSFMT / Sublime, the error now states The formatting failed please check the console for more details github.com/ionutvmi/sublime-jsfmt/blob/master/…

[roy riojas]

check your sublime console, in mac to open the console press ctrl+` you can open a ticket on esformatter-jsx repo or in JSFMT repo with the error you are seeing in the console

[damd]

This still works really well with the latest versions of babel-sublime and HTML-CSS-JS Prettify. Just make sure you add "jsx" or whatever file extension you use to "allowed_file_extensions".

[Yash Vekaria]

I did as per told by you, but it didn't work for me. :(

[Chris22]

Where is "jsFormat.sublime-settings" found? so that I can modify "format_on_save_extensions": ["js", "json", "jsx"]. The closest I find about file extensions is: "js": { "allowed_file_extensions": ["js", "json",...]

[Niclas]

You can find it here: Preferences > Package Settings > jsFormat > Settings - User. Didn't work for me though, still indents JSX weirdly :(

[Al-Maamari Tareq]

Have been looking for a solution and this one solved my problem, thanks !

[mlunoe]

I see that Rdio built (or at least maintained) JSFMT, but since they filed for bankruptcy and got bought by Pandora, I haven't seen progress on the project (last commit Feb 3, 2016): github.com/rdio/jsfmt/graphs/….

[roy riojas]

yeah to be fair now I would probably suggest people to use prettier for new projects github.com/prettier/prettier, there might be already an addon for sublime.

[Andy Darwin]

Is this answer outdated? There is not /> in my code, but it still does not work

[tnrich]

This is by far the best answer now! prettier is da bomb!

[tnrich]

prettier (aka jsprettier) for sublime is by far the best!! See the answer below: stackoverflow.com/a/42169688/2178112

[fin]

prettier does the job for me. sublime plugin here github.com/jonlabelle/SublimeJsPrettier and it also has eslint support github.com/prettier/prettier#eslint . Glad this question is finally accepted after nearly 3 years.

[Ionut]

Yes, indeed, this worked perfect for me too. Most important thing to notice is the "globally" part.

[TabsNotSpaces]

There's also a JSX language package that can be used