Struggling with sluggish performance on a certain project within VS Code

My experience with VS code has been excellent over the years, but I recently encountered a problem in one of my projects that caused a significant slowdown in performance. Strangely, other projects are working fine without any issues on VS code. I suspect that there's something specific to this troubled project causing the slow-down. Despite trying to troubleshoot by deleting and re-cloning the repository, as well as reinstalling VS code, the lag persists. It now takes up to a minute for the editor to update changes.

Here is the status report of VS code when the issue occurs:

Version:          Code 1.63.0 (7db1a2b88f7557e0a43fec75b6ba7e50b3e9f77e, 2021-12-07T05:15:48.091Z)
OS Version:       Darwin arm64 20.6.0
CPUs:             Apple M1 (8 x 24)
Memory (System):  8.00GB (0.16GB free)
Load (avg):       5, 3, 3
VM:               0%
Screen Reader:    no
... (CPU/Memory stats truncated for brevity) ...

Workspace Stats: 
|  Window (Home.module.scss — intl_rail_frontend)
|    Folder (intl_rail_frontend): 1059 files
|      File types: js(252) json(163) ts(89) tsx(69) woff(52) eot(52) pack(47)
|                  scss(32) png(30) map(28)
|      Conf files: package.json(9) tsconfig.json(4) settings.json(1)

I am using a Mac with an M1 chip running macOS Big Sur v11.6.

typescriptvisual-studio-codenext.js

Answer №1

