Yin YangPutzi San
Abstract digital art depicting the theme of coding and software development efficiency, featuring a blend of geometric shapes, coding symbols, and flowing lines in shades of blue, green, and gray, symbolizing the integration of technology and information flow in the context of optimizing auto import suggestions in IntelliJ for TypeScript monorepos.

Optimizing Auto Import Suggestions in IntelliJ for TypeScript Monorepos

Working in a monorepo environment using TypeScript can sometimes lead to less-than-ideal auto-import suggestions in IntelliJ IDEA. However, with a few tweaks in your settings and tsconfig, you can significantly enhance your development experience. Here are three key steps to optimize auto-import suggestions in IntelliJ for TypeScript monorepos:

1. Adjusting tsconfig.json for React 17+ Projects

For projects using React 17 or newer, the explicit import of React is no longer necessary in JSX files. To align IntelliJ's behavior with this change, modify the tsconfig.json file by setting "jsx": "react-jsx". This adjustment informs TypeScript to use the new JSX transform and prevents the IDE from suggesting unnecessary React imports. This approach is discussed in more detail in a GitHub issue on TypeScript's repository.

2. Disabling the "Missing JSX Namespace" Inspection

In some scenarios, IntelliJ IDEA may incorrectly report a "missing JSX namespace" error. To resolve this, you can disable this specific inspection in IntelliJ. Navigate to Settings > Editor > Inspections > JavaScript and TypeScript > JSX issues > Missing JSX namespace, and uncheck the box to disable this inspection. This will prevent IntelliJ from flagging valid JSX code as erroneous.

3. Configuring Import Suggestions for Monorepos

IntelliJ's auto-import feature may sometimes suggest imports from undesired locations like the src or dist directories, or from files with .js extensions. To refine this behavior:

  • Go to Settings > Editor > Code Style > JavaScript > Imports and Settings > Editor > Code Style > TypeScript > Imports.
  • In the "Do not import exactly from" field, add patterns like @acme/*/src/**, @acme/*/dist/**, and @acme/**/*.js, replacing acme with your project's package name.

These settings prevent IntelliJ from suggesting imports from specific directories or file types, which is particularly useful in a monorepo setup where imports from src or dist directories, or direct JavaScript file imports, can clutter the codebase.