tsconfig.json path mapping not working in Nuxt.js project
We are extending the Rancher Dashboard project and using WebStorm as the IDE. In a recent change in Rancher Dashboard, they reorganized their source code and are using both a tsconfig.json at the root of the project as well as in our plugin directory. In our plugin directory (./pkg/verrazzano/), we have a tsconfig.json file with the following path mappings. Unfortunately, the editor is flagging any import that uses these paths in our vue and js files. VS Code works fine. How do I fix this in WebStorm?
"paths": {
"@shell/core/*": [
"../../shell/core/*"
],
"@shell/config/*": [
"../../shell/config/*"
],
"@shell/store/*": [
"../../shell/store/*"
],
"@shell/plugins/*": [
"../../shell/plugins/*"
],
"@shell/utils/*": [
"../../shell/utils/*"
],
"@shell/models/*": [
"../../shell/models/*"
],
"@components/*": [
"../../pkg/rancher-components/*"
],
"@pkg/*": [
"./*"
]
}
Please sign in to leave a comment.
Normally in case of multiple configs, the WebStorm Typescript service uses the nearest config current file is included in, scanning folders from the file folder up to the project root. The service in WebStorm respects all
tsconfig.*.json
files assigned to TypeScript config file type in Settings | Editor | File Types. So the configuration file in the plugins subfolder should be respected in those files from this subfolder that are included in this config...Could you share a sample project we can use to investigate the issue?
Sure, please take a look at the "oracle/release/2.6.7" branch of https://github.com/verrazzano/rancher-dashboard. The code in question is in the pkg/verrazzano subdirectory.
In your .vue files in this package, you are using JavaScript language in <script> tags, so the path mappings from the tsconfig.json file are not respected. These mappings only work for typescript...
OK...VS Code doesn't seem to have this issue. Do we need to create a jsconfig.json file then?
Yes, you can define the mappings in the jsconfig.json