Christian Heilmann

Quick VS Code tip: Automatically add image width and height to images

Wednesday, April 14th, 2021 at 2:14 pm

Command Menu in VS Code to trigger the Emmet image size script

One thing that keeps amazing me about Visual Studio Code is how much it helps you automate annoying tasks when you write code. For example, if you add an img tag to the document you need to know the src and find out the width and height to avoid reflow issues when the image was loaded. You also need to add an alt attribute either to provide an alternative text or to prevent assistive technology to read out the src attribute instead.

You can do this by following these steps:

  • Start the img tag
  • As soon as you write src=” VS Code gives you an autocomplete for local images.
  • Close the img tag (this is important)
  • Use the Command Palette” (CMD + Shift + P on Mac or Ctrl + Shift + P on Linux / Windows) and type “size” to trigger the Emmet size script that automatically adds width and height.

You can see it in this screencast:

Automatic addition of width and height on images in VS Code using emmet

My setup also warns me when I have images without any alt attribute. It puts a wavy line under any element with a problem like the img tag and shows the error right next to it. I am using two extensions for this: webhint for VS Code and Error Lens.

Share on Mastodon (needs instance)

Share on Twitter

Newsletter

Check out the Dev Digest Newsletter I write every week for WeAreDevelopers. Latest issues:

160: Graphs and RAGs explained and VS Code extension hacks Graphs and RAG explained, how AI is reshaping UI and work, how to efficiently use Cursor, VS Code extensions security issues.
159: AI pipelines, 10x faster TypeScript, How to interview How to use LLMs to help you write code and how much electricity does that use? Is your API secure? 10x faster TypeScript thanks to Go!
158: 🕹️ Super Mario AI 🔑 API keys in LLMs 🤙🏾 Vibe Coding Why is AI playing Super Mario? How is hallucinating the least of our worries and what are rules for developing Safety Critical Code?
157: CUDA in Python, Gemini Code Assist and back-dooring LLMs We met with a CUDA expert from NVIDIA about the future of hardware, we look at how AI fails and how to play pong on 140 browser tabs.
156: Enterprise dead, all about Bluesky and React moves on! Learn about Bluesky as a platform, how to build a React App and how to speed up SQL. And play an impossible game in the browser.

My other work: