DEV Community

Cover image for VS Code: You don't need that extension
Rob OLeary
Rob OLeary

Posted on • Updated on <time datetime="2021-09-12T16:24:27Z" class="date-no-year">Sep 12</time> • Originally published at roboleary.net

VS Code: You don't need that extension

You can subscribe to my RSS feed to get my latest posts.


Translation in Japanese (日本語).

I was digging deeper in VS Code recently and made some interesting discoveries. There are quite a few features and settings that ably do the work of many popular extensions.

1. Auto renaming HTML tags

Rename HTML tag pairs with a single edit.

rename tags

1.1. Extension

  • Auto Rename Tag (3.3M downloads): "Automatically rename paired HTML/XML tag, same as Visual Studio IDE does."

1.2. Setting

  • Editor: Linked Editing: "Controls whether the editor has linked editing enabled. Depending on the language, related symbols, e.g. HTML tags, are updated while editing." Default is false.

Update 09/01/21 - editor.renameOnType is deprecated and is replaced by editor.linkedEditing.

Auto-renaming is supported in HTML files only at the moment. There is an open issue to add this for JSX files.

The Vetur extension has a long-standing issue open to add this.

1.2.1. settings.json

  "editor.linkedEditing": true
Enter fullscreen mode Exit fullscreen mode

2. Auto closing HTML tags

When you add a new HTML tag, the closing tag is added automatically.

2.3. Extension

  • Auto Close Tag (3.1M downloads): "Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text."
  • Close HTML/XML tag: "Quickly close last opened HTML/XML tag."

2.4. Settings

  • HTML: Auto Closing Tags: Default is true.
  • JavaScript: Auto Closing Tags: "Enable/disable automatic closing of JSX tags. Requires using TypeScript 3.0 or newer in workspace". Default is true.
  • TypeScript: Auto Closing Tags: "Enable/disable automatic closing of JSX tags. Requires using TypeScript 3.0 or newer in workspace". Default is true.

2.4.2. settings.json

  "html.autoClosingTags": true,
  "javascript.autoClosingTags": true,
  "typescript.autoClosingTags": true
Enter fullscreen mode Exit fullscreen mode

3. Synchronizing Settings

VS Code now supports synchronizing VS Code settings across different machines, this feature is available for preview since v1.48 (July 2020 release).

I am trying it out at the moment, and it looks good.

3.5. Extensions

  • Settings Sync (1.8M downloads): Syncs your settings, keybindings, snippets, extensions, and launch files to a GitHub Gist.

3.6. Feature and Settings

You read all about this feature in the User Guide. Below is what the Settings look like.

sync settings

You can use a Microsoft or GitHub account, and select what exactly you want to sync.

sync initialisation options

4. Auto import modules

Managing imports for JavaScript and TypeScript modules can become a pain, especially when you want to re-organise your project, or refactor your code.It's desirable to automate this if possible!

4.7. Extensions

4.8. Settings

  • JavaScript > Suggest: Auto Imports : "Enable/disable auto import suggestions. Requires using Typescript 2.6.1 or newer in workspace." Default value is true.
  • TypeScript > Suggest: Auto Imports: "Enable/disable auto import suggestions. Requires using Typescript 2.6.1 or newer in workspace." Default value is true.
  • JavaScript > Update Imports on File Move: Enabled: "Enable/disable automatic updating of import paths when you rename or move a file in VS Code. Require using TypeScript 2.9 or newer in the workspace." Default value is "prompt".
  • TypeScript > Update Imports on File Move: Enabled: "Enable/disable automatic updating of import paths when you rename or move a file in VS Code. Require using TypeScript 2.9 or newer in the workspace." Default value is "prompt".

4.8.3. settings.json

"javascript.suggest.autoImports": true,
"typescript.suggest.autoImports": true,
"javascript.updateImportsOnFileMove.enabled": "always",
"typescript.updateImportsOnFileMove.enabled": "always",
Enter fullscreen mode Exit fullscreen mode

