Excessive Extensions
--
The other week, I was working on a project and realized that one of the many extensions, I think I have around 40(??) on my VS Code was acting up. I’d type in, let’s say, <h1> and then I’d press the TAB button. The TAB button would then autocomplete the <h1>. But the issue I was having was the autocomplete would write out <h1></h1></h1>, instead of just <h1></h1>. I realized that this happened every time I’d press the TAB button to autocomplete. I’d have to go to the end of the line, and delete the extra </h1> or whatever the ending tag was. This was costing me some time.
So, for this blog, I’m going to go over all of my 40(??) (I’ll have proper count) extensions and see which one(s) are causing the issue mentioned above, which extensions are redundant and need to be removed, and which extensions are the slowest to load.
For starters, here’s a list of all the extensions, as of this writing.
Name: Auto Close Tag
Version: v0.5.12
Creator: Jun Han
Description: Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text
Babel JavaScript
Version: v0.0.31
Creator: Michael McDermott
Description: VSCode syntax highlighting for today’s JavaScript
Better Comments
Version: v2.1.0
Creator: Aaron Bond
Description: Improve your code commenting by annotating with alert, informational, TODOs, and more!
Blockman — Highlight Nested Code Blocks
Version: v1.2.0
Creator: leodevbro
Description: Mark/Highlight code blocks
Bracket Pair Colorizer
Version: v1.0.61
Creator: CoenraadS
Description: A customizable extension for colorizing matching brackets
C#
Version: v1.23.14
Creator: Microsoft
Description: C# for Visual Studio Code (powered by OmniSharp).
Set Color Theme
Custom Window Zoom
Version: v1.1.4
Creator: craigb85
Description: This extension allows you to change the zooom level percentage that VSCode uses when zooming in & out.
DotENV
Version: v1.0.1
Creator: mikestead
Description: Support for dotenv file syntax
Elm Emmet
v1.0.1
Creator: Max Vyz.
Description: Convert emmet abbreviations to composition of elm functions
endwise
Version: v1.5.1
Creator: Kai Wood
Description: Wisely add “end” in Ruby.
erb
Version: v0.0.1
Creator: Craig Maslowski
Description: Syntax Highlighting for Ruby ERB files
ES7 React/Redux/GraphQL/React-Native snippets
Version: v3.1.1
Creator: dsznajder
Description: Simple extensions for React, Redux and Graphql in JS/TS with ES7 syntax
ESLint
Version: v2.1.23
Creator: Dirk Baeumer
Description: Integrates ESLint JavaScript into VS Code.
Flatiron Survival Kit
Version: v0.0.7
Creator: dwieb
Description: Just a few items to help get you through Flatiron♥️️
GitLens — Git supercharged
Version: v11.6.0
Creator: Eric Amodio
Description: Supercharge the Git capabilities built into Visual Studio Code — Visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more
Guides
Version: v0.9.3
Creator: spywhere
Description: An extension for more guide lines
Highlight Matching Tag
Version: v0.10.1
Creator: vincaslt
Description: Highlights matching closing and opening tags
indent-rainbow
Version: v7.5.0
Creator: oderwat
Description: Makes indentation easier to read
Indenticator
Version: v0.7.0
Creator: SirTori
Description: Highlights your current indent depth
JS JSX Snippets
Version: v10.2.0
Creator: sky ran
Description: Simple extensions for React, Redux in JS with babel and ES6 syntax
Live Server
Version: v5.6.1
Creator: Ritwick Dey
Description: Launch a development local Server with live reload feature for static & dynamic pages
Markdown Extended
Version: v1.0.19
Creator: jebbs
Description: Extended syntaxes to built-in markdown & What you see is what you get exporter.
Markdown Preview Enhanced
Version: v0.5.22
Creator: Yiyi Wang
Description: Markdown Preview Enhanced ported to vscode
Material Icon Theme
Version: v4.9.0
Creator: Philipp Kief
Description: Material Design Icons for Visual Studio Code
Set File Icon Theme
NuGet Package Manager
Version: v1.1.6
Creator: jmrog
Description: Add or remove .NET Core 1.1+ package references to/from your project’s .csproj or .fsproj file using Code’s Command Palette.
Path Intellisense
Version: v2.4.0
Creator: Christian Kohler
Description: Visual Studio Code plugin that autocompletes filenames
Prettier — Code formatter
Version: v8.1.0
Creator: Prettier
Description: Code formatter using prettier
Quokka.js
Version: v1.0.390
Creator: Wallaby.js
Description: JavaScript and TypeScript playground in your editor.
Ruby
Version: v0.28.1
Creator: Peng Lv
Description: Ruby language support and debugging for Visual Studio Code
Settings Sync
Version: v3.4.3
Creator: Shan Khan
Description: Synchronize Settings, Snippets, Themes, File Icons, Launch, Keybindings, Workspaces and Extensions Across Multiple Machines Using GitHub Gist.
SQL Server (mssql)
Version: v1.10.1
Creator: Microsoft
Description: Develop Microsoft SQL Server, Azure SQL Database and SQL Data Warehouse everywhere
VSCode Ruby
Version: v0.28.0
Creator: Stafford Brunk
Description: Syntax highlighing, snippet, and language configuration support for Ruby
vscode-icons
Version: v11.6.0
Creator: VSCode Icons Team
Description: Icons for Visual Studio Code
Set File Icon Theme
YAML
Version: v0.22.0
Creator: Red Hat
Description: YAML Language Support by Red Hat, with built-in Kubernetes syntax support
Zoom Bar
Version: v1.4.0
Creator: wraith13
Description: Zoom UI in status bar for vscode.
Bracket Pair Colorizer 2
Version: v0.2.1
Creator: CoenraadS
Description: A customizable extension for colorizing matching brackets
Markdown All in One
Version: v3.4.0
Creator: Yu Zhang
Description: All you need to write Markdown (keyboard shortcuts, table of contents, auto preview and more)
Markdown Checkbox
Version: v1.7.1
Creator: Philipp Kief
Description: With this extension you can create checkboxes in markdown and mark them quickly.
Ok, so it looks like I have 38 extensions right now.
Next, I’m going to TOGGLE each extension and see make note of the changes.
I’m pretty sure I’m going to have to restart VS Code through these tests.
NOTE: I am not going to touch the Language extensions, like Ruby and C#, and any extensions that have to do with the code for that language, like 8–9 of the extensions.
All right, here we go.
Let’s start with Auto Close Tag
Description: Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text.
On the left side of VS Code, in the sidebar, I clicked on the Extensions tab, in the list of the Installed extensions I found the Auto Close Tag extension and clicked on the “disable” button and then clicked on the “reload” button to reload VS Code.
Even after disabling the extension, the feature is still active.
I think it’s one of two things
1. I need to quit VS Code and restart it and see if that makes a difference
2. There might be another extension that has the same feature.
I rebooted VS Code, and Auto Close Tag is still disabled. It seems like another extension has similar feature, because I can still close a tag.
I’m going to try to find this other extension.
I disabled Auto Rename Tag, Description: Auto rename paired HTML/XML tag.
But it still auto closes the tag.
These two extensions are part of the Flatiron Survival pack.
Going through the list of the extensions, this seems to be a wild-goose chase.
Auto Close Tag and Auto Rename Tag has been ENABLED again.
Yes, going through the list of extensions, this seems pointless.
Going back to what I wanted to write with this blog
1. Which one(s) are causing the issue mentioned above
2. Which extensions are redundant and need to be removed
3. Which extensions are the slowest to load.
It seems like point 1 and 2 are taken care of, I can’t seem to find the extensions are causing the issue and seems like I don’t have any redundant extensions, good for me, I guess.
Now to move on to the third point, which extensions are the slowest to load.
I found out, for the Mac, if you press CMD+SHIFT+p, the Command Palette pops up at the top of VS Code.
In the Command Palette, type in “Developer: Show Running Extensions”
This shows the name of the Extension, Startup Activation Time and Profile Time.
The Startup Activation and Profile Time are presented in milliseconds, like so, 480ms is 0.48 seconds.
1684ms is 1.684 seconds.
When I ran the command, the first extension on top, Microsoft Account, was unresponsive.
So I right-clicked on the extension and reported it.
it took me to GitHub and I pasted the needed data that was copied into my clipboard and I submitted the error report.
{
“messages”: [],
“activationTimes”: {
“codeLoadingTime”: 468,
“activateCallTime”: 12,
“activateResolvedTime”: 1550,
“activationReason”: {
“startup”: false,
“extensionId”: {
“value”: “vscode.microsoft-authentication”,
“_lower”: “vscode.microsoft-authentication”
},
“activationEvent”: “onAuthenticationRequest:microsoft”
}
},
“runtimeErrors”: []
}
It was my first time report to GitHub! WooHoo!
I hope someone provides a solution for it.
Here’s a list of the slowest extensions that loaded
Startup Activation: ms
Profile: 0.00ms
Microsoft Account
Activation: 480ms
Profile: 122.61ms
Live Server
Startup Activation: 1684ms
Profile: 0.00ms
Blockman — Highlight Nested Code Blocks
Startup Activation: 608ms
Profile: 0.00ms
Zoom Bar
Startup Activation: 525ms
Profile: 0.00ms
Guides
Startup Activation: 409ms
Profile: 0.00ms
JavaScript Debugger
Startup Activation: 256ms
Profile: 0.00ms
Emmet
Startup Activation: 155ms
Profile: 0.00ms
Bracket Pair Colorizer
Startup Activation: 241ms
Profile: 0.00ms
Merge Conflict
Startup Activation: 237ms
Profile: 0.00ms
Better Comments
Startup Activation: 236ms
Profile: 0.00ms
Quokka.js
Startup Activation: 168ms
Profile: 0.00ms
Settings Sync
Startup Activation: 155ms
Profile: 0.00ms
Prettier — Code formatter
Startup Activation: 136ms
Profile: 0.00ms
GitHub Authentication
Startup Activation: 97ms
Profile: 0.00ms
JSON Language Feature
Startup Activation: 97ms
Profile: 0.00ms
Path Intellisense
Startup Activation: 88ms
Profile: 0.00ms
GitLens — Git supercharged
Startup Activation: 77ms
Profile: 0.00ms
Git
Startup Activation: 76ms
Profile: 0.00ms
HTML Language Features
Startup Activation: 52ms
Profile: 0.00ms
TypeScript and JavaScript Language Features
Startup Activation: 43ms
Profile: 0.00ms
vscode-icons
Startup Activation: 39ms
Profile: 0.00ms
NPM support for VS Code
Startup Activation: 39ms
Profile: 0.00ms
ESLint
Startup Activation: 27ms
Profile: 0.00ms
Extension Authoring
Startup Activation: 25ms
Profile: 0.00ms
Highlight Matching Tag
Startup Activation: 25ms
Profile: 0.00ms
Material Icon Theme
Startup Activation: 22ms
Profile: 0.00ms
Babel JavaScript
Startup Activation: 14ms
Profile: 0.00ms
Auto Rename Tag
Startup Activation: 11ms
Profile: 0.00ms
Configuration Editing
Startup Activation: 8ms
Profile: 0.00ms
GitHub
Startup Activation: 7ms
Profile: 0.00ms
Indenticator
Startup Activation: 6ms
Profile: 0.00ms
Node Debug Auto-attach
Startup Activation: 5ms
Profile: 0.00ms
indent-rainbow
Startup Activation: 5ms
Profile: 0.00ms
Auto Close Tag
Startup Activation: 2ms
Profile: 0.00ms
This seems like this blog is going to be a part one.
I think part two will be coming soon, it could probably cover what extensions are needed and how to speed up extensions.
