VS Code performance: how to find the best extensions. Part 2 | VPS and VPN
InterServer Web Hosting and VPS


VS Code performance: how to find the best extensions. Part 2


Translation of the second part of the article “VS Code Performance – How to Optimize Visual Studio Code and Choose the” Best “Extensions”.

In the first part of the article, we talked about the factors that affect the performance of the extension. Let’s now take a look at a few popular extensions as an example. Also in this part you will find some tips for generally improving the performance of the VS Code editor.

Metrics for several of the most popular extensions

I’m focusing here on the extensions I used myself. I would not like to talk about those that I have not used.

ESLint

ESLint is the most popular static analysis tool for JavaScript and TypeScript. It highlights problems in the editor with red wavy lines.

  • Author: Microsoft.
  • Installs: 11 million
  • Trading platform rating: 4.3 / 5 (156).
  • Main functions: reporting syntax problems. The ability to automatically fix some problems.
  • Activation events: at startup (*). In the next release, this will possibly change to onStartupFinished… An explanation of the reasons can be found in this issue.
  • Are resources optimized: yes.
  • File size: 133 KB.
  • Activation time on my system: 39ms.
  • Test suite: seems very basic.
  • Actively Supported: Yes.
  • Alternative extensions: JSHint, TSLint.

ESLint is a robust extension. The performance is excellent.

It’s only a shame that it loads at startup. If you’re worried about this, you can try JSHint (written by the same developer) for JavaScript and TSLint for TypeScript. Or you can fork the project and modify it yourself!

ESLint project is actively supported. It doesn’t have a significant set of tests.

Rating: 8/10

Prettier

Prettier is a code formatting tool. It currently supports the following languages: JavaScript, TypeScript, Flow, JSX, JSON, CSS, SCSS, Less, HTML, Vue, Angular, GraphQL, Markdown, YAML.

  • Author: Prettier.
  • Installs: 8.5 million
  • Marketplace rating: 3.8 / 5 (204).
  • Main functions: code formatting.
  • Activation events: onStartupFinished.
  • Are resources optimized: yes.
  • File size: 2.1 MB.
  • Activation time on my system: 286ms.
  • Test suite: yes. The coating looks decent.
  • Actively Supported: Yes.
  • Alternative extensions: Beautify.

Prettier does a great job of simplifying code formatting.

Performance is ok, but it could possibly be improved. This expansion is on the slower side of the activation spectrum.

It would be desirable to configure activation for supported languages ​​only.

Rating: 7.5 / 10.

Live Server

Live Server runs a local development server to preview your HTML and SVG files.

  • Author: Retwick Day.
  • Installs: 7.5 million
  • Marketplace rating: 4.5 / 5 (269).
  • Main features: live preview of HTML and SVG.
  • Activation events: at startup (*).
  • Are resources optimized: no.
  • File size: 2.5 MB.
  • Activation time on my system: 2513 ms.
  • Test suite: there are basic tests.
  • Actively Supported: None. The last commit was a year ago. The author of the extension is looking for a new maintainer.
  • Alternative extensions: not found!

When the extension works, it’s handy. The performance is poor and the extension is no longer supported.

I would recommend becoming a maintainer and polishing it up. Or find another extension to work with.

Rating: 5/10.

GitLens

GitLens helps you visualize code blame and explore Git repositories.

  • Author: Eric Amodio.
  • Installs: 6.5 million
  • Marketplace rating: 4.86 / 5 (387)
  • Key features: Visualization of code authorship at a glance. Nice sidebar views of git repositories.
  • Activation events: at startup (*).
  • Are resources optimized: yes.
  • File size: 1.5 MB.
  • Activation time on my system: 35ms.
  • Test suite: none.
  • Actively supported: yes, but activity has been low lately. The last commit was 4 months ago.
  • Alternative extensions: none.

GitLens is a good idea that can be helpful in understanding the codebase.

The extension is well written and the performance is excellent.

I only used the blame annotation extension, but there are many functions and configuration options (135 individual settings!).

Each feature has its own settings to enable, which is a very good approach. You can easily turn the code lenses on and off.

Recently, there has been a lull in extension development. I don’t know if this is a temporary situation or not. In general, it is difficult to say how well the extension will be supported in the future.

Rating: 9/10.

Winter

Vue language support.

  • Author: Pine Wu.
  • Installs: 5.6 million
  • Marketplace rating: 4.5 / 5 (117)
  • Main functions: syntax highlighting. Intellisense. Code formatting.
  • Activation events: onLanguage: vue.
  • Are resources optimized: no.
  • File size: 70.6 MB.
  • Activation time on my system: 252ms. But the “Complete activation” indicator is 3943 ms!
  • Test suite: yes.
  • Actively Supported: Yes.
  • Alternative extensions: There is no obvious alternative. Formatting can be done with Prettier.

Vetur is a standard extension for developing Vue applications in VS Code.

Syntax highlighting, intellisense, and hover links are great for Vue development.

The size of the expansion is HUGE.

Performance is a little erratic. It takes at least 4 seconds for activation to complete on my computer, which is much longer than the built-in JavaScript functions. There is also a noticeable delay in JavaScript syntax autocomplete.

The developers are working on building the extension (issue), so, hopefully, performance will improve soon.

Rating: 7/10.

