esformatter-ignore
Advanced tools
Comparing version 0.1.0 to 0.1.1
# esformatter-ignore - Changelog | ||
## v0.1.1 | ||
- **Bug Fixes** | ||
- package.json scripts fixed - [ca6bb67]( https://github.com/royriojas/esformatter-ignore/commit/ca6bb67 ), [royriojas](https://github.com/royriojas), 22/09/2015 00:05:29 | ||
- wrong readme (copy paste issue :) ) - [25009cd]( https://github.com/royriojas/esformatter-ignore/commit/25009cd ), [royriojas](https://github.com/royriojas), 22/09/2015 00:03:29 | ||
## v0.1.0 | ||
@@ -4,0 +12,0 @@ - **Features** |
{ | ||
"name": "esformatter-ignore", | ||
"version": "0.1.0", | ||
"description": "an esformatter plugin to ignore code blocks and lines from the formatting task", | ||
"version": "0.1.1", | ||
"description": "an esformatter plugin to make esformatter ignore certain lines and blocks of code", | ||
"repository": "royriojas/esformatter-ignore", | ||
@@ -25,5 +25,5 @@ "license": "MIT", | ||
"scripts": { | ||
"beautify": "esbeautifier 'index.js' 'lib/**/*.js' 'specs/**/*.spec.js'", | ||
"beautify-check": "esbeautifier -k 'index.js' 'lib/**/*.js' 'specs/**/*.spec.js'", | ||
"eslint": "eslinter 'index.js' 'lib/**/*.js' 'specs/**/*.spec.js'", | ||
"beautify": "esbeautifier 'index.js' 'specs/**/*.spec.js'", | ||
"beautify-check": "esbeautifier -k 'index.js' 'specs/**/*.spec.js'", | ||
"eslint": "eslinter 'index.js' 'specs/**/*.spec.js'", | ||
"test": "mocha-runner 'specs/**/*.spec.js'", | ||
@@ -30,0 +30,0 @@ "cover": "istanbul cover -x 'specs/**/*.spec.js' mocha-runner 'specs/**/*.spec.js' html text-summary", |
135
README.md
# [esformatter](https://github.com/millermedeiros/esformatter)-jsx | ||
> esformatter plugin: format javascript files that contain React JSX blocks | ||
> an esformatter plugin to make esformatter ignore certain lines and blocks of code | ||
[![NPM Version](http://img.shields.io/npm/v/esformatter-jsx.svg?style=flat)](https://npmjs.org/package/esformatter-jsx) | ||
[![Build Status](http://img.shields.io/travis/royriojas/esformatter-jsx.svg?style=flat)](https://travis-ci.org/royriojas/esformatter-jsx) | ||
[![NPM Version](http://img.shields.io/npm/v/esformatter-ignore.svg?style=flat)](https://npmjs.org/package/esformatter-ignore) | ||
[![Build Status](http://img.shields.io/travis/royriojas/esformatter-ignore.svg?style=flat)](https://travis-ci.org/royriojas/esformatter-ignore) | ||
## Demo | ||
## Overview | ||
Live demo: [esformatter-jsx](http://requirebin.com/embed?gist=0d67452e01754269660f) | ||
**esformatter-ignore** is a plugin for [esformatter](https://github.com/millermedeiros/esformatter) meant to allow | ||
certain lines and blocks of code to be ignored by esformatter | ||
### Usage with [JSFMT](https://github.com/ionutvmi/sublime-jsfmt) | ||
**Example** | ||
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 deafault | ||
"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 | ||
"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 | ||
"htmlOptions": { | ||
// put here the options for js-beautify.html | ||
} | ||
} | ||
var someVar = 'foo'; | ||
if (someVar) { | ||
/*esfmt-ignore-start*/ | ||
// you want for some reason this block to remain untoched by the formatter | ||
// most use cases are for certain cases where the formatter produces some buggy | ||
// output like these cases: | ||
// - https://github.com/millermedeiros/esformatter/issues/359 | ||
// - https://github.com/millermedeiros/esformatter/issues/358 | ||
// - https://github.com/millermedeiros/esformatter/issues/347 | ||
cache.setKey( 'persistifyArgs', { | ||
cache: browserifyOpts.cache, | ||
packageCache: browserifyOpts.packageCache | ||
} ); | ||
/*esfmt-ignore-end*/ | ||
} | ||
``` | ||
## Overview | ||
If you want to ignore only a single line you can also do it by doing | ||
**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 <div | ||
className="hello-div">{this.props.message}</div>; | ||
```javascript | ||
if (someKey) { | ||
// ignoring next line cause esformatter@7.0.3 | ||
// mistakenly move the semicolon to the next line | ||
delete objectCache[someKey]; // esfmt-ignore-line | ||
} | ||
}); | ||
React.render(<Hello | ||
message="world"/>, document.body); | ||
``` | ||
into: | ||
```js | ||
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 | ||
```sh | ||
$ npm install esformatter-jsx --save-dev | ||
$ npm install esformatter-ignore --save-dev | ||
``` | ||
@@ -95,36 +59,7 @@ | ||
"plugins": [ | ||
"esformatter-jsx" | ||
], | ||
// this is the section this plugin will use to store the settings for the jsx formatting | ||
"jsx": { | ||
// 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 | ||
} | ||
} | ||
"esformatter-ignore" | ||
] | ||
} | ||
``` | ||
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: | ||
@@ -134,6 +69,6 @@ | ||
// register plugin | ||
esformatter.register(require('esformatter-jsx')); | ||
esformatter.register(require('esformatter-ignore')); | ||
``` | ||
## Usage | ||
## node usage | ||
@@ -144,7 +79,7 @@ ```js | ||
//register plugin manually | ||
esformatter.register(require('esformatter-jsx')); | ||
esformatter.register(require('esformatter-ignore')); | ||
var str = fs.readFileSync('someKewlFile.js').toString(); | ||
var str = fs.readFileSync('./someKewlFile.js').toString(); | ||
var output = esformatter.format(str); | ||
//-> output will now contain the formatted code | ||
//-> output will now contain the formatted code with the blocks marked to be ignored remain intact | ||
``` | ||
@@ -151,0 +86,0 @@ |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
8412
89