esformatter-jsx

    8.0.1 • Public • Published

    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

    Install

    npm i esformatter-jsx

    DownloadsWeekly Downloads

    3,888

    Version

    8.0.1

    License

    MIT

    Last publish

    Collaborators

    • royriojas