带有子文件夹的 typescript 项目中的 eslint 配置

Question

我正在使用 vscode，我有一个目录结构的项目：

'App' 目录 --> 包含 2 个子文件夹 'frontend' 和 'backend'，两者都有 eslint 配置。

在前端文件夹中，我有：

eslintrc.json ：

{
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "project": "./tsconfig.json"
  },
  "plugins": ["@typescript-eslint", "unused-imports"],
  // rules...
}

tsconfig.json ：

 {
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/components/*": ["src/components/*"],
      "@/config/*": ["src/config/*"],
      "@/hooks/*": ["src/hooks/*"],
      "@/utils/*": ["src/utils/*"],
      "@/store/*": ["src/store/*"],
      "@/styles/*": ["src/styles/*"]
    },
    "target": "es6",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "checkJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "noErrorTruncation": true
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "**/*.js", "**/*.jsx"],
  "exclude": ["node_modules"]
}

每当我使用别名导入时，例如"@/hooks/useToggle"

我收到一个eslint错误

Unable to resolve path to module '@/hooks/useToggle'

当我在 vscode 中单独打开frontend文件夹时，错误消失了。

能否请你帮忙？

Answer 1

这个问题可以通过在 vscode 工作空间设置中添加eslint.workingDirectories配置来指向所有需要 linting 的顶级子文件夹来解决。

在您的情况下，请尝试将其添加到.vscode/settings.json

{
  ...

  "eslint.workingDirectories": ["frontend","backend"]
}