VSCode eslint does not pickup tsconfig paths

2 min read 06-10-2024

VSCode eslint does not pickup tsconfig paths

VS Code ESLint Not Picking Up tsconfig Paths: A Common Issue and Solution

Introduction

You've set up your TypeScript project with tsconfig.json and meticulously defined your paths for easy module management. But when you open your project in VS Code, ESLint seems oblivious to these paths, resulting in a barrage of "Cannot find module" errors. This is a common frustration for developers using VS Code and ESLint together. Let's understand why this happens and how to resolve it.

The Scenario

Imagine you have a simple TypeScript project with a tsconfig.json file containing the following paths configuration:

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "components/*": ["components/*"],
      "utils/*": ["utils/*"]
    }
  }
}

In your src directory, you have a components folder with a MyComponent.tsx file and a utils folder with a helper.ts file. In your main.ts file, you try to import these modules:

import MyComponent from "components/MyComponent";
import { someHelperFunction } from "utils/helper";

While TypeScript compiles this code successfully, ESLint throws errors, complaining it cannot find the modules.

Understanding the Problem

ESLint, by default, analyzes your code based on its internal module resolution. It doesn't directly interact with tsconfig.json or its path mappings. This leads to the mismatch: TypeScript can understand your paths, while ESLint struggles.

Solutions

Here are the most effective ways to resolve this issue:

1. ESLint Plugin: eslint-plugin-import

Install the plugin: npm install eslint-plugin-import

Configure it in your ESLint configuration file (.eslintrc.js or .eslintrc.json):

{
  "plugins": ["import"],
  "settings": {
    "import/resolver": {
      "typescript": {
        "project": "./tsconfig.json" 
      }
    }
  }
}

This plugin provides a typescript resolver that allows ESLint to leverage your tsconfig.json's paths.

2. VS Code Extension: ESLint

Install the extension from the VS Code marketplace.
Ensure you have the eslint.validate setting enabled in your VS Code workspace settings (usually settings.json):
```
{
  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"]
}
```

By enabling this setting, VS Code will automatically integrate ESLint and benefit from the plugin's configuration (if you followed step 1).

3. Using moduleResolution in tsconfig.json

While not the primary solution, you can add the moduleResolution setting to your tsconfig.json for a direct approach.

{
  "compilerOptions": {
    "moduleResolution": "node",
    "baseUrl": "./src",
    "paths": {
      "components/*": ["components/*"],
      "utils/*": ["utils/*"]
    }
  }
}

This setting tells TypeScript to resolve modules using Node.js's module resolution, potentially enabling ESLint to find the modules. However, this might not always work as intended and could create compatibility issues with certain package managers.

Conclusion

Understanding the relationship between ESLint, tsconfig.json, and VS Code is crucial for a smooth development workflow. By utilizing the eslint-plugin-import plugin and configuring the VS Code ESLint extension correctly, you can eliminate the frustration of ESLint not recognizing your tsconfig.json paths. This approach allows you to benefit from both TypeScript's powerful type system and ESLint's code quality checks for a more productive development experience.

Additional Resources

ESLint Plugin Import Documentation: https://www.npmjs.com/package/eslint-plugin-import
VS Code ESLint Extension Documentation: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
TypeScript Compiler Options: https://www.typescriptlang.org/docs/handbook/compiler-options.html