Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

esformatter-ignore

Package Overview
Dependencies
Maintainers
1
Versions
4
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

esformatter-ignore - npm Package Compare versions

Comparing version 0.1.0 to 0.1.1

8

changelog.md
# 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**

10

package.json
{
"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",

# [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 @@

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc