create a Vue3/TypeScript project by running yarn create vite and selecting Vue and TypeScript
add and configure ESLint, including this plugin
modify components/HelloWorld.vue to contain the code below:
<script setup lang="ts">
import { Ref, ref } from 'vue'
defineProps<{ msg: string }>()
const count: Ref<number | undefined> = ref(0)
function incrementCount() {
const c = <number>count.value // <- type assertion is here
count.value = c + 1
}
</script>
Run yarn eslint --ext .js,.ts,.vue src
Expected
Code lints without errors; or, at least, ESLint is able to parse the Vue component source file.
Actual
Closing brace of the incrementCount() function produces the following parsing error:
/Users/david/Work/Scratch/ts-test/src/components/HelloWorld.vue
12:0 error Parsing error: Unexpected token. Did you mean `{'}'}` or `}`?
✖ 1 problem (1 error, 0 warnings)
Workaround
in .eslintrc.cjs, add ecmaFeatures: { jsx: false } to parserOptions
It's not clear to me why JSX support needs to be enabled by default for Vue projects, which I think tend not to use it that often. But at least this issue documents the workaround.
Steps to reproduce:
Clone dmolesUC/ts-test for a complete reproducible example, or:
yarn create vite
and selectingVue
andTypeScript
modify
components/HelloWorld.vue
to contain the code below:Run
yarn eslint --ext .js,.ts,.vue src
Expected
Actual
Closing brace of the
incrementCount()
function produces the following parsing error:Workaround
.eslintrc.cjs
, addecmaFeatures: { jsx: false }
toparserOptions
Note
I originally filed this as https://github.com/vuejs/vue-eslint-parser/issues/177, but @ota-meshi identified the issue as being the
jsx
config ineslint-config-typescript/index.js
.It's not clear to me why JSX support needs to be enabled by default for Vue projects, which I think tend not to use it that often. But at least this issue documents the workaround.