Eslint 9 with typescript and vue error on defineEmits

Question

after upgrading the dependencies of my astro blog, I've stumbled across a strange problem with the newest eslint version and typescript + vue.

I followed the official docs of eslint, tslint, eslint-plugin-vue and eslint-config-prettier, however something is strange and I don't know why.

Eslint is telling me that this codeblock has a parsing error Parsing error: Unexpected token, however this should be ok (see the official vue docs)

<script setup lang="ts">
const emit = defineEmits<{
  (e: 'change', id: number): void
  (e: 'update', value: string): void
}>()
</script>

I've provided a minimal example https://github.com/Theiaz/eslint-defineemits-bug for the error. Seems like the config for vue is not loaded correctly. What am I missing here?

{
  "name": "typescript-eslint-vue",
  "version": "0.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "check": "vue-tsc --noEmit && tsc --noEmit ",
    "lint": "eslint --fix src"
  },
  "devDependencies": {
    "@eslint/js": "^9.13.0",
    "@types/eslint__js": "^8.42.3",
    "@typescript-eslint/parser": "^8.11.0",
    "eslint": "^9.13.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-vue": "^9.10.0",
    "prettier": "^3.3.3",
    "typescript": "^5.6.3",
    "typescript-eslint": "^8.11.0",
    "vue": "^3.5.12",
    "vue-tsc": "^2.1.6"
  },
  "dependencies": {
    "@vue/tsconfig": "^0.5.1",
    "@vueuse/core": "^11.1.0"
  }
}

import eslint from "@eslint/js";
import prettierConfig from "eslint-config-prettier";
import pluginVue from "eslint-plugin-vue";
import tseslint from "typescript-eslint";

export default tseslint.config(
  eslint.configs.recommended,
  ...tseslint.configs.recommended,
  ...pluginVue.configs["flat/recommended"],
  prettierConfig,
  {
    files: ["**/*.ts", "**/*.vue"],
    rules: {},
  }
);

Please, add package.json and eslint config to the question, it needs to be understandable without the need to navigate to the repo — Estus Flask
– Estus Flask, Commented Oct 24, 2024 at 14:48

Estus Flask · Accepted Answer · 2024-10-24 15:11:01Z

1

The current config misses the configuration of Vue ELint parser, as suggested in the documentation:

import vueParser from 'vue-eslint-parser';

export default tseslint.config(
  eslint.configs.recommended,
  ...tseslint.configs.recommended,
  ...pluginVue.configs["flat/recommended"],
  prettierConfig,
  {
    files: ["**/*.ts", "**/*.vue"],
    rules: {},
    languageOptions: {
      parser: vueParser,
      parserOptions: {
        parser: {
          ts: tseslint.parser,
  ...

@vue/eslint-config-typescript can be used to correctly configure ESlint to work with TypeScript and Vue SFC:

import pluginVue from "eslint-plugin-vue";
import vueTsEslintConfig from "@vue/eslint-config-typescript";

export default [
  ...pluginVue.configs["flat/essential"],
  ...vueTsEslintConfig(),
  // Add prettier or else
]

This eliminates the need to use typescript-eslint directly and provides sensible defaults.

edited Oct 24, 2024 at 15:11

answered Oct 24, 2024 at 14:56

Estus Flask

226k79 gold badges478 silver badges620 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Theiaz Over a year ago

I've seen this already, however the docs of it says "This config is specifically designed to be used by create-vue setups and is not meant for outside use". So i think there should be another way. Especially if i want to use typescript together with other environments in my astro site?

Estus Flask Over a year ago

I believe this is a disclaimer, there's nothing that ties it to create-vue besides it's used there. I updated the post for clarity

Theiaz Over a year ago

Thanks for your response, this does solve my problem!

Collectives™ on Stack Overflow

Eslint 9 with typescript and vue error on defineEmits

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related