eslint error with vue typescript files

[zyCwind]

1. npm create vue@latest
2. enable typescript
3. enable eslint

as i used 'explicit type converion' in script block, something like:

<script lang="ts">
...
a = <SomeType>JSON.parse('...')
</script>

'npm run build' failed when the bundler is webpack, eslint raised a parser error which interrupted packaging. that is because scripts in vue files are treated as 'jsx/tsx'.

when the bundler is vite, this problem dose not affect bundleing progress, but the project still have linting problems. i added the following eslint overrides and solved this:

overrides: [
  {
    files: [
      '*.vue'
    ],
    parserOptions: {
      ecmaFeatures: {
        jsx: false
      }
    }
  }
]

my suggest is adding another option of 'lang' attribute 'tsx' of script tag in future version.

[cexbrayat]

Hi @zyCwind

You should use a type assertion in TS files as mentioned in the TS docs https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#type-assertions const a = JSON.parse(...) as SomeType. If you want to use JSX, then you have to enable the JSX support in create-vue.