Settings Sync

Settings Sync – sync settings using GitHub Gist.

  • Author: Shang Han.
  • Installs: 2 million
  • Trading platform rating: 4.61 / 5 (638).
  • Main functions: sync settings.
  • Activation events: at startup (*).
  • Are resources optimized: yes.
  • File size: 1.2 MB.
  • Activation time on my system: 2513 ms.
  • Test suite: yes.
  • Actively Supported: None. The last commit was a year ago.
  • Alternative Extensions: Built-in VS Code feature.

This was an outstanding expansion. Synchronizing the complete editor setup across different machines is very useful. That is why, since July 2020, the same functionality has become a built-in feature of VS Code. The main difference is that the extension stores your settings in a gist, which you can also share with others.

The activation time is quite slow. Is this justified? Hard to tell.

My guess is that the built-in function will perform better in the long run as it enjoys support from Microsoft. The extension is no longer supported.

Rating: 8/10.

Markdown All in One

Markdown All in One satisfies many of your markdown needs.

  • Author: Yu Zhang.
  • Installs: 1.7 million
  • Marketplace rating: 4.8 / 5 (90)
  • Main functions: edit with switch, table of contents.
  • Activation events: onLanguage: markdown, onCommand: markdown.extension.printToHtmlBatch, workspaceContains: README.md.
  • Are resources optimized: yes.
  • File size: 4.1 MB.
  • Activation time on my system: 195ms.
  • Test suite: yes.
  • Actively Supported: Yes.
  • Alternative extensions: Marky Markdown.

It is a robust extension with excellent performance.

It has too many features for my taste. But many people love to have everything they could want in one extension.

Activation event workspaceContains: README.md seems unnecessary to me. Most of my projects have READMEs, but I rarely edit them. So for me this is an indicator that the expansion is always active.

The table of contents logic is a bit trivial. There have been problems with false positives in the past. I don’t know if this has been completely fixed.

The file size of the extension can be reduced by excluding the README screenshots from the extension package.

Rating: 8/10.

General performance tips

Use a 64-bit OS

If you upgrade to a 64-bit OS, you can increase the amount of virtual memory (VM) available to VS Code from 2 GB to 4 GB.

This will allow VS Code to handle significantly larger workloads when a VM is required.

Disable restoring project state on startup

VS Code automatically restores the project state from the previous session. This can increase the time it takes to load the project.

To speed up your downloads, you can disable some recovery options:

  • Workbench › Editor: Restore View State: On by default.
  • Files: Restore Undo Stack: On by default.
  • Workbench: Startup Editor: determines which editor will be displayed at startup. By default, this is the welcome page. You can set the value to none so that no editor appears on startup.

Disable expensive features that affect editing performance

  • Minicard: Editor › Minimap: Enabled… Enabled by default.
  • Word wrap: Editor: Word Wrap… Disabled by default.
  • CodeLens: Editor: CodeLens… Enabled by default.
  • Format on save: Editor: Format On Save… Disabled by default.
  • Format on Paste: Editor: Format On Paste… Disabled by default.

Disable workspace extensions

You can disable certain extensions for a specific workspace (project).

You will most likely want to do this for extensions that are running all the time. You don’t need ESLint for a Java project!

You can also use the opposite approach. You can disable the extension globally and enable it only for specific projects.

Create extension sets

You can specify an alternative directory for extensions by entering the following command at the command line :.

code --extensions-dir <dir>

So, if you want to use different sets of extensions, this is possible. You can add a desktop shortcut or alias for this to run it regularly from the command line.

There is one thing to keep in mind when running different sets of extensions. This is sync. If you sync your extensions between machines, you can exclude extensions from syncing. Otherwise, you might mistakenly mess up your folder when switching.

Ideally, you shouldn’t have such a need.

Disable all extensions for the session

You can run VS Code with all custom extensions disabled from the command line. Zen mode plus plus!

code --disable-extensions

Troubleshooting performance issues

Slow performance or blank screen

VS Code has some issues with GPU (GPU) hardware acceleration on some systems. You can check if this is the case by turning off GPU acceleration.

code --disable-gpu

To install this permanently, do the following:

  • Open the Command Palette (Ctrl + Shift + P).
  • Run the command Preferences: Configure Runtime Arguments.
  • This command will open the argv.json file to set up the arguments. You can already see that some of the arguments are already set by default.
  • Add "disable-hardware-acceleration": true.
  • Restart VS Code.

The installation is damaged, the message is displayed [Unsupported]

VS Code does a background check on startup to check if you have changed any of its source files. If so, you will see the text [Unsupported] in the title bar.

Antivirus software can be one of the causes of this problem. VS Code may have been mistakenly quarantined or its files may have been deleted by antivirus software (see issue # 94858). Check your antivirus settings to prevent this.

To fix this problem, you can reinstall VS Code. The modified files will be overwritten and the warning will be disabled.

Final Words

You don’t have to sacrifice performance to get the functionality you need.

The most pragmatic approach is to gradually add the extensions you need. Do a little research each time and test the extension. This way you will build an awesome portfolio of extensions without even realizing it.

Writing VS Code Performance: How to Find the Best Extensions. Part 2 first appeared on Techrocks.

Leave a Reply

Your email address will not be published. Required fields are marked *