reactjs - TS-konfiguration med nästlad alias för absolut sökväg fungerar inte

Jag försöker ställa in sökvägsalias i min tsconfig.json för en React-app som paketeras med Vite. Här är den relevanta delen av min tsconfig.json:

{
  "compilerOptions": {
    "baseUrl": ".",
    ...
    "paths": {
      "*": ["src/*", "node_modules/*"],
      "components/*": ["src/components/*"],
      "containers/*": ["src/containers/*"],
      "pages/*": ["src/constants/*"],
      "store/*": ["src/store/*"],
      "types/*": ["src/types/*"],
      "NestedFolder/*": [
        "src/components/NestedFolder/*"
      ],
    }
  },
  "include": ["src/**/*", "*"]
}

Det enda problemet är med NestedFolder. När jag importerar på detta sätt fungerar allt:

import { ComponentName } from "components/NestedFolder/types";

Men den nästlade aliasen misslyckas:

import { ComponentName } from "NestedFolder/types";

// error 
EslintPluginImportResolveError: typescript with invalid interface loaded as resolver
Occurred while linting .../src/components/NestedFolder/canvas/index.ts:1
Rule: "import/namespace"

// error on hover in VS Code
Unable to resolve path to module 'NestedFolder/types'.eslintimport/no-unresolved

Jag skulle vilja göra inbäddade komponenter eftersom jag har flera mappar som är inbäddade 3-4 nivåer och det skulle vara trevligt att ha en renare vy av mina imports. Finns det ett sätt att göra detta?

Svar #1

Du behöver installera vite-tsconfig-paths-pluginen för att ställa in sökvägsalias med TypeScript och Vite. Om inget ändras och du använder VSCode, se till att starta om TypeScript-servern genom att trycka på Ctrl+Shift+P eller Cmd+Shift+P, skriva restart och sedan välja kommandot: TypeScript: Restart TS server

Svar #2

Det accepterade svaret fungerade inte för mig. Jag upptäckte att jag var tvungen att installera följande paket:

npm i eslint-plugin-import eslint-import-resolver-alias eslint-import-resolver-typescript

Och lägg sedan till följande konfigurationer, där den viktiga ingrediensen är starkt definierade aliasvägar:

const path = require('path');

module.exports = {
  root: true, // important to ensure nested eslint scoping in monorepos
  plugins: ['@typescript-eslint', 'import'],
  extends: [
    'airbnb-typescript-prettier',
    'plugin:import/typescript'
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    project: path.join(__dirname, './tsconfig.json'),
    tsconfigRootDir: './src',
  },
  settings: {
    "import/parsers": { // add this definition
      "@typescript-eslint/parser": [".ts", ".tsx"],
    },
    'import/resolver': {
      alias: {
        map: [
          // define each alias here
          ['components', path.join(__dirname, './src/components')],
        ],
        extensions: ['.ts', '.tsx', '.js', '.jsx', '.json']
      },
      typescript: {
        project: path.join(__dirname, './tsconfig.json'),
      },
    },
  },
}

Jag tror att detta kan förbättras genom att harmonisera aliasen mellan .eslintrc och vite.config så att alias bara behöver definieras en gång, med en taktik som den som definieras här: https://stackoverflow.com/a/68908814/14198287

Relaterade artiklar