如何强制使用平面配置的 ESLint 遵守 tsconfig (useDefineForClassFields) 发现的规则

Question

我正在寻找使 ESLint 的行为与 tsconfig.json 中的规则检查相同的方法

代码：

export class SomePage  {
  commentsButton = this.page.getByTestId('open-comments');

  constructor(private page: Page) {}
};

我的 tsconfig.json：

  {
    "compilerOptions": {
      "target": "ESNext",
      "useDefineForClassFields": true, // Default value form ES2022, just for ref 
      "module": "CommonJS",
      "sourceMap": true,
      "baseUrl": ".",
    }
  }

并且在VSCode中明显发现：

https://i.imgur.com/s7volAD.png

但是 ESLint 不会发现这个问题。这是配置 eslint.config.mjs:

import pluginJs from '@eslint/js';
import globals from 'globals';
import tseslint from 'typescript-eslint';

export default [
  { files: ['**/*.ts'] },
  {
    languageOptions: {
      globals: globals.node,
    },
  },
  pluginJs.configs.recommended,
  ...tseslint.configs.recommended,
];

最后这是 ES2022 规则，为什么 ESLint 不遵守？

也许将 tsconfig 导入 ESLint 配置有意义？

Answer 1

所以发生的情况是，你并没有真正让它检查 TS 的东西，你只是让它按照你给出的规则进行 lint，但它不能以这种方式转译。

如果您希望它实际执行代码检查而不仅仅是转译：

export default tseslint.config(
    ...tseslint.configs.recommended,
    pluginJs.configs.recommended,
    {
        languageOptions: {
            globals: globals.node,
            parserOptions: {
                projectService: true,
                project: "./tsconfig.json",
                tsconfigRootDir: import.meta.url,
            },
        },
    }
);

结果：

  4:23  error  'page' is defined but never used  no-unused-vars
  4:29  error  'Page' is not defined             no-undef