Assets Exporter (JS/TS/Less/Sass/Css/Minifier)

Marketplace · Repository

Are you tired of wiring external tools just to build a few CSS or JavaScript assets? Maybe the project is legacy, maybe it cannot carry its own build setup, or maybe a full pipeline is more setup than the asset deserves.

Assets Exporter is for that gap: register the files that should be compiled, bundled, minified, and mapped, then use a small VS Code button/menu whenever you want to build them. Configure once, click Assets, and keep working inside the editor.

The extension exports workspace CSS, Less, Sass/SCSS, JavaScript, and TypeScript source files from configured source/target pairs. It supports transforms, bundling, minified outputs, source maps, dependency-aware watch mode, persisted logs, diagnostics, and a Webview editor for managing asset entries.

Preview

1. Commands

Show the Assets Exporter: commands available from the VS Code Command Palette.

2. Entries editor

3. Asset window

User Guide

Installation

Install from the Visual Studio Marketplace:

code --install-extension ITEM-PIXEL.assets-exporter-ts-js-less-sass-vscode

Or install from VS Code:

1. Open Extensions with Ctrl+Shift+X.
2. Search for Assets Exporter or ITEM-PIXEL.assets-exporter-ts-js-less-sass-vscode.
3. Click Install.

You can also open the Marketplace page directly:

https://marketplace.visualstudio.com/items?itemName=ITEM-PIXEL.assets-exporter-ts-js-less-sass-vscode

Extension identifier:

ITEM-PIXEL.assets-exporter-ts-js-less-sass-vscode

Setup

1. Open a workspace folder in VS Code.
2. Run Assets Exporter: Manage Asset Entries from the Command Palette, or click the Assets status bar item and select Manage Asset Entries.
3. Add entries from the supported project files list, using All, CSS, Less, Sass, JS, or TS filters when needed.
4. Set each entry source, target, type, watch, source map, minify, and target browser options.
5. Click Save.
6. Run Assets Exporter: Export All Assets, or enable Watch Assets.

Commands

Status Bar

The status bar item is shown on the left side as a VS Code icon plus Assets.

Main Quick Pick

Open it with Assets Exporter: Export Assets or by clicking the status bar item.

Entry Action Quick Pick

Selecting a registered entry from the main Quick Pick opens entry-specific actions.

Entries Editor

The entries editor is a VS Code Webview panel titled Assets Exporter: Entries.

Entry Fields

Supported Inputs and Outputs

Generated output files are written atomically where possible, generated outputs are ignored by watch/discovery safeguards, and duplicate enabled target paths are reported as diagnostics.

File Discovery

The editor scans workspace folders for supported source files and filters them by type in the Webview. By default it:

• Uses .gitignore rules.
• Skips generated outputs.
• Skips common generated or dependency directories such as .git, node_modules, dist, out, playwright-report, and test-results.
• Supports multi-root workspaces through the workspaceFolder entry field.

When Filter .gitignore is disabled, ignored supported files can appear in the current file type filter and are marked as .gitignore matches. This checkbox is not saved; reopening the editor enables it again.

Watch Mode

Watch mode resolves each enabled entry and its dependencies, creates file watchers, debounces file events, exports the affected entry, and refreshes dependency watchers after each watched export.

Generated output paths are ignored to avoid export loops. assetsExporter.watchOnStartup can start watch mode automatically when VS Code finishes activating the extension.

Logs and Diagnostics

Assets Exporter writes runtime information to:

• The Assets Exporter output channel.
• Persisted trace and error logs under the VS Code extension log location.
• VS Code diagnostics for validation, dependency, and pipeline issues when a source or target file can be associated.

Saved logs are rotated by size and retained by count/age settings. Clear Saved Asset Logs deletes only extension-owned log files, not generated asset outputs.

Configuration

Example .vscode/settings.json:

{
  "assetsExporter.entries": [
    {
      "id": "main-styles",
      "enabled": true,
      "type": "less",
      "input": "src/styles/main.less",
      "output": "public/css/main.css",
      "watch": true,
      "sourceMap": true,
      "minify": true,
      "targets": "defaults"
    },
    {
      "id": "app",
      "enabled": true,
      "type": "typescript",
      "input": "src/app/app.ts",
      "output": "public/js/app.js",
      "watch": true,
      "sourceMap": true,
      "minify": true,
      "tsconfig": "tsconfig.json",
      "external": [],
      "format": "iife",
      "platform": "browser"
    }
  ],
  "assetsExporter.watchOnStartup": false,
  "assetsExporter.browserslist": "defaults",
  "assetsExporter.logging.level": "trace",
  "assetsExporter.logging.maxFileSizeKb": 1024,
  "assetsExporter.logging.maxFiles": 5,
  "assetsExporter.logging.autoClearDays": 7
}

Developer Guide

This project is developed at karolva/assets-exporter-ts-js-less-sass-vscode.

Local Setup

Requirements from package.json:

• VS Code: ^1.118.0
• Node.js: >=24.15.0

Clone, install, and validate:

git clone https://github.com/karolva/assets-exporter-ts-js-less-sass-vscode.git
cd assets-exporter-ts-js-less-sass-vscode
npm install
npm run type-check
npm run lint
npm run format:check
npm run test:ui
npm run test:all

Launch and Tasks

Test Matrix

Manual Test App

test/testapp is a complete sample workspace for validating real exported assets in a browser. It contains a Vite website with CSS, Less, SCSS, Sass, native JavaScript, and TypeScript source files, plus .vscode/settings.json entries that compile from assets/source into blank placeholder files under assets/dist. The test app uses assets/dist as Vite's static public directory, so it opens without missing-file errors before export and becomes styled/interactive after compilation.

Use it when you want to manually confirm that exports look and behave correctly:

cd test/testapp
npm install

Then open test/testapp as the VS Code workspace, run Assets Exporter: Export All Assets, and validate:

npm run test:outputs
npm run dev

See test/testapp/README.md for the full browser checklist and the entry-to-output map.

Build a Local VSIX

Package to the project dist folder:

npm run package:vsix:dist

Install the generated VSIX:

code --install-extension .\dist\assets-exporter-ts-js-less-sass-vscode-0.0.1.vsix --force

Package to the project root instead:

npm run package:vsix

The extension entry point is bundled to dist/extension.js. Runtime Webview media is shipped from media/.

Packaging Notes

This extension uses runtime packages that include platform-specific binaries or native/runtime variants, including esbuild, lightningcss, and sass-embedded. Validate the packaged VSIX on the platform where it is built.

README preview images use relative paths so they render both in local Markdown preview and on the Visual Studio Marketplace package page. When changing icon.png or files under images/, keep those files included in the VSIX and push them to the repository before publishing a Marketplace release.

For a Marketplace release across win32-x64, win32-arm64, linux-x64, linux-arm64, darwin-x64, and darwin-arm64, build and smoke-test target packages on each platform or use a target-specific release pipeline.

Publishing Checklist

• Confirm package.json.publisher is ITEM-PIXEL.
• Confirm package.json.name is assets-exporter-ts-js-less-sass-vscode.
• Confirm README images render locally and from the packaged Marketplace page.
• Run npm run test:all.
• Build the release VSIX with npm run package:vsix:dist.
• Publish only from an account authorized for the configured publisher.

References

• Marketplace: ITEM-PIXEL.assets-exporter-ts-js-less-sass-vscode
• Repository: karolva/assets-exporter-ts-js-less-sass-vscode
• VS Code Webview API: Webview API
• VS Code Commands guide: Commands
• VS Code Extension Manifest reference: Extension Manifest
• VS Code Publishing guide: Publishing Extensions