Back to Blog

Optimizing VS Code Performance for Large Projects: A Comprehensive Guide

(1 rating)

Learn how to optimize VS Code performance for large projects and improve your development experience. Discover the best practices, tools, and techniques to boost your productivity and reduce slowdowns.

Close-up of HTML and JavaScript code on a computer screen in Visual Studio Code.
Close-up of HTML and JavaScript code on a computer screen in Visual Studio Code. • Photo by Antonio Batinić on Pexels

Introduction

Visual Studio Code (VS Code) is a popular, lightweight code editor that has become a favorite among developers due to its flexibility, customization options, and extensive library of extensions. However, as projects grow in size and complexity, VS Code can slow down, leading to frustration and decreased productivity. In this post, we'll explore the common causes of performance issues in VS Code and provide practical tips and techniques to optimize its performance for large projects.

Understanding VS Code Performance

Before we dive into optimization techniques, it's essential to understand what affects VS Code performance. Some common factors that contribute to slowdowns include:

  • Large project size: As the number of files and folders in a project increases, VS Code's file system watcher and language servers can become overwhelmed, leading to slower performance.
  • Resource-intensive extensions: Some extensions, such as code analyzers and debuggers, can consume significant system resources, causing VS Code to slow down.
  • Insufficient system resources: Running VS Code on a machine with limited RAM, CPU, or disk space can lead to performance issues.

Optimizing VS Code Settings

To improve performance, let's start by optimizing VS Code settings. Here are some key configurations to tweak:

files.watcherExclude

Exclude large folders or files that don't need to be watched by VS Code's file system watcher. Add the following configuration to your settings.json file:

1{
2  "files.watcherExclude": {
3    "**/node_modules/**": true,
4    "**/bower_components/**": true
5  }
6}

This example excludes the node_modules and bower_components folders from being watched.

editor.largeFileOptimizations

Enable large file optimizations to improve performance when working with large files. Add the following configuration to your settings.json file:

1{
2  "editor.largeFileOptimizations": true
3}

This setting enables optimizations such as disabling syntax highlighting and folding for large files.

Managing Extensions

Extensions can significantly impact VS Code performance. Here are some tips for managing extensions:

Disable unnecessary extensions

Disable or uninstall extensions that are not essential to your workflow. You can disable an extension by clicking the "Disable" button in the Extensions panel or by adding the following configuration to your settings.json file:

1{
2  "extensions.ignoreRecommendations": true
3}

This setting ignores extension recommendations and prevents unnecessary extensions from being installed.

Use extension profiles

Create extension profiles to manage different sets of extensions for various projects. You can create a new extension profile by running the following command in the terminal:

1code --extensions-dir ~/my-project/extensions

This command creates a new extension profile for the my-project directory.

Improving Language Server Performance

Language servers can be resource-intensive and impact VS Code performance. Here are some tips for improving language server performance:

Disable unnecessary language servers

Disable language servers that are not essential to your workflow. You can disable a language server by adding the following configuration to your settings.json file:

1{
2  "languageserver": {
3    "disabled": ["typescript", "javascript"]
4  }
5}

This example disables the TypeScript and JavaScript language servers.

Use the languageserver.options setting

Configure language server options to improve performance. For example, you can set the maxNumberOfProblems option to limit the number of problems reported by the language server:

1{
2  "languageserver.options": {
3    "maxNumberOfProblems": 100
4  }
5}

This setting limits the number of problems reported by the language server to 100.

Best Practices and Optimization Tips

Here are some additional best practices and optimization tips to improve VS Code performance:

  • Regularly update VS Code and extensions: Keep VS Code and extensions up-to-date to ensure you have the latest performance optimizations and bug fixes.
  • Use a fast disk: Use a fast disk, such as an SSD, to improve file system performance and reduce slowdowns.
  • Close unnecessary files and folders: Close unnecessary files and folders to reduce memory usage and improve performance.
  • Use the workbench.colorTheme setting: Use a light color theme to improve performance and reduce battery consumption.

Common Pitfalls and Mistakes to Avoid

Here are some common pitfalls and mistakes to avoid when optimizing VS Code performance:

  • Overloading the file system watcher: Avoid adding too many files and folders to the file system watcher, as this can lead to slowdowns and performance issues.
  • Using too many extensions: Avoid using too many extensions, as this can lead to performance issues and slowdowns.
  • Ignoring system resource limitations: Ignore system resource limitations, such as RAM and CPU, at your own peril. Ensure your machine has sufficient resources to run VS Code and your projects.

Conclusion

Optimizing VS Code performance for large projects requires a combination of configuration tweaks, extension management, and best practices. By following the tips and techniques outlined in this post, you can improve your development experience and reduce slowdowns. Remember to regularly update VS Code and extensions, use a fast disk, and close unnecessary files and folders to keep your workflow running smoothly.

Comments

Leave a Comment

Was this article helpful?

Rate this article

4.9 out of 5 based on 1 rating