Automated TypeScript Imports in Visual Studio Code

While I understand that VSCode may not be perfect for all programming languages, it always seemed to have excellent support for typescript. However, I am facing some issues where it does not work as well for me. I am unsure if something is misconfigured or if I am overlooking a certain setting.

My main concern lies with the auto import feature. When attempting to import an Angular module, for example, I find that it does not function unless I manually import it initially using import {} from '@angular/router' at the beginning of the file. Only then does VSCode recognize all the modules in the router package. Is this the expected behavior?

Another issue I encounter is the sluggishness of the auto-complete suggestions. While typing, VSCode often freezes for 1 or 2 seconds before displaying the autocomplete options.

I've included my tsconfig.json below in case it provides any insight:

{
  "compileOnSave": false,
  "compilerOptions": {
    "rootDir": ".",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es2015",
    "module": "esnext",
    "typeRoots": ["node_modules/@types"],
    "lib": ["es2017", "dom"],
    "skipLibCheck": true,
    "skipDefaultLibCheck": true,
    "baseUrl": "."
  },
  "exclude": ["node_modules", "tmp"]
}

Are there others experiencing similar issues? Or perhaps someone has found solutions to these problems?

Edit: Additional information about my system

OS: Manjaro 5.4.44-1

VSCode: v1.47.0

Typescript: 4.0.0-dev.20200710

Answer №1

I believe that your TypeScript configuration is fine. The problem might be related to the VSCode software itself. I suggest updating your VSCode version and installing additional third-party extensions for better auto intelligence support. Personally, I have had success with TSLint after installing it.

Answer №2

After extensive research, I made a couple of interesting discoveries.

I noticed that the freezing issue with auto complete only occurs when using the "Javascript and Typescript Nightly" extension.

