JSX element 'h1' has no corresponding closing tag.ts(17008) - reactjs

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.

Related

Why are my JSX HTML tags being broken across multiple lines in my editor?

[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.

VSCode not autocompleting HTML tags in React

Before updating VSCode to the latest version (1.14, I had 1.13) when I was working on my React projects, I could type, for example, div + TAB key and it autocompleted . Also, If I typed div.row it autocompleted it to , but now it doesn't work anymore. When I type div and press the TAB key, it only indents the line. I have the HTML Snippets extension installed.
Does anyone how can I get the autocompletion to work like before?

Visual Studio Code 1.14 introduced a new settings called emmet.useNewEmmet which defaults to true.
When set to true it'll per default disable the setting emmet.triggerExpansionOnTab.
Changing emmet.useNewEmmet to false will re-enable the tab expansion.
However since the useNewEmmet settings is the way going forward, my recommendation is to keep useNewEmmet set as true but instead add two extra settings;
"emmet.includeLanguages": {
"javascript": "javascriptreact"
// any other languages you'd like
},
"emmet.showExpandedAbbreviation": "always"
Restarting VS Code after adding these two will make the editor suggest Emmet abbreviations again and you'll have the same behavior as pre 1.14 release.

Visual studio code changes format (React-JSX)

I've the following snippet in my index.js
class App extends Component {
render() {
return ( <div style = { styles.app } >
Welcome to React!
</div>
)
}
}
The code works, but every time I save (ctrl+s) visual studio format the jsx like that:
class App extends Component {
render() {
return ( < div style = { styles.app } >
Welcome to React!
<
/div>
)
}
}
How can I solve this? thanks

In the end what did the trick was changing the file format from JavaScript to JavaScript React on the bottom toolbar.
I'm publishing it here for future reference since I didn't find any documentation on this topic.
In addition to the above. If you click 'Configure File Association for .js' you can set all .js files to Javascript React

change vscode preferences settings > user settings below:
"files.associations": {
"*.js":"javascriptreact"
}

You can prevent VSC from incorrectly formatting your JSX by adding an association in your settings.json
Code > Preferences > Settings
In the settings window search for associations, click edit in settings.json and then add:
"files.associations": {
"*.js": "javascriptreact"
}

Alternatively, saving the file with a .jsx extension resolves this in vscode.
I had the same challenge and I am hoping to discover a better way of handling this issue in vscode.
I noticed your suggested work-around has to be done each time you open the react file with an extension of .js

Open the Visual Studio Code Settings. Refer the image below to see how to navigate to the settings.
Once the settings tab is open. If you want to make the settings changes for all the projects then select the User sub tab, if only for current project then select the Workspace sub tab.
type "file associations" in the search text box and press Enter.
Click on add item.
set Item : *.js
set Value : javascriptreact
Above changes will start associating all *js files in the project as javascript React files.
Next open any .js file in your project and right click and select Format Document. If you have multiple formatters then associate your favorite formatter. I have used Prettier to handle my formatting.

Install Prettier (if not installed by default) and try to add this to your user or workplace settings:
"prettier.jsxBracketSameLine": true
Do not put linebreak between return and the returned JSX expression.
Trigger autoformat (Alt+Shift+F) and check if works.

I struggled with this but finally found a solution. This is my settings.json
{
"terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
"workbench.startupEditor": "welcomePage",
"window.zoomLevel": 1,
"emmet.includeLanguages": {
"javascript": "javascriptreact",
"vue-html": "html"
},
"editor.formatOnSave": true,
"javascript.updateImportsOnFileMove.enabled": "always",
"editor.wordWrap": "on",
"editor.tabSize": 2,
"editor.minimap.enabled": false,
"workbench.iconTheme": "vscode-icons",
"eslint.autoFixOnSave": true,
"eslint.alwaysShowStatus": true,
"beautify.ignore": [
"**/*.js",
"**/*.jsx"
],
"prettier.jsxSingleQuote": true,
"prettier.singleQuote": true
}
I added
"beautify.ignore": ["**/*.js","**/*.jsx"]

Make sure you dont have multiple javascript formatters enabled in your current workspace. (You have to disable the rest of them for your current workspace).
react-beautify mostly does the magic but fails if you have some other JS formatter/beautifier already installed.
In my case, I had react-beautify and JS-CSS-HTML Formatter extension installed. I had to disable the JS-CSS-HTML Formatter for my current workspace.

Here is what worked for me-
I clicked on the Language mode (Javascript React) at the bottom of the screen
Then chose the Configure React Javascript Language based setting option
Then changed the javascript react default formatter to prettier as shown in the pic.
That pretty much did it for me after I saved the React file.

I just added all the combinations mentioned above.
added this
"files.associations": {
"*.js": "javascriptreact"
}
added this also
"beautify.ignore": ["**/*.js","**/*.jsx"]
Deleted additional js formatting
installed prettier
turn ON prettier and formatting

You can install an extension like react-beautify that helps you format your jsx code.
It is found here
This extension wraps prettydiff/esformatter to format your javascript, JSX, typescript, TSX file.

I had to disable the JS-CSS-HTML Formatter extension in VSC. only solution to this problem

Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.
include :
JavaScript
TypeScript
Flow
JSX
JSON
CSS
SCSS
Less
HTML
Vue
Angular
GraphQL
Markdown
YAML
https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

I had similar problem, then I found out it was caused by 'beautify' extension. After I uninstalled the extension, everything is working fine.

After reading many great suggestions and workarounds, I discovered that I could simply place my mouse arrow down over the bright blue horizontal bar at the bottom of VSCode editor window - right click - which opens a popup list window - and deselected = "Editor Indentation".

You can double click JavaScript in the Status Bar at the bottom of VSCode, and then change the format from JavaScript to React (Choose React in the Select language mode to associate with '.jsx')

add this in your .js code,
/* prettier-ignore */

How to auto indent jsx in VSCode

VSCode seems doesn't auto indent HTML elements in jsx?
Is there any way to fix it.
Update:
In Atom:
When I input <div>, atom will show:
After I press the return key, the result is(pay attention to the location of the cursor):
While in VSCode:

Try changing the language mode to JavaScript React.
Open the commands palette.
Type change language mode
Press Enter
Type javascript react
Press Enter
Once that's done, you'll see the JavaScript React mode in the bottom left corner.
Once you're in that mode, try again to format the document.

Change the language to Javascript React (see other answers for instructions) then use the following command:
alt + shift + f

use the extension "Prettier - Code formatter", by Esben Petersen. it will auto format on save, assuming your file is a jsx file.

1.
Add user settings to
"files.associations": {
"*.js": "javascriptreact"
},
2. Install plugin
Auto Install Tag
And Reload. It will fix your issue.
BTW, I think there's a bug now. Without component props auto indent work well, but with props, it won't work now.
<Component>Enter
===>
<Component>
:
</Component>
But
<Component someProps={10}}Enter
===>
<Component someProps={10}>
:</Component>
Anyone who can fix this please help me :) I am using on mac

Add space in self closing tags before in self closing tags

How do you include a space before the closing tags in self closing tags with WebStorm/IntelliJ-based products?
Default settings turns <ReactComp /> to <ReactComp/>, which is against one of the rules (jsx-space-before-closing) in the commonly used AirBNBs Javascript style guide.

Maybe a little confusingly, the setting is under "HTML" code style and not the JS code style in IntelliJ.
Enable the setting "In empty tag" in Preferences -> Editor -> Code Style -> HTML.
When you do an explicit reformat the space will be added. To ensure that the space is added when autocompleting React components, check the same box in in the Preferences -> Editor -> Code Style -> XML -> Other tab.
Screenshot from 2016-10-12, IntelliJ IDEA 2016.2

The .editorconfig way.
[**]
ij_html_space_inside_empty_tag = true
Here's how you find the name of any option. The same IDEA Code Style page has a gear button with an option to export to .editorconfig:
But this exports all the options, it's a 1070 line file in my case. So you export once to cfg1, change the desired setting through UI, export again to cfg2, and then compare the two configs to find the one option that changed.

Resources