I work on an Angular application, with some of the code grouped into their own (npm) projects so they can be referenced by other applications.
When I write code within the app
folder, VSCode's Intellisense suggests the following paths for auto-imports, both of which work:
import 'FooComponent' from module "../../../projects/company/shared/src/foo/foo.component";
import 'FooComponent' from module "@company/shared";
My goal is to make the "@company/shared"
import the default choice. It would be even better if the relative path could be hidden completely. I have tried this so far:
typescript.preferences.importModuleSpecifier: non-relative
typescript.preferences.importModuleSpecifierEnding: minimal
So far, these have not solved my problem.
I have an Angular project structure similar to this:
ApplicationName
- dist
- e2e
- node_modules
- projects
- company
- domain
- shared
- src
- app
tsconfig.json
Within tsconfig.json
, I reference the shared
project in the paths
:
{
"compilerOptions": {
// standard stuff
"baseUrl": "src",
"paths": {
@company/domain: [
../projects/company/domain/src/public-api
],
@company/shared: [
../projects/company/shared/src/public-api
]
},
"exclude": [
"./dist/**,",
"**/projects/company"
]
}
Is there a way to hide the long "../../../projects/company/shared/src/foo/foo.component"
import suggestion? It hogs the default and adds noise when there are multiple autocomplete-suggestions for foo
.
In my case, I had to remove all the typescript import extension (auto import, typescript hero, typescript importer), then changing my : typescript.preferences.importModuleSpecifier from relative to project-relative.
Adding
"typescript.preferences.importModuleSpecifier": "project-relative"
to settings.json
in vscode worked for me.
I had to restart the TS Server for it to show up. (Command Palette --> Typescript: Restart TS Server
.)
Now the default import suggestion is @company/packageName
, which is what I wanted.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With