[SOLVED]
My code goes from :
to this after saving:
See the code inside the return statement... It happens after doing a save... It's just so unreadable... What is causing it and how can I fix this?
You're in a .js file, so the automatic formatter VSC uses is for JavaScript, not JSX - it's choking on the <s because in JS, those are operators, not JSX tag delimiters.
Change the file name from App.js to App.jsx for the formatter to work properly.
Yeah there was a JS-CSS-HTML Formatter extension enabled which was causing all this. Disabling it solved the issue. Thanks Brian Thompson.
Related
I'm a new user of TinyMCE, and i'm trying to incorporate it in my React App. But i'ma actually getting an output problem. When try "format:text" in the tiny component, and try to create a post in my blog using bold and italic options, when the post is posted, the displayed text is just normal, without bold or italic properties. So, I've tried the "format:html" but in this case, I get my text without any styles at all, AND we see the <p> balises.
So, it can looks like a stupid question but, how do we output the posted text correctly ?
As always, thx in advance !
This happened to me as well. If you do not want to see the attributes on your output then go to the React Component which is responsible for output and in your React component when you use the return() keyword you should create a div use the
dangerouslySetInnerHTML attribute inside.
Example:
Here's [a link] (https://blog.logrocket.com/using-dangerouslysetinnerhtml-in-a-react-application/)
Whenever I Save the index.js in react.js#17.0.1 version file in vscode, code is reformatted in ugly way and shows the error as in this picture:
I have tried all the possible solutions available on Google, but no results.
From uninstalling and reinstalling vscode to prettier uninstall, restart vscode, install again and restart vscode again, create-react-app again and again and all that. How can I get on the right track?
The reason for it is using a formatting extension.
Steps to solve the issue
Disable the formatting extension.
Remove the extra spaces from the code.
Save it
That should solve the problem!
Changing the file from index.js to index.jsx and re-writing the tags as well as the "hello world" worked for me.
Then, I changed back the index.jsx to index.js and the error didn't come up again.. Not sure why...
On Visual Studio Code look for a wheel icon , that lies under the account icon [ which is like a human figure ] and is on lower left side in my case.
If you hover over the wheel => Manage label appears.
Click on the wheel and a menu pops ups where you'll see Extensions . Click on Extensions . Now look for JS-CSS-HTML-formatter among your extensions . Right next to JS-CSS-HTML-formatter you'll see again the wheel icon ; click it and choose from the pop up menu Disable or Uninstall
For further documentation ,consult :
https://marketplace.visualstudio.com/items?itemName=lonefy.vscode-JS-CSS-HTML-formatter
To use HTML syntax you need to specify .jsx or .tsx file extension.
If you wish to make React elements without JSX syntax use createElement(...)
Creating React Elements
We recommend using JSX to describe what your UI should look like. Each JSX element is just syntactic sugar for calling React.createElement(). You will not typically invoke the following methods directly if you are using JSX.
createElement()
createFactory()
source: https://reactjs.org/docs/react-api.html
First, you have to rename your file from ".js" to ".jsx"
Then, you can try this syntax :
const element = <h1>this is something written in js</h1>;
ReactDOM.render(element, document.getElementById('root'));
=> JSX tags (<Component />) are not standard javascript and have no special meaning if you put them inside a .js file
=> if you want to create element in a .js file, take a look to https://developer.mozilla.org/fr/docs/Web/API/Document/createElement or https://reactjs.org/docs/react-api.html
Rename your file extension from .js file to .jsx
At the bottom of the screen, you'll see the language mode (currently set to Javascript).
-> Click on 'Set Language Mode'
-> Then set your Language Mode to 'JavaScript React'
maybe it is because of your vscode's formatter extension .be sure to format your code with js code formatter.
Any link I use in Reactjs is showing comment. I'm using VSCode Editor. I'm new to React...it can be silly...sorry for that.
I'm sharing two images here.In the tag, src="{link...}" should be shown like this. But in my case (sharing another snapshot including error) it is only consider it as comment and it is not loading any images.
This is my code image...I am stuck with it...I want my code to work like the above code in image (1) shared
Thanks in advance...
You have to use back ticks instead of single or double quotes.
So it's
<img src={`${var}`}
instead of
<img src={'${var}'}
It's a javascript feature called template string. You can find more info about it here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
It is happening because in src you are using single quotes ,
That's not how it should be done in React.
Use template strings which looks like this ` inside the src ,
Kramdown is now the default markdown renderer for Jekyll 4.0. I would like to know if there is a way to remove the end slash from the img tag.
For example:
<img src="flowers.jpg" alt="Flowers" />
One way until a few months ago was to using Redcarpet, but now is dropped.
How can I do?
Thanks for the support.
As said in my comment, this trailing slash is hard coded in Kramdown Html converter.
You can override this methods by creating a _plugins/my_img_tag.rb file :
module Kramdown
module Converter
class Html < Base
# Overriding method
def convert_img(el, _indent)
"<img#{html_attributes(el.attr)}>"
end
end
end
end
Note : this plugin will not work on Github pages.
You can use regular expressions for this:
The regex below catches what we want:
(<img)(.*\n*\t*\s*)(\/>)
Then, you can do a replace of the 3rd group:
$1$2>
I've tested with a few variations of the tag img:
Test using Sublime Text
For example you can usually write
div.classname{text}
and it becomes
<div class='classname'>text</div>
this works in intellij if you only write div.classname but once you add {text} it cant expand the expression anymore.
Anyone know how to fix this or is there another character than {} thats used when writing JSX?
Works fine for me in 2017.3.4 - div.classname{text} is expanded to <div class='classname'>text</div> as expected. What IDEA build do you work with? Curly braces in Emmet JSX are supported since 2017.3 - see WEB-28500