node package manager

esformatter-jsx

esformatter plugin: format javascript files that contain React JSX Elements

esformatter-jsx

esformatter plugin: format javascript files that contain React JSX blocks

NPM Version Build Status

Demo

Live demo: esformatter-jsx

Usage with JSFMT

check this guide

best configuration

If you're running into troubles with the formatting applied to your files I found this configuration to work the best:

{
  "jsx": {
    "formatJSX": true, //Duh! that's the default 
    "attrsOnSameLineAsTag": false, // move each attribute to its own line 
    "maxAttrsOnTag": 3, // if lower or equal than 3 attributes, they will be kept on a single line 
    "firstAttributeOnSameLine": true, // keep the first attribute in the same line as the tag 
    "formatJSXExpressions": true, // default true, if false jsxExpressions won't be recursively formatted 
    "JSXExpressionsSingleLine": true, // default true, if false the JSXExpressions might span several lines 
    "alignWithFirstAttribute": false, // do not align attributes with the first tag 
    "spaceInJSXExpressionContainers": " ", // default to one space. Make it empty if you don't like spaces between JSXExpressionContainers 
    "removeSpaceBeforeClosingJSX": false, // default false. if true <React.Something /> => <React.Something/> 
    "closingTagOnNewLine": false, // default false. if true attributes on multiple lines will close the tag on a new line 
    "JSXAttributeQuotes": "", // possible values "single" or "double". Leave it as empty string if you don't want to modify the attributes' quotes 
    "htmlOptions": {
      // put here the options for js-beautify.html 
    }
  }
}

Overview

Esformatter-jsx is a plugin for esformatter meant to allow the code formatting of jsx files or js files with React code blocks, using js-beautify to beautify the "html like" syntax of the react components. Use at your own risk. I have tested this against complex JSX structures and seems to be workfing fine, but bugs might appear, so don't blame me :).

It works for my main use case and I hope it works for you too.

This plugin is based on esformatter-jsx-ignore

If you want a bit of history about what this plugin was develop, check:

So this plugin will turn this:

var React = require('react');
 
var Hello = React.createClass({
render: function () {
return (<div
 
className="hello-div">{this.props.message}</div>)
;
}
});
 
React.render(<Hello
message="world"/>,      document.body);

into:

var React = require('react');
 
var Hello = React.createClass({
  render: function() {
    return (
    <div className="hello-div">
      {this.props.message}
    </div>
    );
  }
});
 
React.render(<Hello message="world"/>, document.body);

Installation

$ npm install esformatter-jsx --save-dev

Config

Newest esformatter versions autoload plugins from your node_modules See this

Add to your esformatter config file:

In order for this to work, this plugin should be the first one! (I Know too picky, but who isn't).

{
  "plugins": [
    "esformatter-jsx"
  ],
  // this is the section this plugin will use to store the settings for the jsx formatting 
  "jsx": {
    // whether to recursively format jsx expressions with esformatter 
    // set this to false if you don't want JSXExpressions to be formatted recursively, like when using problematic plugins 
    "formatJSXExpressions": true,
    // By default ObjectExpression and ArrayExpression in JSXExpressions are inlined, 
    // if false, the Expression might expand several lines 
    "JSXExpressionsSingleLine": true,
    // by default is true if set to false it works the same as esformatter-jsx-ignore 
    "formatJSX": true,
    // keep the node attributes on the same line as the open tag. Default is true. 
    // Setting this to false will put each one of the attributes on a single line 
    "attrsOnSameLineAsTag": true,
     // how many attributes should the node have before having to put each 
     // attribute in a new line. Default 1 
    "maxAttrsOnTag": 1,
    // if the attributes are going to be put each one on its own line, then keep the first 
    // on the same line as the open tag 
    "firstAttributeOnSameLine": false,
    // default to one space. Make it empty if you don't like spaces between JSXExpressionContainers 
    "spaceInJSXExpressionContainers": " ",
    // align the attributes with the first attribute (if the first attribute was kept on the same line as on the open tag) 
    "alignWithFirstAttribute": true,
    "htmlOptions": { // same as the ones passed to js-beautifier.html 
      "brace_style": "collapse",
      "indent_char": " ",
      "indent_size": 2,
      "max_preserve_newlines": 2,
      "preserve_newlines": true
      //wrap_line_length: 250 
    }
  }
}

The htmlOptions are passed directly to js-beautify, please check its documentation for all the possible options.

Or you can manually register your plugin:

// register plugin 
esformatter.register(require('esformatter-jsx'));

Usage

var fs = require('fs');
var esformatter = require('esformatter');
//register plugin manually 
esformatter.register(require('esformatter-jsx'));
 
var str = fs.readFileSync('someKewlFile.js').toString();
var output = esformatter.format(str);
//-> output will now contain the formatted code 

See esformatter for more options and further usage info.

License

MIT