---

Vizality Snippets (VSCode Extension)

Description

This extension is a collection of VSCode snippets meant to make development quicker for Vizality plugin and theme developers. It includes some JS, React, JSON, and SCSS snippets.

If you don't know what Vizality is, it is a client modification for Discord which allows you to load plugins and themes and includes lots of built-in options and customizations. You can find out more at vizality.com.

All of the JS snippets are included in the JSX snippets, because the JS snippets are still perfectfly applicable in JSX files. If you have any ideas that you think would be a good addition, or something that you use regularly as a Vizality addon developer, feel free to reach out to me or submit a Pull Request, I'm always open to feedback and suggestions!

Supported Languages (File Extensions)

• JavaScript (.js)
• JavaScript React (.jsx)
• JavaScript Object Notation (.json)
• Sassy Cascading Style Sheets (.scss)
• Cascading Style Sheets (.css)

Snippets

Below is a list of all available snippets and the triggers of each one. The ⇥ means the TAB key.

JS Snippets

Trigger	Alias	Description
vzp→	vzplug, vz-plugin	Creates a Vizality plugin class scaffold.
vzi→	vzinj, vz-inject	Creates a function injection scaffold.
vzw→	vzweb, vz-webpack	Imports Vizality's webpack module.
vzc→	vzcomp, vz-component	Imports Vizality's components module.
vzcn→	vzconst, vz-constant	Imports Vizality's constants module.
vzd→	vzdisc, vz-discord	Imports Vizality's discord module.
vzh→	vzhttp, vz-http	Imports Vizality's http module.
vz18→	vzi18n, vz-i18n	Imports Vizality's i18n module.
vzr→	vzreact, vz-react	Imports the React module.
vzrm→	---	Imports the React module, with memo.
vzu→	vzutil, vz-util	Imports Vizality's util module.
vzgfc→	---	Gets a functional component by its displayName.
vzgm→	---	Gets a webpack module by its properties.
vzgmd→	---	Gets a webpack module by its display name.

JSX Snippets

Trigger	Alias	Description
vzp→	vzplug, vz-plugin	Creates a Vizality plugin class scaffold.
vzs→	vzset, vz-settings	Creates a Vizality plugin settings functional component scaffold.
vzi→	vzinj, vz-inject	Creates a function injection scaffold.
vzw→	vzweb, vz-webpack	Imports Vizality's webpack module.
vzc→	vzcomp, vz-component	Imports Vizality's components module.
vzcn→	vzconst, vz-constant	Imports Vizality's constants module.
vzd→	vzdisc, vz-discord	Imports Vizality's discord module.
vzh→	vzhttp, vz-http	Imports Vizality's http module.
vz18→	vzi18n, vz-i18n	Imports Vizality's i18n module.
vzr→	vzreact, vz-react	Imports the React module.
vzrm→	---	Imports the React module, with memo.
vzu→	vzutil, vz-util	Imports Vizality's util module.
vzgfc→	---	Gets a functional component by its displayName.
vzgm→	---	Gets a webpack module by its properties.
vzgmd→	---	Gets a webpack module by its display name.
vzfc→	---	Creates a React functional component scaffold.
vzcc→	---	Creates a React class component scaffold.
vzus→	vzstate, vz-state	Sets up a React useState hook.

JSON Snippets

Trigger	Alias	Description
vzp→	vzplugin, vz-plugin	Creates a Vizality plugin manifest scaffold.
vzt→	vztheme, vz-theme	Creates a Vizality theme manifest scaffold.

SCSS Snippets

Trigger	Alias	Description
vzs→	vzsass, vz-sass	Imports the Vizality Sass library.
v--→	var(--	Shows intellisense options for Discord's standard CSS variables.

CSS Snippets

Trigger	Alias	Description
v--→	var(--	Shows intellisense options for Discord's standard CSS variables.

Todo

• Add built-in Vizality CSS variables to SCSS/CSS intellisense