esformatter-jsx
esformatter plugin: format javascript files that contain React JSX blocks
Demo
Live demo: esformatter-jsx
JSFMT
Usage withcheck 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:
- https://github.com/millermedeiros/esformatter/issues/242
- https://github.com/facebook/esprima/issues/74
So this plugin will turn this:
var React = ; var Hello = React; React;
into:
var React = ; var Hello = React; React;
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 pluginesformatter;
Usage
var fs = ;var esformatter = ;//register plugin manuallyesformatter; var str = fs;var output = esformatter;//-> output will now contain the formatted code
See esformatter for more options and further usage info.