🚀 Juris VSCode Snippets - jurisjs/juris GitHub Wiki

The ultimate VSCode snippet collection for Juris Framework development

Boost your productivity with 200+ intelligent code snippets for building Juris Object VDOM applications. Get complete components, forms, layouts, and patterns with proper JSDoc type annotations.

Juris Framework VSCode License

✨ Features

  • 🎯 200+ Snippets - Complete coverage of Juris patterns
  • 📝 JSDoc Integration - Full type safety with IntelliSense
  • 🏗️ Component Templates - Basic, lifecycle, headless, and typed components
  • 🎨 Layout Elements - All HTML elements with class/ID variants
  • 📋 Form Components - Complete login/register forms with validation
  • 🔄 Interactive Patterns - Tabs, conditional rendering, array mapping
  • 🏷️ Auto-closing Labels - Never lose track of nested structures
  • 📱 Multi-line Formatting - Readable, maintainable code structure

🛠️ Installation

Option 1: Manual Installation (Recommended)

  1. Open VSCode User Snippets:

    • Press Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (Mac)
    • Type "Preferences: Configure Snippets"
    • Select "javascript.json"

  2. Copy the snippet configuration:

Option 2: Direct File Access

Navigate to your VSCode snippets folder and edit directly:

Windows:

%APPDATA%\Code\User\snippets\javascript.json

macOS:

~/Library/Application Support/Code/User/snippets/javascript.json

Linux:

~/.config/Code/User\snippets\javascript.json

Option 3: Workspace-Specific Installation

  1. Create .vscode/snippets/ folder in your project root
  2. Create javascript.json in the snippets folder
  3. Copy the snippet configuration from the GitHub repository

📖 Quick Start

After installation, start typing any snippet prefix and press Tab:

// Type: jcomp + Tab
/**
 * @param {Object} props
 * @param {JurisContext} context
 * @returns {JurisVDOMElement}
 */
const ComponentName = (props, context) => {
    const { getState, setState } = context;

return {
    div: {
        className: 'container',
        children: [
            // Your content here
        ]
    }//div.container
};



};

🎯 Snippet Categories

🏗️ Component Templates

Prefix Description
jcomp Basic component with JSDoc
jcomplife Component with lifecycle hooks
jheadless Headless component
jcomptyped Strongly typed component
jcompstate Component with typed state

🎨 Class & ID Shortcuts

Use the dot notation for className and hash notation for ID:

// Type: jdiv.container + Tab
{div: {
    className: 'container',
    children: []
}}//div.container

// Type: jbtn#submit + Tab

{button: {
id: 'submit',
text: 'Submit',
onClick: () => handleSubmit()
}}//button#submit

💡 Real-World Examples

Authentication System

// Type: jlogin + Tab - Complete login form
// Type: jregister + Tab - Complete registration form  
// Type: jauth + Tab - Auth container with tab switching

Tab Component

// Type: jtab + Tab
export const SimpleTab = (props, { getState, setState }) => {
    return {
        div: {
            children: [
                // Tab buttons with state management
                // Dynamic content switching
            ]
        }//div
    };
};

Form with Validation

// Type: jform.contact + Tab
{form: {
    className: 'contact',
    onSubmit: (e) => {
        e.preventDefault();
        handleSubmit();
    },
    children: [
        // Form fields here
    ]
}}//form.contact

🎯 Best Practices

1. Use JSDoc Types

All component snippets include proper JSDoc annotations:

/**
 * @param {Object} props
 * @param {JurisContext} context
 * @returns {JurisVDOMElement}
 */

2. Leverage Class/ID Shortcuts

  • Use jdiv.container for quick className assignment
  • Use jbtn#submit for quick ID assignment
  • Combine with multi-line formatting for readability

3. Follow Closing Label Convention

All snippets include proper closing labels:

{div: {
    className: 'container',
    children: []
}}//div.container

4. State Management Patterns

// Use reactive properties for dynamic content
text: () => getState('message'),
className: () => getState('isActive') ? 'active' : 'inactive',
children: () => getState('items', []).map(item => /* ... */)

