Editor does not understand typescript vue3 single file components

[stam]

🐛 bug report

Preflight Checklist

• [x] I have read the Contributing Guidelines for this project.
• [x] I agree to follow the Code of Conduct that this project adheres to.
• [x] I have searched the issue tracker for an issue that matches the one I want to file, without success.

Description of the problem

CodeSandbox seems to think Vue single file components are JSX. Open components/App.vue of my example and eslint complains about the template tag: adjacent elements must be wrapped in an enclosing tag

This is valid vue: https://vuejs.org/guide/scaling-up/sfc.html

How has this issue affected you? What are you trying to accomplish?

It's impossible to use CodeSandbox to demonstrate Vue typescript issues.

To Reproduce

There is no default Vue+typescript setup according to the recommended guide so we make your own: Create a Node HTTP sandbox

cd ..
npm init vue@latest // leave everything standard except set typescript and eslint to yes
mv vue-project/* sandbox/
mv vue-project/eslintrc.cjs sandbox/

Restart it and add the following sandbox.config.json: { "infiniteLoopProtection": true, "hardReloadOnChange": false, "view": "browser", "container": { "node": "12", "port": 3000, "startScript": "custom" } }

Now open App.vue or HelloWorld.vue and admire the errors

Link to sandbox: https://codesandbox.io/s/vite-vue-3-0r2hgb

Your Environment

Software	Name/Version
Сodesandbox	latest?
Browser	Chrome
Operating System	Windows 10