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

Posted 2023-02-16

【中文标题】ESLintPlugin TS 和 JS 混合：parent.eval 中的错误不是函数

【英文标题】：ESLintPlugin TS and JS Hybrid: ERROR in parent.eval is not a function

【发布时间】：2021-11-09 17:08:31

【问题描述】：

更新

This configuration 工作正常，如果您从 webpack.mix.js 中删除 ESLintPlugin。现在的问题是：哪里出了问题，为什么？

---

我正在尝试在现有的 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.

由于这个问题涉及的配置文件太多，为了合理地在这里发布，我创建了一个小型 GitHub 项目：

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

要查看的文件可能是：

webpack.mix.js tsconfig.json .eslintrc.js

---

注意事项：

我必须在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 中不起作用。我将 props 设置在 App.vue 中，据我了解，如果不是两者，至少其中一个必须为 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;

【参考方案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 不是函数