DEV Community

Kingkor Roy Tirtho
Kingkor Roy Tirtho

Posted on • Edited on

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:

Big Project

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.

picture showing vscode settings where the json file open button is

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

Top comments (16)

Collapse
 
robole profile image
Rob OLeary • Edited

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.

runtime status

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 .

Collapse
 
scarlosenrique profile image
Carlos E Salinas

Great info Rob , thanks!

Collapse
 
krtirtho profile image
Kingkor Roy Tirtho

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

Collapse
 
robole profile image
Rob OLeary • Edited

Thanks KR. 😀

Collapse
 
gizawoin profile image
Gizachew

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

Collapse
 
klvenky profile image
Venkatesh KL

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

Collapse
 
pasanflo profile image
Pablo Sánchez Flores

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

Collapse
 
jzombie profile image
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."

Collapse
 
krtirtho profile image
Kingkor Roy Tirtho

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

Collapse
 
ed1nh0 profile image
Edson Jr.

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

Collapse
 
dhyfer1 profile image
Dhyfer1

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

Collapse
 
krtirtho profile image
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

Collapse
 
dhyfer1 profile image
Dhyfer1

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

Collapse
 
jeremygaither profile image
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?

Collapse
 
aheisleycook profile image
privatecloudev

good tp lmlw

Collapse
 
beyarz profile image
Beyar

Adjusted my settings, thank you!