Búsqueda de sitios web

javascript - Intellisense de VSCode no resuelve las importaciones con rutas absolutas


Estoy manteniendo una aplicación de Electron usando Typescript. Estoy intentando implementar rutas absolutas para importaciones en mi proyecto.

Entiendo que la forma en que normalmente resolverías esto sería editando la configuración de webpack, pero como estoy usando react CRA, y idealmente no quiero "ejectuar" y gestionar las cosas yo mismo solo por este problema, he estado buscando otras formas de resolver el problema.

La intención es pasar de algo como esto:

import * as Constants for '../../../../types/Constants'

a :

import * as Constants from '@types/Constants'

Después de leer muchos artículos, estos son los pasos que "creo" que debería estar tomando:

Hasta ahora, lo que he hecho es:

  1. Instalé 'react-app-rewired' a través de NPM y configuré el archivo config-overrides.js (para permitir que las importaciones absolutas funcionen).
  2. Actualicé el archivo tsconfig.json (para permitir que VSCode "vea" las importaciones absolutas) (EDICIÓN: La mayoría de los pasos que he probado provienen de la ruta absoluta con react, react-app-rewire y typescript)
//~config-overrides.js
module.exports = function override(config, env) {
    config.resolve = {
        ...config.resolve,
        alias: {
            ...config.resolve.alias,
            '@types': path.resolve(__dirname, 'src/types')
        }
    }

    return config;

Hacer un console.log() de la configuración muestra que el campo alias se estableció correctamente. Esto permite que el sistema sea consciente de las importaciones a través de sus rutas absolutas. Importar a través de la ruta @types funciona como se esperaba y puedo compilar, iniciar e interactuar con mi aplicación sin problemas.

El problema surge con VSCode Intellisense, que marca todas las importaciones absolutas con el "subrayado rojo" y por lo tanto bloquea cosas como el autocompletado y la posibilidad de navegar a las definiciones de funciones/campos. Intenté resolver esto actualizando mi archivo tsconfig.json de la siguiente manera (específicamente agregando la opción "extends" y el archivo referenciado "tsconfig.paths.json"):

// ~tsconfig.json
{
  "extends": "./tsconfig.paths.json",
  "compilerOptions": {
    "target": "ES2015",
    "module": "esnext",
    "allowJs": true,
    "sourceMap": true,
    "outDir": "./build",
    "strict": true,
    "noImplicitAny": false,
    "esModuleInterop": true,
    "preserveSymlinks": true,
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "skipLibCheck": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "moduleResolution": "node",
    "isolatedModules": true,
    "noEmit": true,
    "resolveJsonModule": true,
    "jsx": "preserve"
  },
  "include": [
    "src/backend/**/*.ts",
    "src/backend/**/*.tsx",
    "src/backend/**/*.js",
    "src/electron.ts"
  ]
}

// ~tsconfig.paths.json
{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "@types/*": ["./src/types/*"]
        }
    }
}

Problema posible: Cuando compilo, recibo los siguientes dos mensajes de error, y no sé qué hacer con ellos:

  • compilerOptions.baseUrl no debe establecerse (las importaciones absolutas no están soportadas (todavía))
  • compilerOptions.paths no debe configurarse (no se admiten importaciones con alias)

EDICIÓN: Tengo un archivo TSLint en mi proyecto. ¿Necesito hacer alguna actualización en él para que esto funcione?