eslint treats my *.ts files as javascript in a project that also has vue

Question

I am developing a web project using typescript and vue. After reading the documentation for typescript-eslint and eslint-plugin-vue, I've solved the following eslint configuration:

module.exports = {
  root: true,
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    "eslint:recommended",
    "plugin:vue/vue3-essential",
    "plugin:@typescript-eslint/recommended",
    "plugin:@typescript-eslint/recommended-requiring-type-checking",
    "prettier",
  ],
  parser: "vue-eslint-parser",
  parserOptions: {
    parser: "@typescript-eslint/parser",
    project: ["./tsconfig.json"],
    tsconfigRootDir: __dirname,
    extraFileExtensions: [".vue"],
  },
  overrides: [],
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module",
  },
  plugins: ["vue", "@typescript-eslint"],
};

My vue files are parsed correctly, but my ts files have unreasonable lint errors. It seems they are checked against javascript syntax. As shown below:

If I remove parserOptions and change the parser to @typescript-eslint/parser, the ts file lints correctly, but the lint of the vue file breaks .

Does anyone know?

Answer 1

As far as I know, you have two options:

1. Change parser: "vue-eslint-parser" to @typescript-eslint/parser

2. Add overrides for .ts files and set the parser to @typescript-eslint/parser

Answer 2

I guess I'm too tired or too old, anyway, the problem is that there are two parserOptions sections in the same lint file. This is the final working version:

module.exports = {
  root: true,
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    "eslint:recommended",
    "plugin:vue/vue3-essential",
    "plugin:@typescript-eslint/recommended",
    "plugin:@typescript-eslint/recommended-requiring-type-checking",
    "prettier",
  ],
  parser: "vue-eslint-parser",
  parserOptions: {
    parser: "@typescript-eslint/parser",
    project: ["./tsconfig.json"],
    ecmaVersion: "latest",
    sourceType: "module",
    extraFileExtensions: [".vue"],
  },
//  parserOptions: {
//    ecmaVersion: "latest",
//    sourceType: "module",
//  },
  plugins: ["vue", "@typescript-eslint"],
};