🔧 Configuration

VSCode Settings

Add to your VSCode settings for optimal experience:

{
  "editor.tabCompletion": "on",
  "editor.suggest.snippetsPreventQuickSuggestions": false,
  "editor.suggest.showSnippets": "top"
}

File Associations

For enhanced IntelliSense with .component.js files:

{
  "files.associations": {
    "*.component.js": "javascript"
  }
}

🌟 Advanced Usage

Custom Snippet Creation

Extend the snippet collection by adding your own patterns to the JSON file.

Team Sharing

Share the .vscode/snippets/javascript.json file in your project repository for team-wide consistency.

🤝 Contributing

Found a bug or have a suggestion?

  1. Visit the Juris GitHub repository
  2. Check the snippet configuration
  3. Submit an issue or pull request

📚 Resources

📄 License

MIT License - see the Juris repository for details.

Made with ❤️ for the Juris Framework community

Boost your productivity and build amazing Juris applications faster than ever!

# 🚀 Juris VSCode Snippets

The ultimate VSCode snippet collection for Juris Framework development

Boost your productivity with 200+ intelligent code snippets for building Juris Object VDOM applications. Get complete components, forms, layouts, and patterns with proper JSDoc type annotations.

Juris Framework VSCode License

✨ Features

  • 🎯 200+ Snippets - Complete coverage of Juris patterns
  • 📝 JSDoc Integration - Full type safety with IntelliSense
  • 🏗️ Component Templates - Basic, lifecycle, headless, and typed components
  • 🎨 Layout Elements - All HTML elements with class/ID variants
  • 📋 Form Components - Complete login/register forms with validation
  • 🔄 Interactive Patterns - Tabs, conditional rendering, array mapping
  • 🏷️ Auto-closing Labels - Never lose track of nested structures
  • 📱 Multi-line Formatting - Readable, maintainable code structure

🛠️ Installation

Option 1: Manual Installation (Recommended)

  1. Open VSCode User Snippets:

    • Press Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (Mac)
    • Type "Preferences: Configure User Snippets"
    • Select "javascript.json"

  2. Copy the snippet configuration:

Option 2: Direct File Access

Navigate to your VSCode snippets folder and edit directly:

Windows:

%APPDATA%\Code\User\snippets\javascript.json

macOS:

~/Library/Application Support/Code/User/snippets/javascript.json

Linux:

~/.config/Code/User\snippets\javascript.json

Option 3: Workspace-Specific Installation

  1. Create .vscode/snippets/ folder in your project root
  2. Create javascript.json in the snippets folder
  3. Copy the snippet configuration from the GitHub repository

📖 Quick Start

After installation, start typing any snippet prefix and press Tab:

// Type: jcomp + Tab
/**
 * @param {Object} props
 * @param {JurisContext} context
 * @returns {JurisVDOMElement}
 */
const ComponentName = (props, context) => {
    const { getState, setState } = context;
    
    return {
        div: {
            className: 'container',
            children: [
                // Your content here
            ]
        }//div.container
    };
};

🎯 Snippet Categories

🏗️ Component Templates

Prefix Description
jcomp Basic component with JSDoc
jcomplife Component with lifecycle hooks
jheadless Headless component
jcomptyped Strongly typed component
jcompstate Component with typed state

🎨 Layout Elements

Prefix Description
jdiv / jdiv. / jdiv# Div container
jsection / jsection. / jsection# Section element
jheader / jheader. / jheader# Header element
jfooter / jfooter. / jfooter# Footer element
jnav / jnav. / jnav# Navigation element
jmain / jmain. / jmain# Main content element
jarticle / jarticle. / jarticle# Article element
jaside / jaside. / jaside# Aside/sidebar element

📋 Form Elements

Prefix Description
jform / jform. / jform# Form with submit handler
jinput / jinput. / jinput# Input with reactive value
jselect / jselect. / jselect# Select dropdown
jbtn / jbtn. / jbtn# Button elements
jtextarea Textarea with reactive value
jlabel Label element

🔐 Authentication Forms

Prefix Description
jlogin Complete login form
jregister Complete registration form
jauth Auth container with tabs

