Skip to content
| Marketplace
Sign in
Visual Studio Code>Snippets>Image SnippetsNew to Visual Studio Code? Get it now.
Image Snippets

Image Snippets

ron0115

|
9,657 installs
| (1) | Free
generate image snippets insert to your editor
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Image Snippets

"Image Snippets" can detect your image source path at last line, auto complete some snippets such as width / height.

Features

Custom your snippets template

width:${width}px; height:${height}px;

feat-default

background-size: ${width}px ${height}px;

feat-custom

detect alias in project

tsconfig.json or jsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}
.icon {
  background: url(~@/img/icon.png);
  /* parse to path: ${rootDir}/src/img/icon.png */
  /* and return snippets below */
}

Extension Settings

  • Extension.tpl: Custom snippets template, (e.g. width: ${width}px;)

    some Available Variables below to inject into template

    variable description
    width image original width
    height image original height

TODO

  • [x] Support alias detected in tsconfig.json or jsconfig.json
  • [x] Support http(s) url detect
  • [ ] Support Array for Extention.tpl, set multi spinnets avaliable!
  • [ ] Get more variables about image information injects to template if need
  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft