ESLintPlugin TS 和 JS 混合：parent.eval 中的错误不是函数

Question

更新

This configuration works fine, if you remove the ESLintPlugin 来自 webpack.mix.js。现在的问题是：哪里出错了，为什么？

我正在尝试在现有 Vue 项目上获得 TypeScript 支持。我想逐步更新，保留所有 JavaScript 代码并在所有新内容或需要重构的地方使用 TypeScript。

目前，我遇到了一个奇怪的问题。运行 npm run hot:

$ npm run hot

> hot
> mix watch --hot

i Compiling Mix
DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

// Some more warning from vuetify. They are not important right now.

√ Mix: Compiled with some errors in 7.29s
ERROR in parent.eval is not a function
Occurred while linting C:\fakepath\ts-test\resources\js\app.ts:7

webpack compiled with 1 error
No issues found.

很遗憾，我找不到任何关于此错误的信息 ERROR in parent.eval is not a function。

更奇怪的是，每次我重写 tsconfig.json 它都能正常工作：

i Compiling Mix


   Laravel Mix v6.0.31


✔ Compiled Successfully in 201ms
┌───────────────────────────────────┬───────────┐
│                              File │ Size      │
├───────────────────────────────────┼───────────┤
│                    /some/files.js │  X.X KiB  │
└───────────────────────────────────┴───────────┘
√ Mix: Compiled successfully in 252.23ms
webpack compiled successfully
Issues checking in progress...
No issues found.

因为这个问题涉及的配置文件太多，为了合理post这里，我创建了一个小的GitHub项目：

https://github.com/Darkproduct/vue2-ts-test

要查看的文件可能是：

一些注意事项：

我必须在 App.vue line 51 中使用 // @ts-ignore，因为 eslint 正在尝试对 vue 文件进行类型检查，即使脚本标签不是 lang="ts".

ERROR in resources/js/views/App.vue:51:12
TS2339: Property '$vuetify' does not exist on type '{ changeTheme(): void; }'.
  49 |       // });
  50 |
> 51 |       this.$vuetify.theme.dark = !this.$vuetify.theme.dark;
     |            ^^^^^^^^
  52 |     }
  53 |   },

我认为这个文件不应该从 TS 验证，因为我的 .eslintrc.js。为什么这不能按意图工作？（文档 vue-eslint-parser#parseroptionsparser）

类型验证在 testts.vue. I set the props in App.vue, and from my understanding at least one of them, if not both, have to raise a type error for the testts.vue 组件中不起作用。

来自 testts.vue:

props: {
    testprop: {
        type: Object as PropType<TestType>,
        required: true
    }
},

在App.vue中：

<TestTS :testprop="{name: 'testts', id: '2'}"></TestTS>
<TestTS :testprop="{blub: 'bla', id: '3'}"></TestTS>

和testtype.ts

export default interface TestType {
  name: string;
  id: number;
}

Answer 1

我将问题追踪到 node_modules/prettier/third-party.js 第 94 行。

然后我发现，我安装的是 prettier@2.0.0 而不是最新版本。

最后我在 this commit 中的 package.json 中更改了这个：

-       "prettier": "2.0.0",
+       "prettier": "^2.4.1",

这修复了错误：parent.eval 不是函数

ESLintPlugin TS 和 JS 混合：parent.eval 中的错误不是函数

ESLintPlugin TS and JS Hybrid: ERROR in parent.eval is not a function

typescript

eslint

webpack

vuejs2

laravel-mix

更新

一些注意事项：