DEV Community

VS Code: You don't need that extension

Rob OLeary on August 05, 2020

Translation in Japanese (日本語). I was digging deeper in VS Code recently and made some interesting discoveries. There are quite a few features and ...

Read full post

Tobias Nickel • Aug 6 '20

I hope we understand, that this is not to blame the extensions. vs code is constantly updating, improving, adding features.

Even dough some extension is obsolete today, it might have inspired the feature natively integrated to our IDE.

Rob OLeary • Aug 6 '20

Yes, 💯. I think Settings Sync is a great example of that, someone from the community filled a void really well, and eventually VS Code has implemented it as a core feature.

Rob OLeary • Aug 5 '20

Do you have any power user tips?

Mike Bybee • Aug 5 '20 • Edited

Edit (forgot to come back earlier with instructions)/TL;DR:

Open the Command Palette (Ctrl+Shift+P).
Run the Preferences: Configure Runtime Arguments command.
This command will open a[n] argv. json file to configure runtime arguments. You might see some default arguments there already.
Add "disable-hardware-acceleration": true.
Restart VS Code.

Source: code.visualstudio.com/updates/v1_4...

More of a general usability tip for Linux users who experience slowness in VS Code: Disable hardware rendering. Chances are you're already experiencing this in Chrome/Chromium/Brave/Opera/etc. and Firefox if it impacts you in VS Code, and the solution is the same (albeit in different places in settings).

Alex Janke • Aug 5 '20

Not sure if it counts as a power tip but CTRL + K + Z to just focus on the code you're working on right now and get rid of all the things around it.

Rob OLeary • Aug 5 '20

This is Zen Mode. I like this too 🕊🙏

eddyLazar • Aug 5 '20

Just checked editor.renameOnType after reading your article. Turning this option on unfortunately doesn't rename tags in vue files...

Rob OLeary • Aug 5 '20 • Edited

Yep, its a pity Eddy, I use Vue as well. It's hard to get support for features across all file types/languages. If I find a solution I'll post it. The Vetur extension covers most of the Vue-related functionality.

Edit: There is an open issue on this for the Vetur extension: github.com/vuejs/vetur/issues/565

Gökhan Kurt • Aug 6 '20 • Edited

Helpful article. There are many more useless extensions. Especially Git extensions. For most cases you only need GitLens and built-in VSCode Git tools.

I suggest removing every extension (except some essential ones) and adding one by one as you need it. I dropped my extension count from 50 to 14 by doing this.

Rob OLeary • Aug 6 '20 • Edited

I think you end up with a lot of extensions if you install them at the beginning when you are unfamilar with the IDE. Adding them incrementally as you you need them, as you suggest, it is a better approach IMO. I was going to add an entry about Git also, the builtin Git features are enough for me, and are getting better all the time.

Abhijit Hota • Aug 5 '20 • Edited

Great post, Rob!

Although the "Rename on Type" setting doesn't seem to work with JSX. 😕
Does anyone know any fixes?

Edit: Just found out it's an open issue! 😁 github.com/microsoft/vscode/issues...

Paolo Duzioni • Aug 21 '20

Hi there,

An alternative way could be 'Emmet: update tag' in the Command Palette.

And maybe assign a custom keyboard shortcut?

Rob OLeary • Aug 5 '20 • Edited

You should be able to type "F2" on the opening tag and rename it, and it will do it for the closing tag also

Abhijit Hota • Aug 6 '20

Thanks for the tip!
However it renames all the similar tags in the document instead of just the selected opening and closing tag.

Rob OLeary • Aug 6 '20

Doh! Hopefully they will fix the bug soon then 😄

Camilo Martinez • Dec 4 '21

Bracket Pair Colorizer and Bracket Pair Colorizer 2 are also deprecated and included on vscode natively.

{
    "editor.bracketPairColorization.enabled": true,
    "editor.guides.bracketPairs": true
}

Rob OLeary • Dec 4 '21 • Edited

Thanks for sharing Camilo. I actually wrote a follow-up article recently that included those:

