Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/royriojas/esformatter-jsx
esformatter plugin: format jsx files (or js files with Facebook React JSX Syntax)
https://github.com/royriojas/esformatter-jsx
Last synced: 15 days ago
JSON representation
esformatter plugin: format jsx files (or js files with Facebook React JSX Syntax)
- Host: GitHub
- URL: https://github.com/royriojas/esformatter-jsx
- Owner: royriojas
- License: mit
- Created: 2015-02-27T08:32:12.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2022-04-04T16:04:25.000Z (over 2 years ago)
- Last Synced: 2024-10-17T21:33:08.674Z (25 days ago)
- Language: JavaScript
- Size: 315 KB
- Stars: 142
- Watchers: 9
- Forks: 25
- Open Issues: 32
-
Metadata Files:
- Readme: README.md
- Changelog: changelog.md
- License: LICENSE
Awesome Lists containing this project
README
# [esformatter](https://github.com/millermedeiros/esformatter)-jsx
> esformatter plugin: format javascript files that contain React JSX blocks
[](https://npmjs.org/package/esformatter-jsx)
[](https://travis-ci.org/royriojas/esformatter-jsx)
## Demo
Live demo: [esformatter-jsx](http://royriojas.com/resources/esformatter-jsx/)
### Usage with [JSFMT](https://github.com/ionutvmi/sublime-jsfmt)
check this [guide](https://github.com/royriojas/esformatter-jsx/wiki/Usage-with-jsfmt)
### best configuration
If you're running into troubles with the formatting applied to your files I found this configuration to work the best:
```javascript
{
"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 =>
"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](https://github.com/millermedeiros/esformatter) meant to allow the
code formatting of jsx files or js files with React code blocks, using [js-beautify](https://www.npmjs.com/package/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](https://github.com/royriojas/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:
```js
var React = require('react');
var Hello = React.createClass({
render: function () {
return (
{this.props.message})
;
}
});
React.render(, document.body);
```
into:
```js
var React = require('react');
var Hello = React.createClass({
render: function() {
return (
{this.props.message}
);
}
});
React.render(, document.body);
```
## Installation
```sh
$ npm install esformatter-jsx --save-dev
```
## Config
Newest esformatter versions autoload plugins from your `node_modules` [See this](https://github.com/millermedeiros/esformatter#plugins)
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).
```javascript
{
"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](https://www.npmjs.com/package/js-beautify), please check its
documentation for all the possible options.
Or you can manually register your plugin:
```js
// register plugin
esformatter.register(require('esformatter-jsx'));
```
## Usage
```js
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](https://github.com/millermedeiros/esformatter) for more options and further usage info.
## License
[MIT](License)