Assets Helper
🌟 Auto-complete and preview Image/SVG resources in TSX files.
💡 Usage
Type png or svg in jsx/tsx to trigger code completion, other types of image resources will also use png as the trigger keyword and prefix
Inside a .tsx file:
function Test() {
return (
<div>
<h1>Hello World</h1>
png {/* Type png or svg here to trigger code completion */}
</div>
)
}
export default Test
📦 Features
- Auto-complete Image and SVG file names
- Preview images directly in completion suggestions
- Insert import paths with support for alias prefixes
- Wrap inserted components with custom snippet templates
⚙️ Configuration
You can customize the behavior of the extension via your VS Code settings.json:
| Setting |
Type |
Description |
assetsHelper.svgFolder |
string |
Relative path to the SVG folder (from project root) |
assetsHelper.pngFolder |
string |
Relative path to the Image folder (from project root) |
assetsHelper.insertImportStart |
string |
A string to be prepended to the import path when inserting import statements, typically used to support path aliases (e.g., @/assets/...) |
assetsHelper.svgCompleteStart |
string |
A string to be automatically inserted before the generated SVG snippet during code completion |
assetsHelper.svgCompleteEnd |
string |
A string to be automatically inserted after the generated SVG snippet during code completion |
assetsHelper.pngCompleteStart |
string |
A string to be automatically inserted before the generated PNG snippet during code completion |
assetsHelper.pngCompleteEnd |
string |
A string to be automatically inserted after the generated PNG snippet during code completion |
❓ FAQ (Frequently Asked Questions)
🔹 Why doesn't auto-completion trigger inside src={} in TSX?
This is a known limitation due to how VS Code prioritizes completion providers.
In TypeScript and TSX files, the built-in TypeScript language service takes precedence in many contexts—especially when inside expressions like:
<Image src={} />
| |
