Q: How to support vscode resolution?

[fritx]

microsoft/vscode#14907

A jsconfig.json won't work for me, any idea?

[fritx]

Sorry for the duplication: #9

[ilearnio]

You can try to use addAliases method, not sure if it will work though.
If you are working on a plugin for vscode then it is probably a bad idea to use module-alias since it modifies require behavior globally.

[Rush]

Same question

[ilearnio]

@Rush Have you tried to use moduleAlias.addAlias('@alias', __dirname + '/path')?

[Rush]

No but I know it can't work. Also, I'm working on a project with a pre existing config.

[ilearnio]

When in Node and when having the aliases set in package.json, it also runs addAlias behind the scenes.

No but I know it can't work

It can not work in vscode because there might be another require/CommonJS implementation, never tried, but you can try to do as I suggested

[hozjanmarko]

If you are writing typescript, then add your module aliases as short imports in tsconfig, no more complaining from vs code and also auto importing(auto complete) will work as expected

[Rush]

Hey y'all. I built an alternative. https://www.npmjs.com/package/link-module-alias

I'm using it currently in a project alongside module-alias but we may switch fully to link-module-alias if no issues are found.

[ilearnio]

One of my colleagues uses this to support aliases in vscode. Never tried myself but it works for him

// .vscode/settings.json

{
  "path-autocomplete.pathMappings": {
    "@": "${folder}/src",
    "assets": "${folder}/src/assets"
  }
}

[AkdM]

@Rush Thanks, I'm using your package instead! It works well and VSCode auto completes the folders and files.

[jplew]

@Rush can confirm that your alternative addresses all of the difficulties I've been having with this package, as documented in #58 . I especially appreciate how you preserved the API, makes swapping them a breeze. Thanks!

[Rush]

@jplew I'm glad it solves your issues. Please take note of this caveat but otherwise do enjoy.

[TheRealPSV]

Simple way to do this with a jsconfig.json file:

In your package.json:

{
...
    "_moduleAliases": {
        "@root": ".",
        "@handlers": "./js/handlers",
        "@utils": "./js/utils"
    },
...
}

In jsconfig.json:

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es6",
        "baseUrl": "./",
        "paths": {
            "@root/*": ["./*"],
            "@handlers/*": ["./js/handlers/*"],
            "@utils/*": ["./js/utils/*"]
        }
    },
    "exclude": ["node_modules", "**/node_modules/*"]
}

Basically, you can add the baseUrl as your local path, and copy over your aliases into the paths section. For each alias, you have to add /* to the end of the alias, and turn the path you're aliasing into an array containing that path, then add /* to the end of it as well.

It's a little extra work every time you want to add an alias, but it works really well, no extra extension required, and I'm using it now.

If there were a way to make this happen automatically (update the paths value when you update the aliases in package.json), that'd be fantastic.

[tamb]

Hey y'all. I built an alternative. https://www.npmjs.com/package/link-module-alias

I'm using it currently in a project alongside module-alias but we may switch fully to link-module-alias if no issues are found.

Can confirm this works!
Using with Create React App with TypeScript in VSCode

[AK47-dadada]

Simple way to do this with a jsconfig.json file:

In your package.json:

{
...
    "_moduleAliases": {
        "@root": ".",
        "@handlers": "./js/handlers",
        "@utils": "./js/utils"
    },
...
}

In jsconfig.json:

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es6",
        "baseUrl": "./",
        "paths": {
            "@root/*": ["./*"],
            "@handlers/*": ["./js/handlers/*"],
            "@utils/*": ["./js/utils/*"]
        }
    },
    "exclude": ["node_modules", "**/node_modules/*"]
}

Basically, you can add the baseUrl as your local path, and copy over your aliases into the paths section. For each alias, you have to add /* to the end of the alias, and turn the path you're aliasing into an array containing that path, then add /* to the end of it as well.

It's a little extra work every time you want to add an alias, but it works really well, no extra extension required, and I'm using it now.

If there were a way to make this happen automatically (update the paths value when you update the aliases in package.json), that'd be fantastic.

Hey, I had this problem
it still can't navigate to the specified file by CTRL+ CLICK

[SergioSuarezDev]

Simple way to do this with a jsconfig.json file:
In your package.json:

{
...
    "_moduleAliases": {
        "@root": ".",
        "@handlers": "./js/handlers",
        "@utils": "./js/utils"
    },
...
}

In jsconfig.json:

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es6",
        "baseUrl": "./",
        "paths": {
            "@root/*": ["./*"],
            "@handlers/*": ["./js/handlers/*"],
            "@utils/*": ["./js/utils/*"]
        }
    },
    "exclude": ["node_modules", "**/node_modules/*"]
}

Basically, you can add the baseUrl as your local path, and copy over your aliases into the paths section. For each alias, you have to add /* to the end of the alias, and turn the path you're aliasing into an array containing that path, then add /* to the end of it as well.
It's a little extra work every time you want to add an alias, but it works really well, no extra extension required, and I'm using it now.
If there were a way to make this happen automatically (update the paths value when you update the aliases in package.json), that'd be fantastic.

Hey, I had this problem it still can't navigate to the specified file by CTRL+ CLICK

Same here, can't go to file using CTRL+CLICK on imports in viscose using module aliases :(

[sescotti]

In case someone still has issues with a typescript project, this what I did to make it work:

• Add _module-alias to package.json:

  "_moduleAliases": {
    "@app": "src/app",
    "@commons": "src/commons"
  }

• Add compilerOptions.paths to tsconfig.json:

{
  "compilerOptions": {
    "paths": {
      "@app/*": ["./src/app/*"],
      "@commons/*": ["./src/commons/*"],
    }
}

• Go to Terminal > Run Task (⌘ + ⇧ + P on Mac) and write Restart TS server.

⚠️ This last step is necessary, otherwise VSCode might not pick up the changes on your package.json/tsconfig.json

[youssoufdasilva]

@SergioSuarezDev this worked for me. I just restarted the TS server like @sescotti mentioned