Make VSCode lighter

VSCode is an excellent Code Editor, more than an IDE. This can be a problem in larger projects as it requires a lot of CPU and RAM. This is not the only issue with VSCode, but it does apply to many of its extensions. VSCode’s extensions have the best quality. These extensions are written for Nodejs using JS, so it’s not surprising that they take up a lot of resources but work efficiently. This is what people often accuse vscode of doing. It isn’t a problem most of the times. This tiny problem becomes a bigger issue for larger projects, as many people don’t have an AMD Thread Ripper, Samsung NVMe SATA SSD with 16GB RAM & a RTX3090.

Let’s look at the causes of high resource consumption and fix them.

Avoid file watchers

Visual Studio Code’s autocompletion or IntelliSense uses a Universal LSP (Language Server Protocol), which is a collection of file watchers. This package also uses language-specific packages to monitor each file for matching types and for intellisense. This is fine if your project is small. If you have a project such as this:

Big Project

You hate VSCode, but you don’t. It’s not VSCode’s fault. VSCode must monitor those files otherwise it won’t be able to give you the comfort of coding. It may give you a better experience, but it can sometimes go too far. This can lead to excessive RAM and CPU usage. Let’s get this fixed:

Click on settings to edit the file icon in the tab-bar’s top right corner.

picture showing vscode settings where the json file open button is

The following code will remove unimportant and rarely used files and folders from file watchers.

//Add the following code lines to remove files and folders that aren’t necessary for watchers to search for changes.
{
//excludes fies and folders in search indexing
“search.exclude”: {Search.exclude:
“**/node_modules” is true
“**/bower_components”: true,
“**/env “: true
“**/venv “: true
.
//excludes fies and folders for watcher services
“files.watcherExclude”: {
“**/.git/objects/**”: true,
“**/.git/subtree-cache/**”: true,
“**/node_modules/**”: true,
“**/env /**”: True,
“**/venv /**”: True,
“env -*”: true”
.
}

view rawvs-code.settings.json hosted with by GitHub

This can also be done at workspace level. Simply create settings.json in the.vscode directory of the project root. If your project is larger, you can add additional files and folders to the root. You might not always need all the nested folders. You can add the project folders that you haven’t touched to allow you to continue your development.

You can also disable file-watchers from extensions. A list of extensions which seem to use file-watchers is available (I’m not 100% sure).

  • ESLint
  • TSLint
  • Apollo GraphQL
  • Todo Tree
  • Bookmarks
  • Code Spell Checker (Not certain)
  • Template String Converter (JavaScript/TypeScript/JSX/TSX)
  • Live Server
  • Live Sass Compiler
  • Compiler Hero
  • TypeScript God
  • Git-lens
  • Dart
  • Flutter

Here are some I came across while using them. Most of them are JavaScript/Typescript/Dart related as I’m from that world. Other extensions, such as rust, rust-analyzer, etc. are also available.

Disabling unwanted extensions for workspace

Over 35 extensions have been installed. Most of the time, I don’t use all of them in one project because I work on multiple types of projects. Extensions can be enabled/disabled for certain workspaces. For example, You don’t need to use flutter/dart when developing React or Nodejs server or vice versa. You can disable it for this workspace. Don’t forget to save your vs-code workspace

Disabling @builtin extensions that are not important for your project’s stack can make VSCode a bit lighter too. These extensions are not usually started by VSCode’s extensions host. VSCode does not start them unless you require them. You can still disable some extensions for your workspace.

  • Everything you need to know about language, except the ones in your stack
  • Grunt, Gulp & Jake support VSCode (Three Separate Extensions)
  • Node Debug (Lagecy).

You can do this by searching in VSCode’s extension tab with @builtin tag. This will display all built-in extensions.

For Typescript-only projects, disable automatic typeAcquisition.
Disable VSCode’s automatic typeAcquisition if your project solely uses Typescript. It aids in the creation of JavaScript by obtaining the type definitions for a node module from @types/package-name>. However, because typescript requires type definitions, you’ll most likely be using npm to install types for your node module. As a result, this feature is no longer useful.

To disable typeAcquisition, go to vscode’s settings and search for typeAcquisition, then uncheck the property.

Update your VS Code

Before we go on to other topics, make sure your Visual Studio Code is up to date. It’s possible that a simple update will solve your problem.

Do the following to see if you’re using the most recent version of VS Code:

  • On Mac, go to Code > About Visual Studio Code
  • On Windows, go to Help > About


You can tell which version you’re running by looking at the first number on the list. Simply go to Google and enter in “VS Code latest version” after you’ve downloaded your version.

Are extensions causing the poor performance?

Extensions are something that we all enjoy. They’re what differentiate VS Code from the competition. The options are endless. The issue is that certain extensions may be badly coded and cause your system to work more than it needs to. Third-party plugins are a fantastic place to start looking for performance concerns.

Quantity: How many extensions do you have?

It’s possible that the problem is one of quantity. Whether you have more than 20 extensions installed, try disabling some of the less important ones to see if it makes a difference. (It’s probably a good idea in any case.)

Check for slow-starting extensions

You can see how long each of your extensions took to start up in VS Code’s neat feature. Simply open the Command Palette and type the command “Developer: Show Running Extensions” into it.

To open the Command Palette, use the shortcut for your platform:

  • Windows: Ctrl + Shift + P
  • MacOS: Command + Shift + P
Show Running Extensions - VSCode

Once you hit enter, you will be able to see a list of your currently running extensions, and the start-up time in milliseconds of each.

VSCode Running Extensions

Check your CPU Consumption

The VS Code wiki recommends checking your CPU consumption to see if a process called “extensionHost” is taking up a lot of processing power. If this is the case, it is likely that an extension is causing your problem. You can read more about this on the VS Code wiki. They also recommend profiling your extensions.

Is your computer’s hardware outdated?

This is unusual because VS Code is a well-optimized tool that operates on the vast majority of computers. However, if you’re using an old computer that runs poorly with other apps, it’s probable that VS Code is the issue.

  • 1.6 GHz or faster processor
  • 1 GB of RAM

This is most likely the case if your current system specs are close to or below those requirements. It’s time to upgrade your computer.

vscode-colorize

With this extension installed, some users have reported a difficulty with startup. If you’re interested, the github issue can be found here. If you have the vscode-colorize extension installed, try disabling or uninstalling it to see if it helps.

Electron tends to start up slow

Electron is the framework that VS Code is built on (developed by Github). The slow start-up times of the Electron are well-known. However, this is not an excuse. For the most part, VS Code starts up quickly.

Re-install

I’d recommend a reinstall of Visual Studio Code as a last option. It might or might not work, but what have you got to lose? Just make sure you save a copy of your settings first. Keep a list of any extensions you’ve installed in a json file so you may replace them in the new install.

Ask for help on Stack Overflow

If you’ve tried all of the above options and are still stumped, I consider posting a question on Stack Overflow. This will allow you to receive personalized guidance that is customized to your specific situation.

Also Check:

Happy Coding…☺️

About us: Codelivly is a platform designed to help newbie developer to find the proper guide and connect to training from basics to advance

Leave a Comment