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

Question

I am using vscode, I have a project with a directory structure:

'App' directory --> contains 2 subfolders 'frontend' and 'backend', both have eslint configs.

In the frontend folder I have:

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"]
}

whenever I import using aliases for example "@/hooks/useToggle"

I get an eslint error

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

the error goes away when I open the frontend folder alone in vscode.

Could you please help?

Answer 1

This problem can be solved by adding eslint.workingDirectories config in vscode workspace settings to point to all top-level subfolders that required linting.

In your case, try adding this to .vscode/settings.json

{
  ...

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