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

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

1. Clone or download this extension
2. Open the extension folder in VS Code
3. Press F5 to run the extension in a new Extension Development Host window
4. Or install it directly in VS Code by loading the extension folder

Usage

Basic File Copy

1. Open any file in your ShopifyDusk directory
2. Press Cmd+Shift+P (macOS) or Ctrl+Shift+P (Windows/Linux)
3. Type "Dusk Utilities: Copy to Raw Sources"
4. Press Enter
5. The file will be copied and opened in a new tab

Creating Extension Files

1. Open a .scss file in your ShopifyDusk directory
2. Press Cmd+Shift+P (macOS) or Ctrl+Shift+P (Windows/Linux)
3. Type "Dusk Utilities: Copy to Raw Sources (with _extend)"
4. Press Enter
5. The file will be copied with _extend suffix and opened in a new tab

Directory Structure Support

The extension automatically maintains the directory structure when copying files:

ShopifyDusk/
├── sections/
│   ├── header.liquid
│   └── footer.liquid
├── assets/
│   ├── js/
│   │   └── main.js
│   └── styles/
│       └── components/
│           └── _button.scss
└── templates/
    └── product.liquid

raw-sources/
├── sections/
│   ├── header.liquid
│   └── footer.liquid
├── assets/
│   ├── js/
│   │   └── main.js
│   └── styles/
│       └── components/
│           └── _button_extend.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

Development

Building the Extension

cd dusk-utilities
npm install
npm run compile

Running in Development Mode

1. Open the extension folder in VS Code
2. Press F5 to launch the Extension Development Host
3. Test your commands in the new window

Testing

npm run test

Release Notes

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

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

License

This extension is provided as-is for use with Dusk projects.

Enjoy working with Dusk Utilities! 🚀