VS Code: You don't need that extension part 2

Rob OLeary ・ Nov 8 ・ 13 min read

#vscode #tooling #productivity

Jakeer • Aug 6 '20

Salam, thanks helpfull

Robert Wildling • Sep 17 '20 • Edited

This series is truly a gold treasue chest! VScode and its ecosystem have become huge, and it has become just too easy to loose oversight! Thank you @robole !

Rob OLeary • Sep 17 '20

Thanks Robert. 🙂 Im glad it helps!

Robert Wildling • Sep 17 '20

How do you handle projects that each have individual requirments? E.g. I need different indentation settings for various php projects:
Project A: 4 spaces
Project B: 1 tab (1 space)
Same thing for Javascript, some want 4 spaces, other 1 tab... and some projects do not deliver an .editorconfig.
Also, in a Flutter project I need Dart, but not php nor JS. Can I tell VScode to turn off those ext, when not needed? (I tried "Enable (Wordspace only)", but that does not seem to work.

Maybe I can motivate you to write an article on this topic? :-)

Rob OLeary • Sep 17 '20 • Edited

There are workspaces settings where you can define project settings. It is a tab in the Settings UI. You set your spaces and tabs there for projects. This file ends up in .vscode folder in your project.

You can also add language specific user settings to the settings.json like this:

  "[markdown]": {
    "breadcrumbs.showClasses": false,
    "files.trimTrailingWhitespace": false
  },

You can read the VS Code user guide on the topic.

I don't really understand what you mean about the Flutter project. Language features should only be triggered if you are using a particular language in a project. You can disable an extension for a workspace (project) if you wish.

Robert Wildling • Sep 18 '20

I don't know what you are if not amazing!!! I utter a wish for an article - and what do you do? You deliver!!!
A cordial thank you, Rob!!!

Rob OLeary • Sep 18 '20

You're welcome Robert. 🙂 I realised in responding to your comment, that it wasn't that much more effort to expand on what I said, so why not put it into an article for others too? 👍

Andrew Baisden • Aug 5 '20

Auto Rename Tag is cool however in a previous update it was found to be unstable as it slowed down the code editor and caused crashes. I don't know if it has been fixed yet? It was one of my most useful extensions but I had to uninstall it.

miguelmoramax • Aug 5 '20

Nice post, thank you!

Rob OLeary • Aug 5 '20 • Edited

Glad you liked it! Thanks 😊

Varun S • Jan 8 '21

Great article! I am about to read the whole series.

Note: I found that Editor: Rename on Type is deprecated and replaced by Editor: Linked Editing

Rob OLeary • Jan 9 '21

Thanks Varun. Good to know. I'll update the article when I get the chance

Adam Parkin • Aug 7 '20

Is there a way to make some of those Emmet expansions available in non-HTML files? Like I do most of my work in Python and Markdown, so that lorem expansion isn't available. :/

Rob OLeary • Aug 7 '20 • Edited

Yes, through emmet.includeLanguages. To include markdown, you can add the settings below:

"emmet.excludeLanguages": [],
"emmet.includeLanguages": {"markdown": "html"},

Bonnie Simon • Aug 5 '20

What does this "Require using TypeScript 2.9 or newer in the workspace" mean ?

How do I know if I have it ?

Rob OLeary • Aug 5 '20 • Edited

If it is a JavaScript project you can disregard that statement. I'm not sure why that is written in the Settings for the JavaScript options.

This video explains the setting for better context if you are confused:

Rob OLeary • Aug 6 '20 • Edited

I opened an issue for this which is in progress.

Muhammad Mejanul Haque • Aug 6 '20

That auto renaming was new for me, Thanks

Peyman Eskandari • Aug 6 '20

That was one of the best topics I've seen in a while. I'm on my way to use all of these settings. Great job man 👍

skaytech • Aug 5 '20

Great post Rob!!

Rob OLeary • Aug 5 '20

Thanks 🙏🙂

akarak • Aug 9 '20

"Settings Sync is still in Preview and only available on VS Code Insiders."