-
Notifications
You must be signed in to change notification settings - Fork 8
๐ 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
- ๐ฏ 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
-
Open VSCode User Snippets:
- Press
Ctrl+Shift+P(Windows/Linux) orCmd+Shift+P(Mac) - Type "Preferences: Configure Snippets"
- Select "javascript.json"
- Press
-
Copy the snippet configuration:
- Visit: https://github.com/jurisjs/juris/tree/main/vscode/javascript.json
- Copy the entire JSON content
- Paste it into your
javascript.jsonfile
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
- Create
.vscode/snippets/folder in your project root - Create
javascript.jsonin the snippets folder - Copy the snippet configuration from the GitHub repository
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
};
};
| Prefix | Description |
|---|---|
| jcomp | Basic component with JSDoc |
| jcomplife | Component with lifecycle hooks |
| jheadless | Headless component |
| jcomptyped | Strongly typed component |
| jcompstate | Component with typed state |
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
// Type: jlogin + Tab - Complete login form
// Type: jregister + Tab - Complete registration form
// Type: jauth + Tab - Auth container with tab switching
// Type: jtab + Tab
export const SimpleTab = (props, { getState, setState }) => {
return {
div: {
children: [
// Tab buttons with state management
// Dynamic content switching
]
}//div
};
};
// Type: jform.contact + Tab
{form: {
className: 'contact',
onSubmit: (e) => {
e.preventDefault();
handleSubmit();
},
children: [
// Form fields here
]
}}//form.contact
All component snippets include proper JSDoc annotations:
/**
* @param {Object} props
* @param {JurisContext} context
* @returns {JurisVDOMElement}
*/
- Use
jdiv.containerfor quick className assignment - Use
jbtn#submitfor quick ID assignment - Combine with multi-line formatting for readability
All snippets include proper closing labels:
{div: {
className: 'container',
children: []
}}//div.container
// Use reactive properties for dynamic content
text: () => getState('message'),
className: () => getState('isActive') ? 'active' : 'inactive',
children: () => getState('items', []).map(item => /* ... */)
Add to your VSCode settings for optimal experience:
{
"editor.tabCompletion": "on",
"editor.suggest.snippetsPreventQuickSuggestions": false,
"editor.suggest.showSnippets": "top"
}
For enhanced IntelliSense with .component.js files:
{
"files.associations": {
"*.component.js": "javascript"
}
}
Extend the snippet collection by adding your own patterns to the JSON file.
Share the .vscode/snippets/javascript.json file in your project repository for team-wide consistency.
Found a bug or have a suggestion?
- Visit the Juris GitHub repository
- Check the snippet configuration
- Submit an issue or pull request
- ๐ Juris Framework Documentation
- ๐ง Juris GitHub Repository
- ๐ฎ Online Testing Environment
- ๐๏ธ CodePen Examples
- ๐ฆ NPM Package
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 SnippetsThe 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
- ๐ฏ 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
-
Open VSCode User Snippets:
- Press
Ctrl+Shift+P(Windows/Linux) orCmd+Shift+P(Mac) - Type "Preferences: Configure User Snippets"
- Select "javascript.json"
- Press
-
Copy the snippet configuration:
- Visit: https://github.com/jurisjs/juris/tree/main/vscode/javascript.json
- Copy the entire JSON content
- Paste it into your
javascript.jsonfile
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
- Create
.vscode/snippets/folder in your project root - Create
javascript.jsonin the snippets folder - Copy the snippet configuration from the GitHub repository
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 }; };
| Prefix | Description |
|---|---|
jcomp |
Basic component with JSDoc |
jcomplife |
Component with lifecycle hooks |
jheadless |
Headless component |
jcomptyped |
Strongly typed component |
jcompstate |
Component with typed state |
| 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 |
| 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 |
| Prefix | Description |
|---|---|
jlogin |
Complete login form |
jregister |
Complete registration form |
jauth |
Auth container with tabs |
| 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 |
| Prefix | Description |
|---|---|
jul / jul. / jul#
|
Unordered list |
jol |
Ordered list |
jli |
List item |
jtable / jtable. / jtable#
|
Complete table |
jtr |
Table row |
| 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 |
| Prefix | Description |
|---|---|
jif |
Conditional rendering |
jmap |
Array mapping |
jsub |
State subscription |
jstate |
New local state |
jservice |
Service injection |
| Prefix | Description |
|---|---|
jenhan |
Basic DOM enhancement |
jenhansel |
Enhancement with selectors |
jenhanfn |
Enhancement with function |
| Prefix | Description |
|---|---|
jtemplate |
Template compilation structure |
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
// Type: jlogin + Tab - Complete login form // Type: jregister + Tab - Complete registration form // Type: jauth + Tab - Auth container with tab switching
// Type: jtab + Tab export const SimpleTab = (props, { getState, setState }) => { return { div: { children: [ // Tab buttons with state management // Dynamic content switching ] }//div }; };
// Type: jform.contact + Tab {form: { className: 'contact', onSubmit: (e) => { e.preventDefault(); handleSubmit(); }, children: [ // Form fields here ] }}//form.contact
All component snippets include proper JSDoc annotations:
/** * @param {Object} props * @param {JurisContext} context * @returns {JurisVDOMElement} */
- Use
jdiv.containerfor quick className assignment - Use
jbtn#submitfor quick ID assignment - Combine with multi-line formatting for readability
All snippets include proper closing labels:
{div: { className: 'container', children: [] }}//div.container
// Use reactive properties for dynamic content text: () => getState('message'), className: () => getState('isActive') ? 'active' : 'inactive', children: () => getState('items', []).map(item => /* ... */)
Add to your VSCode settings for optimal experience:
{
"editor.tabCompletion": "on",
"editor.suggest.snippetsPreventQuickSuggestions": false,
"editor.suggest.showSnippets": "top"
}For enhanced IntelliSense with .component.js files:
{
"files.associations": {
"*.component.js": "javascript"
}
}Extend the snippet collection by adding your own patterns to the JSON file.
Share the .vscode/snippets/javascript.json file in your project repository for team-wide consistency.
Found a bug or have a suggestion?
- Visit the [Juris GitHub repository](https://github.com/jurisjs/juris)
- Check the [snippet configuration](https://github.com/jurisjs/juris/tree/main/vscode/javascript.json)
- Submit an issue or pull request
- ๐ [Juris Framework Documentation](https://jurisjs.com/)
- ๐ง [Juris GitHub Repository](https://github.com/jurisjs/juris)
- ๐ฎ [Online Testing Environment](https://jurisjs.com/tests/juris_pure_test_interface.html)
- ๐๏ธ [CodePen Examples](https://codepen.io/jurisauthor)
- ๐ฆ [NPM Package](https://www.npmjs.com/package/juris)
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!