📝 Text & Media Elements

Prefix Description
jp / jp. / jp# Paragraph element
jspan / jspan. / jspan# Span element
jh1 / jh1. / jh1# Heading elements (h1-h6)
jimg Image element
jlink Anchor/link element
jtext Reactive text element

📊 Lists & Tables

Prefix Description
jul / jul. / jul# Unordered list
jol Ordered list
jli List item
jtable / jtable. / jtable# Complete table
jtr Table row

🎛️ Interactive Components

Prefix Description
jtab Simple tab component
jtabs Dynamic tab system
jbtns3 Quick 3-button array
jdetails Details/summary element
jdialog Dialog modal
jprogress Progress bar
jmeter Meter element

🔄 Dynamic Patterns

Prefix Description
jif Conditional rendering
jmap Array mapping
jsub State subscription
jstate New local state
jservice Service injection

🎨 Enhancement Patterns

Prefix Description
jenhan Basic DOM enhancement
jenhansel Enhancement with selectors
jenhanfn Enhancement with function

📋 Template Compilation

Prefix Description
jtemplate Template compilation structure

🎨 Class & ID Shortcuts

Use the dot notation for className and hash notation for ID:

// Type: jdiv.container + Tab
{div: {
    className: 'container',
    children: []
}}//div.container

// Type: jbtn#submit + Tab  
{button: {
    id: 'submit',
    text: 'Submit',
    onClick: () => handleSubmit()
}}//button#submit

💡 Real-World Examples

Authentication System

// Type: jlogin + Tab - Complete login form
// Type: jregister + Tab - Complete registration form  
// Type: jauth + Tab - Auth container with tab switching

Tab Component

// Type: jtab + Tab
export const SimpleTab = (props, { getState, setState }) => {
    return {
        div: {
            children: [
                // Tab buttons with state management
                // Dynamic content switching
            ]
        }//div
    };
};

Form with Validation

// Type: jform.contact + Tab
{form: {
    className: 'contact',
    onSubmit: (e) => {
        e.preventDefault();
        handleSubmit();
    },
    children: [
        // Form fields here
    ]
}}//form.contact

🎯 Best Practices

1. Use JSDoc Types

All component snippets include proper JSDoc annotations:

/**
 * @param {Object} props
 * @param {JurisContext} context
 * @returns {JurisVDOMElement}
 */

2. Leverage Class/ID Shortcuts

  • Use jdiv.container for quick className assignment
  • Use jbtn#submit for quick ID assignment
  • Combine with multi-line formatting for readability

3. Follow Closing Label Convention

All snippets include proper closing labels:

{div: {
    className: 'container',
    children: []
}}//div.container

4. State Management Patterns

// Use reactive properties for dynamic content
text: () => getState('message'),
className: () => getState('isActive') ? 'active' : 'inactive',
children: () => getState('items', []).map(item => /* ... */)

🔧 Configuration

VSCode Settings

Add to your VSCode settings for optimal experience:

{
  "editor.tabCompletion": "on",
  "editor.suggest.snippetsPreventQuickSuggestions": false,
  "editor.suggest.showSnippets": "top"
}

File Associations

For enhanced IntelliSense with .component.js files:

{
  "files.associations": {
    "*.component.js": "javascript"
  }
}

🌟 Advanced Usage

Custom Snippet Creation

Extend the snippet collection by adding your own patterns to the JSON file.

Team Sharing

Share the .vscode/snippets/javascript.json file in your project repository for team-wide consistency.

🤝 Contributing

Found a bug or have a suggestion?

  1. Visit the [Juris GitHub repository](https://github.com/jurisjs/juris)
  2. Check the [snippet configuration](https://github.com/jurisjs/juris/tree/main/vscode/javascript.json)
  3. Submit an issue or pull request

📚 Resources

📄 License

MIT License - see the [Juris repository](https://github.com/jurisjs/juris) for details.

Made with ❤️ for the Juris Framework community

Boost your productivity and build amazing Juris applications faster than ever!

⚠️ **GitHub.com Fallback** ⚠️