I encountered a similar problem with VSCode and decided to try out the latest version of VSCode Insiders (https://code.visualstudio.com/insiders/). It appears that they have resolved this issue, as I no longer see the problem in any of my affected projects.

You can also synchronize your VSCode settings with VSCode Insiders (https://code.visualstudio.com/docs/editor/settings-sync) to continue working smoothly until this issue is addressed in the regular version of VSCode.

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

Updating a label dynamically in Angular

QUESTION: Is there a way to dynamically change the text of a label based on a certain condition? Specifically, I want the label to be blank when I'm on a specific route in my App. CURRENT APPROACH: <RadSideDrawer allowEdgeSwipe=&quo ...

angulartypescriptangular-ng-if

Implementing ETag in Angular 2

Implementing the odata standard which utilizes ETag has presented a challenge for me, particularly with PATCH requests. Each PATCH request requires sending the ETag in the header as If-None-Match. A HTTP status of 200 indicates that the change was successf ...

typescriptrxjs

Accessing embedded component within an Angular template

I have a ng-template that I utilize to generate a modal with a form on top of one of my other components like this: <div> <h1>Main component content...</h1> <button (click)="modals.show(newthingmodal)">Create New T ...

htmlangulartypescript

Whenever the route changes in Angular, the components are duplicated

Whenever I switch routes in my Angular application, such as going from home to settings and back to home, all the variables seem to be duplicated from the home page and are never destroyed. I noticed that I created a loop in the home component that displa ...

angulartypescriptionic-frameworkrouter

An error occurred in the ngrx store with Angular during production build: TypeError - Unable to access property 'release' of undefined

After deploying my application and running it, I encountered an issue that seems to be happening only during production build at runtime. At this point, I am uncertain whether this is a bug or if there is a mistake in my code. The error "TypeError: Cannot ...

angulartypescriptngrxngrx-store

In TypeScript, values other than numbers or strings can be accepted as parameters, even when the expected type is a

The issue I am encountering with TypeScript is quite perplexing, especially since I am new to this language and framework. Coming from a Java background, I have never faced such a problem before and it's presenting challenges in my bug-fixing efforts ...

typescriptnestjstype-safety

Displaying a div component in React and Typescript upon clicking an element

I've been working on a to-do list project using React and TypeScript. In order to display my completed tasks, I have added a "done" button to the DOM that triggers a function when clicked. Initially, I attempted to use a useState hook in the function ...

javascriptreactjstypescriptreact-hooks

The ordering of my styles and Material-UI styles is causing conflicts and overrides

Greetings fellow developers! I'm currently facing an issue with my custom styles created using makeStyles(...). The problem arises when I import my styles constant from another module, and the order of the style block is causing my styles to be overr ...

reactjstypescriptmaterial-uinext.js

Idle Time in Nextjs - Making the Most of D

I've been experiencing a significant delay of around 6 seconds when refreshing my Next.js platform. As part of my debugging process to identify the root cause of this issue, I uncovered that approximately 5 seconds of this time is classified as idle. ...

javascriptreactjsnext.jsmaterial-ui

numerous requirements for formatting utilizing Css modules

Can someone help me figure out how to set multiple conditions using a ternary operator to style an element with Css modules? I'm struggling to find the right syntax. Is it even possible? import style from './styles.module.sass' const Slider ...

cssreactjsnext.jsjsxcss-modules

Utilize mapping for discriminated union type narrowing instead of switch statements

My objective is to utilize an object for rendering a React component based on a data type property. I am exploring ways to avoid utilizing switch cases when narrowing a discriminated union type in TypeScript. The typical method involves using if-else or sw ...

typescriptdiscriminated-union

The ongoing ESLint conundrum: Balancing between "Unused variable" and "Unknown type" errors when utilizing imports for type annotations

I've encountered a linting issue and I need some guidance on how to resolve it. Here's the scenario - when running $ yarn lint -v yarn run v1.22.4 $ eslint . -v v6.8.0 With plugins vue and @typescript-eslint, I have the following code in a .ts ...

typescriptvue.jseslinttypescript-eslint

Uploading multiple files simultaneously in React

I am facing an issue with my React app where I am trying to upload multiple images using the provided code. The problem arises when console.log(e) displays a Progress Event object with all its values, but my state remains at default values of null, 0, and ...

javascriptreactjstypescript

Error: Docker unable to locate package.json file

I'm encountering an issue. I tried building a project in Docker and received an error. The error states that during npm install, the package.json file could not be found. Here is my Dockerfile: FROM node #copy source COPY . /app # Install dependenc ...

dockernext.js

Convert TypeScript model to JSON while excluding properties with null values

When working with an Angular 4 App and a typescript model, I have defined a Person class as follows: export class Person{ fname:string, lname?:string } The 'lname' property in the model is optional. To populate the model in a component, I u ...

jqueryjsonangulartypescript

Add a npm module without type definitions

I am currently utilizing Typescript version 2.1 and facing an issue with installing an npm package called 'reactable' that lacks typings. When attempting to import the package using import * as Reactable from 'reactable', Typescript di ...

javascripttypescriptnpm

Tips for updating the checkbox state while iterating through the state data

In my component, I have the ability to select multiple checkboxes. When a checkbox is selected, a corresponding chip is generated to visually represent the selection. Each chip has a remove handler that should unselect the checkbox it represents. However, ...

javascriptreactjstypescriptreact-hooksreact-state

Property finally is missing in the Response type declaration, making it unassignable to type Promise<any>

After removing the async function, I encountered an error stating that the Promise property finally is missing when changing from an async function to a regular function. Any thoughts on why this would happen? handler.ts export class AccountBalanceHandle ...

javascriptangularreactjstypescriptasync-await

Enhance your NextJS project with customizable SEO data!

In my current project using Next.js and static export, I am facing an issue with SEO options being retrieved from the CMS while rendering static pages. The page contains three different sets of SEO data: seo.header, seo.body, and seo.footer. While it&apos ...

reactjsnext.js

"Trouble with Typescript's 'keyof' not recognizing 'any' as a constraint

These are the current definitions I have on hand: interface Action<T extends string, P> { type: T; payload: P; } type ActionDefinitions = { setNumber: number; setString: string; } type ActionCreator<A extends keyof ActionDefinitions> ...

typescript