'Can't auto-complete the React component tag using tab in vscode?
Here is the code:
<body>
<div id="app"></div>
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/@babel/[email protected]/babel.min.js"></script>
<script type="text/babel">
function Child(props) {
return <h2>{props.age}</h2>
}
function Parent(props) {
return (
<div>
<h1>{props.title}</h1>
<Child age = '12'/>
</div>
)
}
</script>
</body>
In the returned body of function Parent, when I type h1 and press tab, the h1 turns into <h1></h1>. But this doesn't work when I type Child and press tab. The Child doesn't turn into a pair of tags. It seems the auto-complete has failed in this condition. How could I solve this problem? Installing an extension or changing some settings?
Btw, I now have installed the Reacjs code snippet extension and edited the setting like this:
"emmet.includeLanguages": {
"javascript":"javascriptreact"
},
Solution 1:[1]
You should create an external JavaScript file and then import it to your HTML file like this :
<script src="./path/to/your/script.jsx"></script>
It's better if your file extension be .jsx, because VS Code treats that as a React app.
But this is not the suggested way to write react code.
I recommend to use create-react-app to create a React app:
npx create-react-app my-app
Make sure to install node before.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | amir |