Rob O'Leary

VS Code - You don’t need that extension

7 min read

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 tag pairs

1.1. Extension

1.2. Setting

Currently, linked editing is supported in HTML, XML, and JSX files. For a recent discussion on the topic, check out the post below.

VS Code - Auto rename HTML tags in React, Vue, and others

Auto renaming of HTML tags has been in VS Code for ages. However, this functionality has been conspiciously absent from JSX. Has it been added yet?

1.2.1. settings.json

JSON
{
  "editor.linkedEditing": true
}

2. Auto closing HTML tags

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

2.1. Extension

2.2. Settings

2.2.1. settings.json

JSON
{
  "html.autoClosingTags": true,
  "javascript.autoClosingTags": true,
  "typescript.autoClosingTags": true
}

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

3.2. Feature and Settings

You can 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 option

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

4.2. Settings

4.2.1. settings.json

JSON
{
  "javascript.suggest.autoImports": true,
  "typescript.suggest.autoImports": true,
  "javascript.updateImportsOnFileMove.enabled": "always",
  "typescript.updateImportsOnFileMove.enabled": "always"
}

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.

JSON
"editor.codeActionsOnSave": {
    "source.organizeImports": true
}

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

5.2. Feature

Emmet is built into VS Code. Emmet offers abbreviation and snippet expansions for HTML and CSS. 🤫 You can read the VS Code User Guide for more info.

Emmet is enabled by default for html, haml, pug, slim, jsx, xml, xsl, css, scss, sass, less and stylus files.

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

HTML Boilerplate

There are abbreviations which use CSS style selectors such as:

HTML
ul>li*5

which produces this:

HTML
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

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:

JSON
"emmet.includeLanguages": {
  "vue-html": "html",
  "javascript":"javascriptreact"
}

There is a 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.

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

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

6.2. Feature

As mentioned in number 4 above, Emmet is built into VS Code, it has a lorem abbreviation.

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:

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

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

7.2. Settings

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

JSON
{
  "files.trimTrailingWhitespace": true,
  "[markdown]": {
    "files.trimTrailingWhitespace": false
  }
}

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

There is a part 2 to this article with more suggestions!

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

VS Code has builtin features and settings that ably do the work of many popular extensions. Take a look, you may not need that extension!

Tagged