Also, if you would like your imports to be organised when you save, you can add the setting below. It will remove unused import statements, and arrange import statements with absolute paths on top. I am a big fan of these kind of set-and-forget tasks.

"editor.codeActionsOnSave": {
    "source.organizeImports": true
}
Enter fullscreen mode Exit fullscreen mode

5. Snippets for HTML and CSS

You may want to create a HTML boilerplate to get started quickly, add code chunks to save you keystrokes, or have expansions to complete a block for what you're typing. These similar but slightly different needs are addressed below.

5.9. Extension

  • HTML Snippets (3.8M downloads): "Full HTML tags including HTML5 Snippets."
  • HTML Boilerplate (684K downloads): "A basic HTML5 boilerplate snippet generator."
  • CSS Snippets (22K downloads): "Shorthand snippets for css."

5.10. Feature

Emmet is built into VS Code. Emmet offers abbreviation and snippet expansions for HTML and CSS. Emmet is enabled by default for html, haml, pug, slim, jsx, xml, xsl, css, scss, sass, less and stylus files. You can read the VS Code User Guide for more info.

To create a boilerplate for HTML, you type "!" and hit tab.

html boilerplate

There are abbreviations which use CSS style selectors such as:

ul>li*5
Enter fullscreen mode Exit fullscreen mode

which produces this:

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
Enter fullscreen mode Exit fullscreen mode

Expansions like typing "a" and hitting tab will produce <a href=""> and will place your cursor is inside the quotations, ready for you to fill in the href.

That's just a quick overview of what you can for HTML, it offers similar capabilities for CSS, my favourite is adding vendor-prefixes automatically. Check out the Emmet Docs for more info, and the cheatsheet for future reference.

You can customise or create your own snippets by adding them to a json file named snippets.json.

You can enable Emmet for more languages For example, to include Emmet support for Vue and JavaScript, add the following to settings.json:

"emmet.includeLanguages": {
  "vue-html": "html",
  "javascript":"javascriptreact"
}
Enter fullscreen mode Exit fullscreen mode

There is a gotcha (bug) for including Emmet support for markdown, you must also ensure that the excluded language list is empty, as per snippet below. This workaround is discussed in this stack overflow question.

"emmet.excludeLanguages": [],
"emmet.includeLanguages": {
  "markdown": "html"
}
Enter fullscreen mode Exit fullscreen mode

6. Fake text (Dummy text)

You may want to insert some fake text to fill out a webpage to see how your UI looks. You are probably familiar with "lorem ipsum" text generators.

6.11. Extension

6.12. Feature

As mentioned in number 4 above, Emmet is built into VS Code, it has a lorem abbreviation. Emmet is enabled by default for html, haml, pug, slim, jsx, xml, xsl, css, scss, sass, less and stylus files.

Type "lorem" and hit tab, and it will generate a 30-word dummy paragraph.

lorem abbreviation

You can use it to generate multiple blocks of any kind. For example, "p*2>lorem" abbreviation would generate something like this:

<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui dicta minus
  molestiae vel beatae natus eveniet ratione temporibus aperiam harum alias
  officiis assumenda officia quibusdam deleniti eos cupiditate dolore doloribus!
</p>
<p>
  Ad dolore dignissimos asperiores dicta facere optio quod commodi nam tempore
  recusandae. Rerum sed nulla eum vero expedita ex delectus voluptates rem at
  neque quos facere sequi unde optio aliquam!
</p>
Enter fullscreen mode Exit fullscreen mode

7. Autotrimming

Remove trailing whitespace automatically.

The setting I suggest is not an exact like-for-like replacement: the extensions trim whitespace while you edit or via a command; whereas the setting will perform the trimming on save.

7.13. Extension

  • Trailing Spaces (447K downloads) : "Highlight trailing spaces and delete them in a flash!"
  • Autotrim (15K downloads): "Trailing whitespace often exists after editing lines of code, deleting trailing words and so forth. This extension tracks the line numbers where a cursor is active, and removes trailing tabs and spaces from those lines when they no longer have an active cursor."

