I've recently looked into using Prettier to help maintain a consistent code structure. I found the Prettier VSCode plugin and saw that it also had an option to use Prettier-eslint. For the most part, it's great, however there is one thing that Prettier does that really drives me nuts.
Let's say I have this in a render function on a React component:
return (
<button
onClick={
(e) => {console.log('Hello, world!');}
}
>
Click Me
</button>
);
This is exactly how I would like the code to be formatted, but Prettier keeps turning it into this:
return (
<button
onClick={(e) => {
console.log('Hello, world!');
}}
>
Click Me
</button>
);
So, it's removing the newlines after the opening bracket and before the closing bracket.
Is there an option to turn this off, or some kind of plugin that I can get to do so (for Prettier and/or Eslint)? I searched around but couldn't find anything that quite covered this.
Thanks!
You're probably not going to like the answer to this question. This is the type of thing Prettier is designed to stop, custom code style. It's not very customizable on purpose.
"By far the biggest reason for adopting Prettier is to stop all the on-going debates over styles."
https://prettier.io/docs/en/option-philosophy.html
Here's a list of all the options available: https://prettier.io/docs/en/options.html
Prettier seems to be the industry standard now, bringing JS development
Related
I am using the react-paginate library and it works great.
I don't see a way to only show the right links. Something like this:
as apposed to the default:
It's just a small little detail that I would like to accomplish in my app but I see no way to do this with the current api.
Any workaround?
Ah. Setting marginPagesDisplayed={0} does exactly what I want. It's not very clear from the documentation so I had to do some little trial and error.
here's what I came up with:
<ReactPaginate
forcePage={currentPage}
previousLabel={"previous"}
nextLabel={"next"}
breakLabel={...}
pageCount={this.props.total_count}
marginPagesDisplayed={0}
pageRangeDisplayed={5}
onPageChange={}//handle page change event
containerClassName={"pagination"}
subContainerClassName={"pages pagination"}
activeClassName={"active"}
/>
I'm trying to indent my JSX a little nicer, but I'm losing a blank space between components. For example
<span>Saved: { this.props.fetchedTitle + ' ' }
<AjaxButton css='btn-danger btn-xs' running={this.props.deleting} onClick={this.props.deleteBook} text='Delete' runningText='Deleting' />{' '}
<BootstrapButton preset='info-xs' onClick={() => this.expand()}>D</BootstrapButton>
</span>
Note the manual space inserted after fetchedTitle and after AjaxButton. If I cram everything onto one line with spaces between the components, the space is inserted for me. When I break things into multiple lines, the space is gone, forcing me to manually add it, even if I manually insert a space before or after the line break.
Is there a way around this? (this ui is just a rough prototype / exploratory exercise - eventually there'll probably be a more robust layout, but I would still like to understand why React is responding to the jsx the way it is)
Another quick trick to add whitespace between components is to use the following:
{' '}
Per https://github.com/facebook/react/issues/1643#issuecomment-45325969
React controls it. Fiddle example is here. So lets i gonna describe two moments around this misunderstanding:
When you a trying to place the white space between two components you have to place this components in a one line like below:
<Parent>
<Child1 title='Yo'/><Child2 title='Yo'/>
<Parent>
It will be translated with whitespace like
Yo Yo
But if you separate components in a different lines
<Mother>
<Child1 title='Yo'/>
<Child2 title='Yo'/>
</Mother>
It will be translated without whitespace
YoYo
React Link is here!
I hope it will help you!
Thanks!
Try this.
<span>Saved: { this.props.fetchedTitle }
<AjaxButton css='btn-danger btn-xs' running={this.props.deleting} onClick={this.props.deleteBook} text='Delete' runningText='Deleting' />
<BootstrapButton preset='info-xs' onClick={() => this.expand()}>D</BootstrapButton>
</span>
I need to do something similar to hull.io
For example my user enters this in html:
<div data-test-component="hello#test" data-test-provider="test"> </ div>
So my script should look for it and render the right content.
I did a little experiment :
if ($('div').date('test-component') == "hello#test") {
$ (document).find("[data-test-component = 'hello # test']").html("Hello World")
}
It works, but do not think that is the best way.
In addition to needing several IFs and does not work with multiple elements.
I would like to help with this. Any guidelines, a way forward.
Hull.js is built on top of Aura.js, that offers the component system to do this.
You can have a look at the source here:
https://github.com/aurajs/aura
This might be what you want to use ultimately, since it handles instanciation and cleanup of the components that are
I am a maths teacher. I want to use my school's website to allow pupils to check whether they have the correct solutions to a set of test questions given separately on paper. I wanted to give pupils a textbox in which they can enter their solution and a button to press to check if it is correct. A correct answer will display a 'correct' icon next to the question etc. I am a complete beginner but I have so far managed:
<script>
function check(z)
{
var ans = new Array
ans[0]="522"
ans[1]="144"
if (document.getElementById('response'+z).value==ans[z])
{
document.getElementById('correct' + z).style.visibility='visible'
document.getElementById('incorrect' + z).style.visibility='hidden'
}
if (document.getElementById('response'+z).value!=ans[z] && document.getElementById('response'+z).value!='')
{
document.getElementById('correct' + z).style.visibility='hidden'
document.getElementById('incorrect' + z).style.visibility='visible'
}
if (document.getElementById('response'+z).value=='')
{
document.getElementById('correct' + z).style.visibility='hidden'
document.getElementById('incorrect' + z).style.visibility='hidden'
}
}
</script>
<img id="correct0"src="correct.jpg"style="visibility:hidden"/>
<img id="incorrect0"src="incorrect.jpg"style="visibility:hidden"/>
1a
<textarea style="width: 100px; height: 20px;"id="response0"></textarea>
<button style="height: 20px"onclick="check(0)">check</button>
<br></br>
<img id="correct1"src="correct.jpg"style="visibility:hidden"/>
<img id="incorrect1"src="incorrect.jpg"style="visibility:hidden"/>
1b
<textarea style="width: 100px; height: 20px;"id="response1"></textarea>
<button style="height: 20px"onclick="check(1)">check</button>
<br></br>
This works but is obviously very clunky (I have in fact used an Excel spreadsheet to generate the html code). My questions are: Can I use javascript itself to generate the textboxes and buttons? Can I obfuscate the correct answers (if a pupils knows how to view the source of my webpage, it's game over for my exam!).
Many thanks and best wishes,
Ideally, you'll generate and verify the solutions server-side. If that's not an option, drop a reference to a hashing library in your page and validate answers against cryptographic hashes:
https://code.google.com/p/crypto-js/
You'll have to generate the hashes in your spreadsheet -- or in your own question-generation page using the same hashing library.
But beware! If there is a potential that your students are at all familiar with JavaScript, they could still easily open a JavaScript console and brute force it. Assuming reasonable answers tend to be numeric and below 1 million, it's pretty trivial ...
... One more caveat. If your answers are open text fields, you'll need to "normalize" the input before checking it. Remove extra spaces, punctuation, etc.
Obfuscating in JavaScript is not really possible - there ARE obfuscators, but there are at the same time de-obfuscators (depending on your student's knowledge, this might be an alternative)
Edit: Here is an example of an obfuscator: http://www.daftlogic.com/projects-online-javascript-obfuscator.htm, and you can also take a look at Google closure: http://closure-compiler.appspot.com/home for minifying and "kind-of-obfuscation"
But as I sad, pretty much anything can be reverted.
As far as generating the input-field and boxes ect, you should take a look at jQuery: http://jquery.com/ - it might be a little confusing in the beginning, but it is pretty easy and a BIG help with tasks like this.
If you get a little bit deeper into the topic you might want to consider server-side verification of the answers(so yout stundents can't read your code). It's not as hard as you might think, but for now jQuery should do the job.
I like your project though, I wish I had teachers like this back in the day :)
I've come here after looking for how to selectively add a CSS or JS to a given node based on its view mode and content type. That question is answered pretty straightforward here (http://stackoverflow.com/questions/8295498/how-to-add-css-and-js-files-on-node-pages-independent-of-the-theme).
Now I'd love to clear everything: I'm looking for a way to show my desired CSS and JS but only that, with no other JS and CSS. I'm trying to integrate Impress.js (And I don't like the available solutions) and it seems to be conflicting with Jquery, as both scripts are properly loaded but both latest Firefox and Chromium browsers throw the "old browser" message.
Any ideas on how to unset every single CSS and JS so that the CSS and JS I want to use are the only ones really active?
Thanks!
I've tried the following, to no success:
$mycss = $vars['styles'];
unset($micss[drupal_get_path('module','system') .'/system.base.css']);
...
unset($micss[drupal_get_path('module','toolbar') .'/toolbar.css']);
$vars['styles'] = $mycss;
(I added a lot of different css i want to get rid of, but this explains the idea). It didn't work, though :)
Edit. I'm sorry for the bad markup, I'm looking for a way to clean/mark code.
In your custom module use:
function yourmodule_js_alter(&$js) {
unset(
$js['misc/drupal.js'],
$js['misc/jquery.js']
.... etc.
);
}
You say you want to only do this for certain content types, so try:
if(arg(0) == 'node') {
$node = node_load(arg(1));
if($node->type == 'your_content_type') {
unset(
$js['misc/drupal.js'],
$js['misc/jquery.js']
.... etc.
);
}
}
Jonny