Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Visual Studio: Auto complete HTML tags inside an embedded babel script

I have an html file with an embedded babel script within it

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>React tutorial</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.2/browser.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/babel">

    </script>
  </body>
</html>

I would like it be the case that when I'm typing inside the babel script

    <script type="text/babel">

    </script>

And I type something like <div> the software autocompletes the end tag by entering the text </div> in


Neither the auto close tag extension, nor the sublime babel extension, from the visual studio marketplace, was able to do this.

I also followed the advice of this post and created a file named .vscode/settings.json which contains

"emmet.includeLanguages": {
    "javascript": "javascriptreact"
},
"emmet.triggerExpansionOnTab": true
"emmet.includeLanguages": {
    "javascript": "html"
}

And this also had no effect.

like image 584
Sam Avatar asked Mar 08 '19 11:03

Sam


People also ask

How do you autocomplete HTML tags in react VSCode?

Just go to settings in vscode. You can see a search bar in setting type emmet. Scroll down, there is an option include language. Click on the add item button in include language.


2 Answers

VS Code

It worked on me. Are you sure you did everything right?

Emmet HTML

{
    "emmet.includeLanguages": {
        "javascript": "html"
     }
}

Can you remove the file and add it again? Just what I threw.

Source :

https://code.visualstudio.com/docs/languages/html

https://docs.emmet.io/cheat-sheet/

like image 123
Talhakaanozkan Avatar answered Oct 20 '22 13:10

Talhakaanozkan


javascript - Support for script type="text/babel" in Visual Studio Code

Maybe you want look at, this issue is previously discussed and resolved. As for my thoughts, VS Code using regex for intellisense and when I looked at these regex codes, I was already seeing babel but it didn't work in a meaningless way for me too.

like image 1
Abdulsamet Kurt Avatar answered Oct 20 '22 13:10

Abdulsamet Kurt