7.14. Settings

  • Files : Trim Trailing Whitespace: "When enabled, will trim trailing whitespace when saving a file." The default value is false.

7.14.4. settings.json

I exclude Markdown from this because if you want a hard line-break (<br>) in the output, you need to put two or more spaces at the end of a line. It is a part of CommonMark, so I don't want to prevent it.

"files.trimTrailingWhitespace": true,
"[markdown]": {
   "files.trimTrailingWhitespace": false
},
Enter fullscreen mode Exit fullscreen mode

Conclusion

Before you reach for an extension, see if VS Code can do it already. It sounds like an obvious move, but we are all probably guilty of doing it some time. VS Code is adding features regularly, so it is worth checking the changelog every so often.

Discussion (37)

Collapse
robole profile image
Rob OLeary Author

i have the power he-man

Do you have any power user tips?

Collapse
alexanderjanke profile image
Alex Janke

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.

Collapse
robole profile image
Rob OLeary Author

This is Zen Mode. I like this too 🕊🙏

Collapse
stereoplegic profile image
Mike Bybee • Edited on

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

  1. Open the Command Palette (Ctrl+Shift+P).
  2. Run the Preferences: Configure Runtime Arguments command.
  3. This command will open a[n] argv. json file to configure runtime arguments. You might see some default arguments there already.
  4. Add "disable-hardware-acceleration": true.
  5. 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).

Collapse
kretaceous profile image
Abhijit Hota • Edited on

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...

Collapse
paoloduzioni profile image
Paolo Duzioni

Hi there,

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

And maybe assign a custom keyboard shortcut?

Collapse
robole profile image
Rob OLeary Author • Edited on

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

Collapse
kretaceous profile image
Abhijit Hota

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

Thread Thread
robole profile image
Rob OLeary Author

Doh! Hopefully they will fix the bug soon then 😄

Collapse
bias profile image
Tobias Nickel

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.

Collapse
robole profile image
Rob OLeary Author

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.

Collapse
kurtgokhan profile image
Gökhan Kurt • Edited on

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.

Collapse
robole profile image
Rob OLeary Author • Edited on

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.

Collapse
eddylazar profile image
eddyLazar

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

Collapse
robole profile image
Rob OLeary Author • Edited on

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

Collapse
miguelmoramax profile image
miguelmoramax

Nice post, thank you!

Collapse
robole profile image
Rob OLeary Author • Edited on

Glad you liked it! Thanks 😊

Collapse
rowild profile image
Robert Wildling • Edited on

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 !

Collapse
robole profile image
Rob OLeary Author

Thanks Robert. 🙂 Im glad it helps!

Collapse
rowild profile image
Robert Wildling

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? :-)

Thread Thread
robole profile image
Rob OLeary Author • Edited on

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.

Thread Thread
rowild profile image
Robert Wildling

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!!!

Thread Thread
robole profile image
Rob OLeary Author

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? 👍

Collapse
jakeerc profile image
Jakeer

Salam, thanks helpfull

Collapse
andrewbaisden profile image
Andrew Baisden

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.

Collapse
varuns924 profile image
Varun S

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

Collapse
robole profile image
Rob OLeary Author

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

Collapse
pzelnip profile image
Adam Parkin

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. :/

Collapse
robole profile image
Rob OLeary Author • Edited on

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

"emmet.excludeLanguages": [],
"emmet.includeLanguages": {"markdown": "html"},
Collapse
bonstine profile image
Bonnie Simon

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

How do I know if I have it ?

Collapse
robole profile image
Rob OLeary Author • Edited on

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:

Collapse
robole profile image
Rob OLeary Author • Edited on

I opened an issue for this which is in progress.

Collapse
mejanhaque profile image
Muhammad Mejanul Haque

That auto renaming was new for me, Thanks

Collapse
p3yman profile image
Peyman Eskandari

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 👍

Collapse
skaytech profile image
skaytech

Great post Rob!!

Collapse
robole profile image
Rob OLeary Author

Thanks 🙏🙂

Collapse
akarak profile image
akarak

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