vue-eslint-parser and typescript-eslint problems

Reason: https://github.com/typescript-eslint/typescript-eslint/issues/2865#issuecomment-742942987

Hi, I’m using vue-eslint-parser and typescript-eslint in company project. At the same time, I also help to contribute typescript-eslint project for fixing vue problems.

This problems are only happens when using type rules in typescript-eslint. You need to add parserOptions.project in project to enable it. https://github.com/typescript-eslint/typescript-eslint/blob/master/docs/getting-started/linting/TYPED_LINTING.md

There are two main issues:

performance issue

issues: https://github.com/vuejs/vue-eslint-parser/issues/65, https://github.com/typescript-eslint/typescript-eslint/issues/1180

The problem is that vue-eslint-parser is designed with the AST not type information. The vue-eslint-parser will split code frame from template to @typescript-eslint/parser. https://github.com/typescript-eslint/typescript-eslint/issues/1180#issuecomment-552297706 Typescript program need to parse full project for generate type information. When parsing code frame, typescript program will reparse file AST and rebuild type information in project. The vue-eslint-parser will pass more code frames and same file path in single Vue SFC.

Possible solutions:

1. Ignore parserOptions.project to close get type information when pass code frame.
2. Try to use ESLint processors, like Svelte. Ref: https://github.com/typescript-eslint/typescript-eslint/issues/1180#issuecomment-553007193

[no-unsafe-*] rules

issues: https://github.com/typescript-eslint/typescript-eslint/issues/2865

Strictly speaking, it isn’t a problem with this project. The typescript program can’t parse Vue SFC file directly.

You may think it’s strange, but why is it working now? Because @typescript-eslint/parser will prioritize the content delivered from ESLint. Typescript program will update by ESLint content not same as typescript program read. But this problem is happens when ESLint not send file content and content from typescript program reading. Example:

// App.vue
import HelloWorld from './components/HelloWorld.vue' // <- typescript program can't parse it. because it will read including template and style.

export default {
  name: 'App',
  components: {
    HelloWorld // <- so type information is `any`
  }
}

This problem will also have in <script setup> RFC.

Possible solutions:

1. Override HelloWorld.vue content.
2. Mock a HelloWorld.vue.ts file.

Maybe we need a common project for hacking typescript program.

Thanks for watching. Have a good day!

[ota-meshi]

I changed parserOptions.parser to allow multiple parsers. If someone has an environment where they can try out performance issues, can you use the following configuration to see if it improves performance and share the results?

{
    "parser": "vue-eslint-parser",
    "parserOptions": {
        "parser": {
            "ts": "@typescript-eslint/parser",
            "<template>": "espree"
        }
    }
}

If performance improves, I think it’s a useful workaround for many.

[Darkproduct]

I’m currently struggling to get linting to work on my Laravel - Vue2 project with JavaScript and TypeScript. For debugging I created this small project, but I stumble from one issue to another.

First it seemed like I can’t get the fragmented parser option, introduced in https://github.com/typescript-eslint/typescript-eslint/issues/1180 to work, then I find typescript-eslint @TYPED_LINTING.md and now I’m stuck at:

$ eslint --config resources/js/.eslintrc.js --fix resources/js --ext .vue,.js,.ts

C:\fakepath\ts-test\resources\js\.eslintrc.js
  0:0  error  Parsing error: "parserOptions.project" has been set for @typescript-eslint/parser.
The file does not match your project config: resources\js\.eslintrc.js.
The file must be included in at least one of the projects provided

I’ve added those files to the tsconfig.json and even tried creating a tsconfig.eslint.json. But this doesn’t work.

It it not at all clear to me, how @typescript-eslint/parser and this project should be configured to get proper linting.