eslint 未检测到的 TS 错误

Question

我有一个使用打字稿的 nextJS 应用程序。我使用 VSCode 进行开发。我注意到当我打开一个有错误的文件时 VSCode 会按预期显示 TS 错误，但 eslint 不会。

例如，这是我的 VSCode 错误：

但这是我的 linting 结果：

▶ yarn lint

yarn run v1.22.10
$ eslint .
(node:83388) ExperimentalWarning: Conditional exports is an experimental feature. This feature could change at any time
(node:83388) ExperimentalWarning: Package name self resolution is an experimental feature. This feature could change at any time
✨  Done in 5.26s.

以下是一些可能有助于确定问题的文件：

.eslintrc.js:

module.exports = {
  plugins: [
    '@typescript-eslint',
  ],
  extends: [
    'airbnb-typescript',
    'airbnb/hooks',
    'plugin:@typescript-eslint/recommended',
    'plugin:@typescript-eslint/recommended-requiring-type-checking',
  ],
  ignorePatterns: [
    'app.js',
    '.eslintrc.js',
    'jest.config.js',
    'babel.config.js',
    '/plugins',
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    project: './tsconfig.json',
  },
  rules: {
    'react/require-default-props': ['warn', { ignoreFunctionalComponents: true }],
  },
  overrides: [
    {
      files: ['*.spec.tsx', '*.stories.tsx'],
      rules: {
        'import/no-extraneous-dependencies': 'off',
      }
    }
  ]
};

tsconfig.json:

{
  "compilerOptions": {
    "target": "ES2016",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve"
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

bable.config.js:

const path = require('path');

module.exports = {
  presets: [
    [
      'next/babel',
      {
        'styled-jsx': {
          plugins: [path.join(__dirname, '/plugins/styled-jsx-plugin-sass.js')],
        }
      }
    ]
  ],
  plugins: ['inline-react-svg']
}

package.json 脚本：

{
"scripts": {
    "preinstall": "npx only-allow npm",
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "storybook": "start-storybook -s ./public -p 6006",
    "build-storybook": "build-storybook",
    "lint": "eslint .",
    "test": "jest"
  },
}

我非常乐意提供任何进一步的信息来帮助解决问题。提前致谢！

Answer 1

经过更多研究，我发现这个 github 问题具有相同的问题：https://github.com/typescript-eslint/typescript-eslint/issues/352

其中答案是：

we purposely do not care about errors that should arise as a result of type checking errors. We only care that the code is syntactically valid (i.e. can be parsed without errors), not about whether it's semantically valid (i.e. don't care if it is type sound)

If you want your code to be typechecked - please use tsc (or one of the tools built for your specific build chain).

所以我的解决方案是将我的 lint 脚本编辑为：

{
  "scripts": {
    "lint": "tsc --noEmit && eslint .",
  },
}

--noEmit 标志告诉命令不生成任何文件。

eslint 未检测到的 TS 错误

TS errors not detected by eslint

typescript

eslint

visual-studio-code

next.js

typescript-eslint