Dusk Utilities
A VS Code extension that provides essential tools for working with Dusk projects, specifically designed to streamline file management between ShopifyDusk and raw-sources directories.
Features
🚀 Copy to Raw Sources
Quickly copy files from your ShopifyDusk directory to the corresponding location in raw-sources, maintaining the same directory structure.
Command: Dusk Utilities: Copy to Raw Sources
Usage:
- Open any file in your ShopifyDusk directory
- Run the command from the Command Palette (
Cmd+Shift+P on macOS, Ctrl+Shift+P on Windows/Linux)
- The file will be copied to the same relative path in raw-sources
Example:
- Source:
ShopifyDusk/sections/header.liquid
- Target:
raw-sources/sections/header.liquid
🎨 Copy to Raw Sources (with _extend)
Copy SCSS files from ShopifyDusk to raw-sources with an _extend suffix, perfect for creating extension files.
Command: Dusk Utilities: Copy to Raw Sources (with _extend)
Usage:
- Open a
.scss file in your ShopifyDusk directory
- Run the command from the Command Palette
- The file will be copied with
_extend added to the filename
Example:
- Source:
ShopifyDusk/assets/styles/components/_button.scss
- Target:
raw-sources/assets/styles/components/_button_extend.scss
📦 Dusk Version Status Bar
Displays the current Dusk theme version in the VS Code status bar. The version is read from ShopifyDusk/_var/dusk.ini and updates automatically when the file changes.
Features:
- Automatic activation when a Dusk project is detected
- Real-time updates when
dusk.ini is modified
- Manual refresh available via
Dusk Utilities: Refresh Dusk Version command
🧩 Create Shopify Component
Quickly scaffold new Shopify theme components (blocks, sections, snippets) with optional SASS stylesheets.
Command: Dusk Utilities: Create Shopify Component
Usage:
- Run the command from the Command Palette, or right-click a folder in the Explorer
- Select the component type (Block, Section, or Snippet)
- Enter a component name (lowercase, hyphens allowed, e.g.,
hero-banner)
- Choose whether to create an associated SASS stylesheet
Generated Files (relative to raw-sources/):
| Type |
Liquid File |
Stylesheet (optional) |
| Block |
blocks/{name}.liquid |
assets/sass/blocks/block-{name}.scss |
| Section |
sections/{name}.liquid |
assets/sass/sections/section-{name}.scss |
| Snippet |
snippets/{name}.liquid |
assets/sass/components/component-{name}.scss |
Features:
- Blocks and sections include a ready-to-use schema structure
- Component names are automatically converted to display names for schema titles (e.g.,
hero-banner → Hero Banner)
- Stylesheets are automatically imported at the top of the liquid file
- Existing file detection with overwrite confirmation
Requirements
- Visual Studio Code 1.0.0 or higher
- Files must be located within a
ShopifyDusk directory in your workspace
- For the
_extend command, files must have a .scss extension
Installation
- Clone or download this extension
- Open the extension folder in VS Code
- Press
F5 to run the extension in a new Extension Development Host window
- Or install it directly in VS Code by loading the extension folder
Usage
Basic File Copy
- Open any file in your ShopifyDusk directory
- Press
Cmd+Shift+P (macOS) or Ctrl+Shift+P (Windows/Linux)
- Type "Dusk Utilities: Copy to Raw Sources"
- Press Enter
- The file will be copied and opened in a new tab
Creating Extension Files
- Open a
.scss file in your ShopifyDusk directory
- Press
Cmd+Shift+P (macOS) or Ctrl+Shift+P (Windows/Linux)
- Type "Dusk Utilities: Copy to Raw Sources (with _extend)"
- Press Enter
- The file will be copied with
_extend suffix and opened in a new tab
Creating Shopify Components
- Press
Cmd+Shift+P (macOS) or Ctrl+Shift+P (Windows/Linux)
- Type "Dusk Utilities: Create Shopify Component"
- Select the component type (Block, Section, or Snippet)
- Enter a name using lowercase letters, numbers, and hyphens
- Choose whether to create an associated stylesheet
- The component will be created and opened in a new tab
Alternative: Right-click any folder in the Explorer and select "Dusk Utilities: Create Shopify Component"
Directory Structure Support
The extension automatically maintains the directory structure when copying files and creates components in the correct locations:
raw-sources/
├── blocks/
│ └── hero-banner.liquid # Created by "Create Shopify Component"
├── sections/
│ ├── header.liquid # Copied from ShopifyDusk
│ └── featured-product.liquid # Created by "Create Shopify Component"
├── snippets/
│ └── product-card.liquid # Created by "Create Shopify Component"
├── assets/
│ ├── js/
│ │ └── main.js
│ ├── styles/
│ │ └── components/
│ │ └── _button_extend.scss
│ └── sass/
│ ├── blocks/
│ │ └── block-hero-banner.scss
│ ├── sections/
│ │ └── section-featured-product.scss
│ └── components/
│ └── component-product-card.scss
└── templates/
└── product.liquid
Error Handling
The extension includes comprehensive error handling:
- No active editor: Shows error if no file is currently open
- Wrong directory: Shows error if file is not in a ShopifyDusk directory
- Wrong file type: Shows error if trying to use
_extend command on non-SCSS files
- Copy failures: Shows detailed error messages if file copying fails
- Invalid component name: Validates that names only contain lowercase letters, numbers, and hyphens
- File exists: Prompts for confirmation before overwriting existing components
Development
Building the Extension
cd dusk-utilities
npm install
npm run compile
Running in Development Mode
- Open the extension folder in VS Code
- Press
F5 to launch the Extension Development Host
- Test your commands in the new window
Testing
npm run test
Release Notes
0.1.0
- Added "Create Shopify Component" command
- Generate blocks, sections, and snippets with schema structure
- Optional SASS stylesheet creation with automatic liquid import
- Context menu support for right-click on folders
0.0.2
- Added Dusk version status bar indicator
- Automatic activation when Dusk project is detected
- Real-time version updates when
dusk.ini changes
- Manual refresh command
0.0.1
- Initial release
- Added "Copy to Raw Sources" command
- Added "Copy to Raw Sources (with _extend)" command
- Automatic directory structure maintenance
- Comprehensive error handling
Contributing
- Fork the repository
- Create a feature branch
- Make your changes
- Add tests if applicable
- Submit a pull request
License
This extension is provided as-is for use with Dusk projects.
Enjoy working with Dusk Utilities! 🚀
