Make VSCode lighter🪶

VSCode is a really great Code Editor rather say nearly an IDE or better than that. But this costs a great amount of RAM and CPU in bigger projects. That's not all related VSCode but to most of its extensions. VSCode's extensions are good, by far best. But these are written for Nodejs with JS so unsurprisingly these take a handy amount of resource but efficiently. And people unknowingly accuse vscode for this. Though most of the time it doesn't cause that much of issue. But in bigger projects this tiny problem gets bigger as most of the people don't have a AMD Thread Ripper, Samsung NVMe SSD with 16GB RAM & a RTX3090

Let's find out the reasons of this high resource usage & fix 'em

Avoiding file watchers

Visual Studio Code's auto-completion or IntelliSense actually uses a Universal LSP(Language Server Protocol) package which are some bunch of file watchers. This package uses other language specific packages to watch each individual file for matching types or for intellisense. Well, that's okay & completely fine when your project is small. But when you have a project like this:

Oh boy, now you hate VSCode but don't. It isn't VSCode's fault. VSCode has to watch those files else it can't give you the comfort for coding. But although it tries to give you a better experience it also sometimes overdo this. Which leads to tremendous RAM & CPU usage. Let's fix that:

Go to settings and click the file edit icon located at top right corner of the window in the tab-bar.

Now there past the following code to exclude the unimportant & literally never used files & folders from file watchers..

You can do this in workspace level too. Just create a settings.json inside the .vscode folder in the project root. You can also add more files or folders temporarily if project has grown bigger as you might always don't need all the nested files & folders. So you can just add those project folders which aren't even touched by you so you can do your rest of the development comfortably…

You also can disable some extensions which includes file-watchers. There's a list of extensions that seems to use file watchers (I'm not completely sure):

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

I've listed some of those which I encountered while using. Most of them are JavaScript/Typescript/Dart related as I'm from that world. But other extensions like : Rust, rust-analyzer etc are also like above list

Disabling unwanted extensions for workspace

I've over 35 extensions installed. But most of the time I don't need all of them at one project as I work in multiple types of project. You can enable/disable extensions for specific workspaces. E.g. you don't need flutter/dart while developing React or Nodejs Server or vice-versa. So you can just disable that just for that workspace. But don't forget to save the vs-code workspace

Disabling @builtin extensions that are not important for your project's stack can make VSCode a bit lighter too. Although most of the time these aren't even started by VSCode's extension host because VSCode doesn't start an extension unless you need it. But still there are some extension you can disable for your workspace:

• All the language basics except your stack's ones
• Grunt, Gulp & Jake support for VSCode (Three Separate Extensions)
• Node Debug (Lagecy)

You can do this by searching in VSCode's extension tab with @builtin tag. It'll show all the builtin extensions

Turn off automatic typeAcquisition for Typescript only projects

If your project uses only Typescript then disable VSCode's automatic typeAcquisition. It helps writing JavaScript by providing autocompletion by downloading @types/<package-name> type definitions for a node_module. But typescript requires type definitions so most of the time you'll be installing types for your node_module through npm. So this feature becomes obsolete

To turn off typeAcquisition, go to vscode's settings and search it then uncheck the typeAcquisition property

Comments

[Rob OLeary]

With regard to disabling extensions, it is not necessary to do this most of the time. Extensions are conditionally loaded based on their Activation Events.

For example, if you open a Python project, you would not expect a JavaScript-related extension such as Vetur to be loaded. An author could choose to load the extension always of course, but you hope they don't! You can read this article for a more in-depth discussion on this - VS Code Performance – How to Optimize Visual Studio Code and Choose the "Best" Extensions.

You can check which extensions have been loaded in the extensions sidebar. If an extension was loaded, you will see a loading time next to its name. You can see in the screenshot below that the extensions, ESLint and Format Code Action, have been loaded for my project. By clicking on the extension, you also see this in the "Runtime Status" tab also.

You can check an extension's Activation Events in the "Feature Contributions" tab.

If you do find yourself, repeating customization like KR mentioned across projects, you can create a custom set-up for a language or project type - see Customise VS Code for a project, or per language .

[Carlos E Salinas]

Great info Rob , thanks!

[Kingkor Roy Tirtho]

Wow, that's a whole lot information
I really appreciate your hard work, Thanks. Keep on writing these cool stuff!!🔥🔥

[Rob OLeary]

Thanks KR. 😀

[Gizachew]

My take away is "Turn off the lights if you don't use it."
Thanks

[Venkatesh KL]

Pretty simple & clean stuff which I've done while ago. I want sure it was worth sharing. Cheers

[Pablo Sánchez Flores]

Nice config, I'll give it a try. Thanks!

[jzombie]

Nice article!

Quick mention there is a typo in the word "automatic" in the last heading, "Turn off autmatic typeAcquisition for Typescript only projects."

[Kingkor Roy Tirtho]

Thanks for letting me know😅 I'll fix it ASAP

[Edson Jr.]

What about spliting its terminal to run local servers and other stuffs?

[Dhyfer1]

... or just use visual studio code online github.com/features/codespaces

[Kingkor Roy Tirtho]

Or try gitpod.io/

Github codespaces is still on beta & not everyone's allowed to use it. Gitpod's much accessible & offers 50 hours of development time with maximum 4 parallel workspace for open source projects for Free

[Dhyfer1]

...or you can take a look at github1s.com/

[Jeremy Gaither]

This is very helpful general and specific information. But have we come to a point where VSCode is getting as resource hungry or as convoluted as pre .net core standard visual studio?

[privatecloudev]

good tp lmlw

[Beyar]

Adjusted my settings, thank you!