How to set windows and phpstrom to work with paths like '@/...'?

Question

JavaScript

In a nuxt project, I use the following paths to import components:

components: {
      ContainerElement: () => import("@/components/grid/ContainerElement"),

On Mac, there are no problems navigating through them, how to fix this problem on windows?

Answer 1

Create jsconfig and/or tsconfig file with aliases

// jsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/common/*": [
        "../src/common/*"
      ],
      "@/components/*": [
        "../src/common/components/*"
      ],
      "@/utils/*": [
        "../src/common/utils/*"
      ],
      "@/modules/*": [
        "../src/modules/*"
      ]
    }
  }
}

and something like this

/ tsconfig.json
{
  "extends": "../tsconfig.json",
  "include": [
    "./**/*.ts*"
  ],
  "exclude": [],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/common/*": [
        "../src/common/*"
      ],
      "@/components/*": [
        "../src/common/components/*"
      ],
      "@/utils/*": [
        "../src/common/utils/*"
      ],
      "@/modules/*": [
        "../src/modules/*"
      ]
    },
    "types": [
      "cypress"
    ],
    "sourceMap": false,
    "isolatedModules": true
  }
}

UPD:
you can also create a phpStorm.config.js file in the root of the project
in which to write:

System.config({
  "paths": {
    "components/*": "./src/components/*",
    "core/*": "./src/core/*",
    // алиасы и тд
  }
});

upd2:
About config files in a little more detail in the article: https://lmichelin.fr/vscode-intellisense-jsconfig-...