CxJS Snippets
A VS Code extension providing useful code snippets for CxJS framework development. This extension includes snippets for creating components, controllers, models, and other common CxJS patterns.
Features
This extension provides the following snippets for JavaScript, TypeScript:
Available Snippets
| Snippet Name |
Prefix |
Description |
Generated Code |
| Print to console |
log, console |
Inserts a console.log statement |
console.log(''); |
| Create CxJs component |
cmp, cxcomponent |
Creates a CxJS functional component |
Full functional component boilerplate with createFunctionalComponent |
| Create CxJs controller |
con, cxcontroller |
Creates a CxJS controller class |
Controller class with onInit() and onDestroy() methods |
| Try catch block |
trc, cxtrycatch |
Creates a try-catch block with error toast |
Try-catch block with showErrorToast(e) |
| Hot promise window |
hotwin, cxhotwindow |
Creates a hot promise window factory |
Complete window factory with props interface and configuration |
| Create model |
mod, cxmodel |
Creates a typed CxJS model |
Model interface with createAccessorModelProxy |
Usage
- Start typing one of the prefix keywords in your JavaScript/TypeScript file
- Select the snippet from the autocomplete dropdown
- Press
Tab to insert the snippet
- Use
Tab to navigate between placeholders in the snippet
Example: Creating a CxJS Component
Type cmp or cxcomponent and press Tab:
import { createFunctionalComponent } from "cx/ui";
export default createFunctionalComponent(() => (
<cx>
<div>// cursor position</div>
</cx>
));
Example: Creating a CxJS Controller
Type con or cxcontroller and press Tab:
import { Controller } from "cx/ui";
export default class extends Controller {
onInit() {}
onDestroy() {}
}
Example: Creating a Typed Model
Type mod or cxmodel and press Tab:
import { createAccessorModelProxy } from "cx/data";
export interface Model {
$page: {
/* your properties here */
};
}
export default createAccessorModelProxy<Model>();
Requirements
- VS Code 1.50.0 or higher
- CxJS framework project
Supported Languages
- JavaScript (
.js, .jsx)
- TypeScript (
.ts, .tsx)
Documentation
For more information about CxJS:
Release Notes
1.0.0
Initial release with 6 essential CxJS snippets
Enjoy coding with CxJS!