Furthermore, it seems that there is an ongoing problem with auto import not functioning properly. Fortunately, there was an issue on github (#37812) related to this which has just been resolved. The fix for auto import for modules with their own location for the @types files, such as angular material, should be included in the upcoming typescript 4.0 release. Now all that's left to do is wait for the update.

Answer №3

Encountered a similar problem where VSCode's auto-import suggestions froze, only working once during startup before stopping altogether.

The issue was resolved by disabling the "Javascript and Typescript Nightly" extension, as suggested by @Sakkaku.

Answer №4

If you're encountering issues with auto-import in VS Code, it's possible that your Javascript/Typescript IntelliSense isn't functioning correctly due to the absence of necessary TypeScript and JavaScript Language Features.

To resolve this, go to the Extensions tab and look for @builtin TypeScript and JavaScript Language Features, then make sure to enable it:

https://i.sstatic.net/7lUS9.jpg

For more information, see: Visual Studio Code autocomplete/IntelliSense not working properly for JavaScript

Answer №5

Make your programming life easier by employing the Auto Import feature in your VScode editor. Simply typing the module name will automatically import it to the top of your code. Check out the extension here

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When using Angular, the onSelectionChange event is not triggered for angular mat-option components

I am working with a mat-form-field that includes both an input field and a mat-autocomplete feature with mat-options. The input field has a (blur) event triggered when it loses focus, while the mat-option has an (onSelectionChange) event triggered when an ...

What could be causing this function to malfunction?

Apologies for any inaccuracies in technical terms used here. Despite being proficient in English, I learned programming in my native language. I am currently working on a project using the latest version of Angular along with Bootstrap. I'm unsure if ...

Sign up for Observable and receive notifications for specific events

I am working with an Angular service that looks like this: export class EventService { private subject = new Subject<Event>(); send(code: EventCode, data?: any) { this.subject.next(event); } clear() { this.subject.next(); } g ...

Tips for resolving the setAttribute() function error message: "Argument of type 'boolean' is not assignable to parameter of type 'string'"

I am currently working on a function that dynamically updates the HTML aria-expanded attribute based on whether it is true or false. However, when I declare element as HTMLElement, I encounter an error stating Argument of type 'boolean' is not as ...

The issue encountered is: "Uncaught promise error: Provider for ActivatedRoute not found."

The dependencies listed in the package.json file are: "dependencies": { "@angular/cli": "1.0.0", "@angular/compiler-cli": "^4.0.0", "@angular/common": "^4.0.0", "@angular/compiler": "^4.0.0", "@angular/core": "^4.0.0", "@angular/forms": "^4.0.0", "@angula ...

The required property 'intersect' is not found in the type 'import("cesium").BoundingSphere'

Incorporating Cesium into a ReactJs application has been my recent project. I have successfully displayed various factories in the cesium viewer and drawn polygon grids on their coordinates. However, I am encountering confusion with one particular aspect. ...

Issue with RouterLink not recognizing QueryParams

I have encountered an issue where dynamically generated URLs with queryParams inside [routerLink] are breaking routes. For example: this.url = '/question/ask?details=1' <a [routerLink]="url"> {{ data.name }}</a> Upon mouseover, the ...

React: Eliminate the reliance on two interconnected contexts by implementing a globally accessible constant object

Working on a new significant update for react-xarrows, I encountered a complex situation that needs resolution. To help explain, let's visualize with an example - two draggable boxes connected by an arrow within a wrapping context. https://i.sstatic ...

Ensuring complete type safety by passing an object literal as a function parameter to a TypeScript type with rigorous type validation

I have a script written in JavaScript that I am currently converting to TypeScript. The code I am working with includes the following: const shapes = []; shapes.push({ name: 'Circle', radius: 12 }); shapes.push({ name: 'Rectangle', wid ...

How can I achieve a result using a floating label in a .ts file?

I'm facing a simple issue that I can't seem to figure out. The problem is with a floating label in my HTML file, as shown below: <ion-list> <ion-item> <ion-label floating >Username</ion-la ...

What are some strategies for debugging a live Angular2/Typescript application?

As I start the exciting journey of creating a new app with Angular2 and Typescript, two technologies that I have never used together before (although I do have experience using them individually), a question arises in my mind. How can I effectively debug ...

Tips for utilizing angular pre-rendering alongside transloco?

After I prerender my Angular application, I am encountering an issue where the translation text is not visible when using Transloco. This is because it utilizes HTTP to fetch data from asset/i18n/en.json. Is there a way to implement prerendering with dyna ...

Is it possible to access 'import.meta' only within a module in an Angular micro front-end setup?

I have been incorporating mfe (module federation microfrontend) into my Angular project. However, I encountered an error in the console when trying to load the remoteEntry.js file: import.meta outside a module The version of Angular that I'm using is ...

Data exchange between components via an API

I'm in the process of developing a website dedicated to showcasing the top 20 highest-rated Sci-fi movies. The main component on the homepage utilizes a GET request through a service to retrieve an array of objects containing the movie data. This movi ...

What is the best way to repurpose a specific interface member type?

export interface Car { Model: string; TopSpeed: number; YearManufactured: number; } const FastestCarSpeed: Car.TopSpeed = 200; At the moment, we are encountering an issue with Car.TopSpeed: We are unable to access 'Car.TopSpeed' ...

I'm trying to figure out how to make HTML tags display within a React/Next <head> element

I inherited a React/Next project filled with spaghetti code. The previous developer did not prioritize SEO, and I am still learning React. Now, my main focus is getting tags to render in the Component. <Head> <meta key="data-tes ...

What is the most effective method for declaring callbacks on objects in Typescript?

I am currently working on a sidebar menu component that is connected to a service holding items in the menu. This allows multiple sources to make alterations to the menu as needed. Each item in the menu currently follows the SidebarItem interface: export ...

Comparing the MVC Design Pattern in .Net Core to Express.js

I have recently started learning about Node.js and Express.js, and I am looking for guidance on how to incorporate the MVC pattern into my project. I want to follow the same structure as .Net Core projects, with separate sections for models, controllers, ...

Despite enabling CORS for a specific origin, I am still encountering the error message "No 'Access-Control-Allow-Origin'"

In my front-end application, I am using Angular to request API responses from a web API core project. Despite setting up cross-origin resource sharing for both running on different origins, I am still encountering an error stating 'No Access-Control-A ...

Mapping data arrays for a particular type of object array

Perhaps a simple query, but I am struggling to find an example for this. Here is my HttpClient call: getItems(dataSourceUrl: string, bindKey: string, bindValue: string): Observable<SelectItem[]> { return this.httpClient.get<Array<any>& ...