Security News
Cloudflare Adds Security.txt Setup Wizard
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
esformatter-ignore
Advanced tools
an esformatter plugin to ignore code blocks and lines from the formatting task
esformatter plugin: format javascript files that contain React JSX blocks
Live demo: esformatter-jsx
check this guide
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 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
}
}
}
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);
$ npm install esformatter-jsx --save-dev
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": {
// 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'));
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.
FAQs
an esformatter plugin to make esformatter ignore certain lines and blocks of code
The npm package esformatter-ignore receives a total of 12,502 weekly downloads. As such, esformatter-ignore popularity was classified as popular.
We found that esformatter-ignore demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.
Security News
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.