Snippets Ranger
-Rounding them up!
-
-
-
+
+
-
-
-
-
-
+
+
+
+
+
-
-
-
Oucho Gaucho! 🌵 Nothing to round up! 🤠
`; + +/** + * Creates the HTML for a section for a category of snippets e.g. "project" for snippets defined in + * the currently opened project. + * @param {SnippetsFile} snippetsFile - The snippets file you want the section based on. + * @param {string} category - The category of snippets. Examples are: project, user, app. + * @returns {string} The HTML for the section + */ +let createCategorySection = (snippetsFiles, category) => { + let title = `${format.capitalize(category)} Snippets`; + let opening = `No snippets.
`; + } + + html += `No snippets.
`; + } + + html += `${language}";
+ body += format.escapeBody(snippet.body);
+ body += "${item}Oucho Gaucho! 🌵 Nothing to round up! 🤠
`; - -/** - * View for Snippet Ranger. - */ -class View { - constructor(context) { - this.context = context; - this.panel = vscode.window.createWebviewPanel( - "snippetView", - "Snippets Ranger", - vscode.ViewColumn.One, - { - enableScripts: true, - retainContextWhenHidden: true, - } - ); - - this.snippetsFetcher = new SnippetsFetcher(this.context); - - this.panel.webview.onDidReceiveMessage( - async (message) => { - // eslint-disable-next-line default-case - switch (message.command) { - case "openSnippetFile": { - // path is encoded, so must decode first! - let uri = vscode.Uri.file(decodeURIComponent(message.path)); - await vscode.window.showTextDocument(uri); - break; - } - case "editSnippet": { - // path is encoded, so must decode first! - let uri = vscode.Uri.file(decodeURIComponent(message.path)); - await Window.showSnippet(uri, message.snippetName); - break; - } - case "deleteSnippet": { - // path is encoded, so must decode first! - let uri = vscode.Uri.file(decodeURIComponent(message.path)); - - let snippetsEditor = new SnippetsEditor(context); - - await snippetsEditor.deleteSnippet(uri, message.snippetName); - break; - } - } - }, - {}, - this.context.subscriptions - ); - - this.userIDs = []; - this.extensionIDs = []; - this.appIDs = []; - this.projectIDs = []; - } - - /** - * Show the web view. - */ - async show() { - this.getLoadingWebviewContent().then((html) => { - this.panel.webview.html = html; - }); - - this.getWebviewContent().then((html) => { - this.panel.webview.html = html; - }); - } - - /** - * Get the HTML for the loading page. - */ - async getLoadingWebviewContent() { - const stylesSrc = this.getStylesheetWebviewUri(); - - let html = ` - - - -Rounding them up!
-Available in the following languages:
${languages}`; - - // encodeURIComponent prevents funny business with charcters especially with slashes - let uri = encodeURIComponent(snippets.path); - section += ``; - - section += this.getSnippetsTable(snippets); - section += `| Prefix | Name | Description | Body | `; - - if (snippetsCollection.scoped === true) { - tableStart += `Scope | `; - } - - tableStart += `Action | `; - const tableEnd = `
|---|
";
- table += Formatter.escapeBody(snippet.body);
- table += "Rounding them up!
+Oucho Gaucho!`;
+
+ assert.strictEqual(section.includes(expected), true);
+ });
+ });
+});
diff --git a/test/suite/view/file-section.test.js b/test/suite/view/file-section.test.js
new file mode 100644
index 0000000..409808f
--- /dev/null
+++ b/test/suite/view/file-section.test.js
@@ -0,0 +1,66 @@
+const assert = require("assert");
+const SnippetsFile = require("../../../src/model/snippets-file");
+const { createFileSection } = require("../../../src/view/file-section");
+
+describe("file-section.js", () => {
+ describe("createFileSection()", () => {
+ it("should create a section with a heading and a 'view source' button", () => {
+ let snippets = [];
+ snippets[0] = {
+ name: "Region Start",
+ prefix: "#region",
+ body: ["//#region"],
+ description: "Folding Region Start",
+ scope: "",
+ };
+
+ let snippetsFile = new SnippetsFile(
+ "/somepath/java.code-snippets",
+ snippets
+ );
+
+ let section = createFileSection(snippetsFile);
+
+ let expected = ` No snippets`;
+
+ assert.strictEqual(section.includes(expected), true);
+ });
+ });
+});
diff --git a/test/suite/view/snippets-table.test.js b/test/suite/view/snippets-table.test.js
new file mode 100644
index 0000000..4f0bd8d
--- /dev/null
+++ b/test/suite/view/snippets-table.test.js
@@ -0,0 +1,72 @@
+const assert = require("assert");
+const SnippetsFile = require("../../../src/model/snippets-file");
+const { createSnippetsTable } = require("../../../src/view/snippets-table");
+
+describe("snippets-table.js", () => {
+ describe("createSnippetsTable()", () => {
+ let editIcon = ``;
+ let deleteIcon = ``;
+
+ it("should create a table from a snippets file", () => {
+ let snippets = [];
+ snippets[0] = {
+ name: "Region Start",
+ prefix: "#region",
+ body: ["//#region"],
+ description: "Folding Region Start",
+ scope: "",
+ };
+
+ let snippetsFile = new SnippetsFile(
+ "/somepath/java.code-snippets",
+ snippets
+ );
+
+ let table = createSnippetsTable(snippetsFile);
+
+ let expected = ` Oucho Gaucho! 🌵 Nothing to round up! 🤠 Available in the following languages: Available in the following languages: Available in the following languages: Available in the following languages: Available in the following languages: Available in the following languages: Available in the following languages: Available in the following languages: Available in the following languages: Available in the following languages: Available in the following languages: Available in the following languages: Available in the following languages: Available in the following languages: Available in the following languages: Available in the following languages: Available in the following languages: Available in the following languages: Available in the following languages: Available in the following languages: Available in the following languages: Available in the following languages:java.code-snippets
`;
+ expected += ``;
+
+ assert.strictEqual(section.includes(expected), true);
+ });
+
+ it("should create a section with a snippets table when there are snippets", () => {
+ let snippets = [];
+ snippets[0] = {
+ name: "Region Start",
+ prefix: "#region",
+ body: ["//#region"],
+ description: "Folding Region Start",
+ scope: "",
+ };
+
+ let snippetsFile = new SnippetsFile(
+ "/somepath/java.code-snippets",
+ snippets
+ );
+
+ let section = createFileSection(snippetsFile, "app");
+
+ let expected = ``;
+
+ assert.strictEqual(section.includes(expected), true);
+ });
+
+ it("should create a section that states there are no snippets when there are no snippets", () => {
+ let snippets = [];
+ let snippetsFile = new SnippetsFile(
+ "/somepath/java.code-snippets",
+ snippets
+ );
+
+ let section = createFileSection(snippetsFile);
+ let expected = `
`;
+ expected += `
`;
+
+ assert.strictEqual(table, expected);
+ });
+
+ it("should create an empty table if there is are no snippets provided", () => {
+ let snippetsFile = new SnippetsFile("/somepath/java.json", []);
+
+ let table = createSnippetsTable(snippetsFile);
+
+ let expected = `Prefix Name Description Body Action `;
+ expected += ``;
+ expected += `#region Region Start Folding Region Start //#region
`;
+
+ assert.strictEqual(table, expected);
+ });
+
+ it("should create a table with the 'scope' column when a snippet has a populated `scope` field", () => {
+ let snippet = {
+ name: "Region Start",
+ prefix: "#region",
+ body: ["//#region"],
+ description: "Folding Region Start",
+ scope: "java",
+ };
+
+ let snippetsFile = new SnippetsFile("/somepath/a.code-snippets", [
+ snippet,
+ ]);
+
+ let table = createSnippetsTable(snippetsFile);
+
+ let expected = `Prefix Name `;
+ expected += `Description Body Action `;
+ expected += `Prefix Name `;
+ expected += `Description Body Scope Action `;
+
+ assert.strictEqual(table.startsWith(expected), true);
+ });
+ });
+});
diff --git a/test/suite/view/table-of-contents.test.js b/test/suite/view/table-of-contents.test.js
new file mode 100644
index 0000000..d62e668
--- /dev/null
+++ b/test/suite/view/table-of-contents.test.js
@@ -0,0 +1,60 @@
+const assert = require("assert");
+const {
+ createTableOfContents,
+} = require("../../../src/view/table-of-contents");
+const SnippetsFile = require("../../../src/model/snippets-file");
+const Extension = require("../../../src/model/extension");
+
+describe("table-of-contents.js", () => {
+ describe("createTableOfContents()", () => {
+ it("should create an empty table if an empty outline is provided", () => {
+ let toc = createTableOfContents(); // OR createTableOfContents([], [], [], []);
+
+ assert.strictEqual(toc, "");
+ });
+
+ it("should create a table with an entry for a collection of snippets files", () => {
+ let snippetsFile1 = new SnippetsFile("/somepath/a.code-snippets", []);
+ let snippetsFile2 = new SnippetsFile("/somepath/b.code-snippets", []);
+
+ let toc = createTableOfContents(
+ [snippetsFile1, snippetsFile2],
+ [],
+ [],
+ []
+ );
+
+ let expectedOutput = ``;
+
+ assert.strictEqual(toc, expectedOutput);
+ });
+
+ it("should create a table with an entry for an extension and its snippets files", () => {
+ let snippetsFile1 = new SnippetsFile("/somepath/a.code-snippets", []);
+ let snippetsFile2 = new SnippetsFile("/somepath/b.code-snippets", []);
+ let extension = new Extension(
+ "robole-snippets-ranger",
+ "Snippets Ranger",
+ "/somepath/snippets-ranger"
+ );
+ extension.snippetsFiles = [snippetsFile1, snippetsFile2];
+
+ let toc = createTableOfContents([], [], [], [extension]);
+
+ let expectedOutput = `Table of Contents
`;
+ expectedOutput += `
`;
+
+ assert.strictEqual(toc, expectedOutput);
+ });
+ });
+});
diff --git a/test/view-contrast.html b/test/view-contrast.html
deleted file mode 100644
index da8aeaa..0000000
--- a/test/view-contrast.html
+++ /dev/null
@@ -1,6921 +0,0 @@
-
-
-
-
-
- Table of Contents
`;
+ expectedOutput += `
`;
+ expectedOutput += `
`;
+ expectedOutput += `Snippets Ranger
- Table of Contents
-
-
-
-
-
-
-
- User Snippets
- Extension Snippets
- markdownlint
-
-
- snippets.json
- Available in the following languages: markdown.
-
-
-
-
-
-
-
- Prefix
- Name
- Description
- Body
-
-
- markdownlint-disable
- insertMarkdownLintDisableComment
-
- Disables one or more rules by name (MD013), alias (line-length),
- or tag (whitespace). Multiple rules are space-delimited (MD018
- MD019). If no rules are specified, all rules are disabled. Takes
- effect starting with the line the comment is on.
-
-
-
- <!-- markdownlint-disable ${1:MD000 }-->
-
-
- markdownlint-enable
- insertMarkdownLintEnableComment
-
- Enables one or more rules by name (MD013), alias (line-length),
- or tag (whitespace). Multiple rules are space-delimited (MD018
- MD019). If no rules are specified, all rules are enabled. Takes
- effect starting with the line the comment is on.
-
-
-
- <!-- markdownlint-enable ${1:MD000 }-->
-
-
- markdownlint-disable-file
- insertMarkdownLintDisableFileComment
-
- Disables one or more rules by name (MD013), alias (line-length),
- or tag (whitespace). Multiple rules are space-delimited (MD018
- MD019). If no rules are specified, all rules are disabled.
- Applies to the entire file.
-
-
-
- <!-- markdownlint-disable-file ${1:MD000 }-->
-
-
- markdownlint-enable-file
- insertMarkdownLintEnableFileComment
-
- Enables one or more rules by name (MD013), alias (line-length),
- or tag (whitespace). Multiple rules are space-delimited (MD018
- MD019). If no rules are specified, all rules are enabled.
- Applies to the entire file.
-
-
-
- <!-- markdownlint-enable-file ${1:MD000 }-->
-
-
- markdownlint-capture
- insertMarkdownLintCaptureComment
-
- Captures the current rule configuration. Takes effect starting
- with the line the comment is on.
-
-
-
- <!-- markdownlint-capture -->
-
-
- markdownlint-restore
- insertMarkdownLintRestoreComment
-
- Restores the most recently captured rule configuration. Defaults
- to the document's initial configuration. Takes effect starting
- with the line the comment is on.
-
-
-
- <!-- markdownlint-restore -->
-
-
-
- markdownlint-configure-file
- insertMarkdownLintConfigureFileComment
-
- Configures one or more rules by name (MD013), alias
- (line-length), or tag (whitespace) using the same JSON format as
- the "markdownlint.config" object. Applies to the entire file.
-
-
-
- <!-- markdownlint-configure-file { ${1:"MD013": {
- "line_length": 100 \}} } -->
-
- ES7 React/Redux/GraphQL/React-Native snippets
-
-
-
- snippets.json
- Available in the following languages: javascript, javascriptreact,
- typescript, typescriptreact.
-
-
-
-
-
-
-
- Prefix
- Name
- Description
- Body
-
-
- imp
- import
-
-
-
- import ${2:moduleName} from '${1:module}'$0
-
-
- imn
- importNoModuleName
-
-
-
- import '${1:module}'$0
-
-
- imd
- importDestructing
-
-
-
- import { $2 } from '${1:module}'$0
-
-
- ime
- importEverything
-
-
-
- import * as ${2:alias} from '${1:module}'$0
-
-
- ima
- importAs
-
-
-
- import { ${2:originalName} as ${3:alias} } from
- '${1:module}'$0
-
-
- exp
- exportDefault
-
-
-
- export default $1$0
-
-
- exd
- exportDestructing
-
-
-
- export { $2 } from '${1:module}'$0
-
-
- exa
- exportAs
-
-
-
- export { ${2:originalName} as ${3:alias} } from
- '${1:module}'$0
-
-
- enf
- exportNamedFunction
- Export named function in ES7 syntax
-
-
- export const ${1:functionName} = (${2:params}) => {
-
- $0
}
-
- edf
- exportDefaultFunction
- Export default function in ES7 syntax
-
-
- export default (${1:params}) => {
-
- $0
}
-
- met
- method
- Creates a method inside a class in ES7 syntax
-
-
- ${1:methodName} = (${2:params}) => {
-
- ${0}
}
-
- pge
- propertyGet
- Creates a getter property inside a class in ES7 syntax
-
-
- get ${1:propertyName}() {
-
- return this.${0}
}
-
- pse
- propertySet
- Creates a setter property inside a class in ES7 syntax
-
-
- set ${1:propertyName}(${2:value}) {
-
- ${0}
}
-
- fre
- forEach
- Creates a forEach statement in ES7 syntax
-
-
- ${1:array}.forEach(${2:currentItem} => {
-
- ${0}
})
-
- fof
- forOf
- Iterating over property names of iterable objects
-
-
- for(let ${1:item} of ${2:object}) {
-
- ${0}
}
-
- fin
- forIn
- Iterating over property values of iterable objects
-
-
- for(let ${1:item} in ${2:object}) {
-
- ${0}
}
-
- anfn
- anonymousFunction
- Creates an anonymous function in ES7 syntax
-
-
- (${1:params}) => {
-
- ${2}
}
-
- nfn
- namedFunction
- Creates a named function in ES7 syntax
-
-
- const ${1:name} = (${2:params}) => {
-
- ${3}
}
-
- dob
- destructingObject
-
- Creates and assigns a local variable using object destructing
-
-
-
- const {${1:propertyName}} = ${2:objectToDestruct}
-
-
- dar
- destructingArray
-
- Creates and assigns a local variable using array destructing
-
-
-
- const [${1:propertyName}] = ${2:arrayToDestruct}
-
-
- sti
- setInterval
-
- Executes the given function at specified intervals in ES7 syntax
-
-
-
- setInterval(() => {
-
- ${2}
}, ${0:intervalInms})
-
- sto
- setTimeOut
-
- Executes the given function after the specified delay in ES7
- syntax
-
-
-
- setTimeout(() => {
-
- ${2}
}, ${1:delayInms})
-
- prom
- promise
-
- Creates and returns a new Promise in the standard ES7 syntax
-
-
-
- return new Promise((resolve, reject) => {
-
- ${1}
})
-
- cas
- consoleAssert
-
- If the specified expression is false, the message is written to
- the console along with a stack trace
-
-
-
- console.assert(${1:expression}, ${2:object})
-
-
- ccl
- consoleClear
- Clears the console
-
-
- console.clear()
-
-
- cco
- consoleCount
-
- Writes the the number of times that count() has been invoked at
- the same line and with the same label
-
-
-
- console.count(${1:label})
-
-
- cdi
- consoleDir
-
- Prints a JavaScript representation of the specified object
-
-
-
- console.dir(${1:object})
-
-
- cer
- consoleError
-
- Displays a message in the console and also includes a stack
- trace from where the method was called
-
-
-
- console.error(${1:object})
-
-
- cgr
- consoleGroup
-
- Groups and indents all following output by an additional level,
- until console.groupEnd() is called.
-
-
-
- console.group("${1:label}")
-
-
- cge
- consoleGroupEnd
- Closes out the corresponding console.group().
-
-
- console.groupEnd()
-
-
- clg
- consoleLog
- Displays a message in the console
-
-
- console.log(${1:object})
-
-
- ctr
- consoleTrace
-
- Prints a stack trace from the point where the method was called
-
-
-
- console.trace(${1:object})
-
-
- clo
- consoleLogObject
- Logs property with name.
-
-
- console.log('${1:object}', ${1:object})
-
-
- ctm
- consoleTime
- Console time wrapper
-
-
- console.time('${1:object}')
-
-
- cte
- consoleTimeEnd
- Console time end wrapper
-
-
- console.timeEnd('${1:object}')
-
-
- cwa
- consoleWarn
-
- Displays a message in the console but also displays a yellow
- warning icon along with the logged message
-
-
-
- console.warn(${1:object})
-
-
- cin
- consoleInfo
-
- Displays a message in the console but also displays a blue
- information icon along with the logged message
-
-
-
- console.info(${1:object})
-
-
- cp
- destructProps
-
- Creates and assigns a local variable using props destructing
-
-
-
- const { $1 } = this.props
-
-
- cs
- destructState
-
- Creates and assigns a local variable using state destructing
-
-
-
- const { $1 } = this.state
-
-
- imr
- import React
-
-
-
- import React from 'react'
-
-
- imrd
- import ReactDOM
-
-
-
- import ReactDOM from 'react-dom'
-
-
- imrc
- import React, { Component }
-
-
-
- import React, { Component } from 'react'
-
-
- imrcp
- import React, { Component } & PropTypes
-
-
-
- import React, { Component } from 'react'
-
import
- PropTypes from 'prop-types'
-
- imrpc
- import React, { PureComponent }
-
-
-
- import React, { PureComponent } from 'react'
-
-
- imrpcp
- import React, { PureComponent } & PropTypes
-
-
-
- import React, { PureComponent } from 'react'
-
import
- PropTypes from 'prop-types'
-
- imrm
- import React, { memo }
-
-
-
- import React, { memo } from 'react'
-
-
- imrmp
- import React, { memo } & PropTypes
-
-
-
- import React, { memo } from 'react'
-
import PropTypes
- from 'prop-types'
-
- imrs
- import React, {useState}
-
-
-
- import React, { useState } from 'react'
-
-
- imrse
- import React, {useState, useEffect}
-
-
-
- import React, { useState, useEffect } from 'react'
-
-
- impt
- import PropTypes
-
-
-
- import PropTypes from 'prop-types'
-
-
- imrr
- import React Router
-
-
-
- import { BrowserRouter as Router, Route, NavLink } from
- 'react-router-dom'
-
-
- imbr
- import React Browser Router
-
-
-
- import { BrowserRouter as Router } from 'react-router-dom'
-
-
- imbrr
- import React Browser Router - Route
-
-
-
- import { Route } from 'react-router-dom'
-
-
- imbrc
- import React Browser Router - Route Combo
-
-
-
- import { Route, Switch, NavLink, Link } from
- 'react-router-dom'
-
-
- imbrs
- import React Browser Router - Switch
-
-
-
- import { Switch } from 'react-router-dom'
-
-
- imbrl
- import React Browser Router - Link
-
-
-
- import { Link } from 'react-router-dom'
-
-
- imbrnl
- import React Browser Router - NavLink
-
-
-
- import { NavLink } from 'react-router-dom'
-
-
- redux
- import redux statement
-
-
-
- import { connect } from 'react-redux'
-
-
- rcc
- reactClassCompoment
- Creates a React component class with ES7 module system
-
-
- import React, { Component } from 'react'
-
export
- default class ${1:${TM_FILENAME_BASE}} extends Component {
- render() {
- return (
- <div>
- $0
- </div>
- )
- }
}
-
- rce
- reactClassExportComponent
- Creates a React component class with ES7 module system
-
-
- import React, { Component } from 'react'
-
export
- class ${1:${TM_FILENAME_BASE}} extends Component {
- render() {
- return (
- <div>
- $0
- </div>
- )
- }
}
export default ${1:${TM_FILENAME_BASE}}
-
- rfce
- reactFunctionalExportComponent
-
- Creates a React Functional Component with ES7 module system
-
-
-
- import React from 'react'
-
function
- ${1:${TM_FILENAME_BASE}}() {
- return (
- <div>
- $0
- </div>
- )
}
export default ${1:${TM_FILENAME_BASE}}
-
- rfc
- reactFunctionalComponent
-
- Creates a React Functional Component with ES7 module system
-
-
-
- import React from 'react'
-
export default function
- ${1:${TM_FILENAME_BASE}}() {
- return (
- <div>
- $0
- </div>
- )
}
-
- rfcp
- reactFunctionalComponentWithPropTypes
-
- Creates a React Functional Component with ES7 module system with
- PropTypes
-
-
-
- import React from 'react'
-
import PropTypes from
- 'prop-types'
function
- ${1:${TM_FILENAME_BASE}}(props) {
- return (
- <div>
- $0
- </div>
- )
}
${1:${TM_FILENAME_BASE}}.propTypes = {
}
export
- default ${1:${TM_FILENAME_BASE}}
-
- rafce
- reactArrowFunctionExportComponent
-
- Creates a React Arrow Function Component with ES7 module system
-
-
-
- import React from 'react'
-
const
- ${1:${TM_FILENAME_BASE}} = () => {
- return (
- <div>
- $0
- </div>
- )
}
export default ${1:${TM_FILENAME_BASE}}
-
- rafc
- reactArrowFunctionComponent
-
- Creates a React Arrow Function Component with ES7 module system
-
-
-
- import React from 'react'
-
export const
- ${1:${TM_FILENAME_BASE}} = () => {
- return (
- <div>
- $0
- </div>
- )
}
-
- rafcp
- reactArrowFunctionComponentWithPropTypes
-
- Creates a React Arrow Function Component with ES7 module system
- with PropTypes
-
-
-
- import React from 'react'
-
import PropTypes from
- 'prop-types'
const ${1:${TM_FILENAME_BASE}} = props
- => {
- return (
- <div>
- $0
- </div>
- )
}
${1:${TM_FILENAME_BASE}}.propTypes = {
}
export
- default ${1:${TM_FILENAME_BASE}}
-
- rcep
- reactClassExportComponentWithPropTypes
- Creates a React component class with ES7 module system
-
-
- import React, { Component } from 'react'
-
import
- PropTypes from 'prop-types'
export class
- ${1:${TM_FILENAME_BASE}} extends Component {
- static propTypes = {
- }
- render() {
- return (
- <div>
- $0
- </div>
- )
- }
}
export default ${1:${TM_FILENAME_BASE}}
-
- rpc
- reactClassPureComponent
-
- Creates a React pure component class with ES7 module system
-
-
-
- import React, { PureComponent } from 'react'
-
export
- default class ${1:${TM_FILENAME_BASE}} extends PureComponent
- {
- render() {
- return (
- <div>
- $0
- </div>
- )
- }
}
-
- rpce
- reactClassExportPureComponent
-
- Creates a React pure component class with ES7 module system
- export
-
-
-
- import React, { PureComponent } from 'react'
-
export
- class ${1:${TM_FILENAME_BASE}} extends PureComponent {
- render() {
- return (
- <div>
- $0
- </div>
- )
- }
}
export default ${1:$TM_FILENAME_BASE}
-
- rpcp
- reactClassPureComponentWithPropTypes
- Creates a React component class with ES7 module system
-
-
- import React, { PureComponent } from 'react'
-
import
- PropTypes from 'prop-types'
export default class
- ${1:${TM_FILENAME_BASE}} extends PureComponent {
- static propTypes = {
- }
- render() {
- return (
- <div>
- $0
- </div>
- )
- }
}
-
- rmc
- reactFunctionMemoComponent
-
- Creates a React Memo Function Component with ES7 module system
-
-
-
- import React, { memo } from 'react'
-
export default
- memo(function ${1:${TM_FILENAME_BASE}}() {
- return (
- <div>
- $0
- </div>
- )
})
-
- rmcp
- reactFunctionMemoComponentWithPropTypes
-
- Creates a React Memo Function Component with ES7 module system
- with PropTypes
-
-
-
- import React, { memo } from 'react'
-
import PropTypes
- from 'prop-types'
const ${1:${TM_FILENAME_BASE}} =
- memo(function ${1:${TM_FILENAME_BASE}}(props) {
- return (
- <div>
- $0
- </div>
- )
})
${1:${TM_FILENAME_BASE}}.propTypes = {
}
export
- default ${1:${TM_FILENAME_BASE}}
-
- rccp
- reactClassCompomentPropTypes
-
- Creates a React component class with PropTypes and ES7 module
- system
-
-
-
- import React, { Component } from 'react'
-
import
- PropTypes from 'prop-types'
export default class
- ${1:${TM_FILENAME_BASE}} extends Component {
- static propTypes = {
- ${2:prop}: ${3:PropTypes}
- }
- render() {
- return (
- <div>
- $0
- </div>
- )
- }
}
-
- rcredux
- reactClassCompomentRedux
-
- Creates a React component class with connected redux and ES7
- module system
-
-
-
- import React, { Component } from 'react'
-
import {
- connect } from 'react-redux'
export class
- ${1:${TM_FILENAME_BASE}} extends Component {
- render() {
- return (
- <div>
- $0
- </div>
- )
- }
}
const mapStateToProps = (state) =>
- ({
-
})
const mapDispatchToProps = {
-
}
export default connect(mapStateToProps,
- mapDispatchToProps)(${1:${TM_FILENAME_BASE}})
-
- rcreduxp
- reactClassCompomentReduxPropTypes
-
- Creates a React component class with PropTypes with connected
- redux and ES7 module system
-
-
-
- import React, { Component } from 'react'
-
import
- PropTypes from 'prop-types'
import { connect } from
- 'react-redux'
export class ${1:${TM_FILENAME_BASE}}
- extends Component {
- static propTypes = {
- ${2:prop}: ${3:PropTypes}
- }
- render() {
- return (
- <div>
- $0
- </div>
- )
- }
}
const mapStateToProps = (state) =>
- ({
-
})
const mapDispatchToProps = {
-
}
export default connect(mapStateToProps,
- mapDispatchToProps)(${1:${TM_FILENAME_BASE}})
-
- rfcredux
- reactFunctionalCompomentRedux
-
- Creates a React functional component with connected redux and
- ES7 module system
-
-
-
- import React, { Component } from 'react'
-
import {
- connect } from 'react-redux'
export const
- ${1:${TM_FILENAME_BASE}} = () => {
- return (
- <div>
- $0
- </div>
- )
}
const mapStateToProps = (state) =>
- ({
-
})
const mapDispatchToProps = {
-
}
export default connect(mapStateToProps,
- mapDispatchToProps)(${1:${TM_FILENAME_BASE}})
-
- rfcreduxp
- reactFunctionalCompomentReduxPropTypes
-
- Creates a React functional component with PropTypes with
- connected redux and ES7 module system
-
-
-
- import React, { Component } from 'react'
-
import
- PropTypes from 'prop-types'
import { connect } from
- 'react-redux'
export const ${1:${TM_FILENAME_BASE}}
- = () => {
- return (
- <div>
- $0
- </div>
- )
}
${1:${TM_FILENAME_BASE}}.propTypes = {
- ${2:prop}: ${3:PropTypes}
}
const
- mapStateToProps = (state) => ({
-
})
const mapDispatchToProps = {
-
}
export default connect(mapStateToProps,
- mapDispatchToProps)(${1:${TM_FILENAME_BASE}})
-
- reduxmap
- mappingToProps
-
-
-
- const mapStateToProps = (state) => ({
-
- ${1}
})
const mapDispatchToProps = {
-
}
-
- rconst
- classConstructor
-
- Adds a default constructor for it('', () => {})the class that
- contains props as arguments
-
-
-
- constructor(props) {
-
- super(props)
- this.state = {
- $0
- }
}
-
- est
- emptyState
- Creates empty state object. To be used in a constructor.
-
-
- state = {
-
- $1
}
-
- cwm
- componentWillMount
-
- DEPRECATED!!!. Invoked once, both on the client and server,
- immediately before the initial rendering occurs
-
-
-
- componentWillMount() {
-
- $0
}
-
- cdm
- componentDidMount
-
- Invoked once, only on the client (not on the server),
- immediately after the initial rendering occurs.
-
-
-
- componentDidMount() {
-
- $0
}
-
- cwr
- componentWillReceiveProps
-
- DEPRECATED!!!. Invoked when a component is receiving new props.
- This method is not called for the initial render.
-
-
-
- componentWillReceiveProps(nextProps) {
-
- $0
}
-
- scu
- shouldComponentUpdate
-
- Invoked before rendering when new props or state are being
- received.
-
-
-
- shouldComponentUpdate(nextProps, nextState) {
-
- $0
}
-
- cwup
- componentWillUpdate
-
- DEPRECATED!!!. Invoked immediately before rendering when new
- props or state are being received.
-
-
-
- componentWillUpdate(nextProps, nextState) {
-
- $0
}
-
- cdup
- componentDidUpdate
-
- Invoked immediately after the component's updates are flushed to
- the DOM.
-
-
-
- componentDidUpdate(prevProps, prevState) {
-
- $0
}
-
- cwun
- componentWillUnmount
-
- Invoked immediately before a component is unmounted from the
- DOM.
-
-
-
- componentWillUnmount() {
-
- $0
}
-
- gdsfp
- getDerivedStateFromProps
-
- Invoked right before calling the render method, both on the
- initial mount and on subsequent updates.
-
-
-
- static getDerivedStateFromProps(props, state) {
-
- ${1}
}
-
- gsbu
- getSnapshotBeforeUpdate
-
- Called right before mutations are made (e.g. before the DOM is
- updated)
-
-
-
- getSnapshotBeforeUpdate = (prevProps, prevState) => {
-
- $0
}
-
- ren
- componentRender
- Basic render.
-
-
- render() {
-
- return (
- <div>
- $0
- </div>
- )
}
-
- rcontext
- createContext
- Create React context
-
-
- const ${1:contextName} = React.createContext()
-
-
- cref
- createRef
- Create ref statement used inside constructor
-
-
- this.${1:refName}Ref = React.createRef()
-
-
- fref
- forwardRef
- Forward ref statement used inside component
-
-
- const ref = React.createRef()
-
-
- sst
- componentSetStateObject
- Performs a shallow merge of nextState into current state
-
-
- this.setState({$0})
-
-
- ssf
- componentSetStateFunc
- Performs a shallow merge of nextState into current state
-
-
- this.setState((state, props) => { return { $0 }})
-
-
- props
- componentProps
- Access component's props
-
-
- this.props.$0
-
-
- state
- componentState
-
-
-
- this.state.$0
-
-
- bnd
- bindThis
- Binds this to a method
-
-
- this.${1:methodName} = this.${1:methodName}.bind(this)$0
-
-
- rxaction
- reduxAction
-
-
-
- export const ${1:actionName} = (payload) => ({
-
- type: ${3:type},
- payload
})
-
- rxconst
- reduxConst
-
-
-
- export const ${1:constantName} = '${1:constantName}'
-
-
- rxreducer
- reduxReducer
-
-
-
- const initialState = {
-
}
export default
- (state = initialState, { type, payload }) => {
- switch (type) {
- case ${1:typeName}:
- return { ...state, ...payload }
- default:
- return state
- }
}
-
- rxselect
- reduxSelector
-
-
-
- import { createSelector } from 'reselect'
-
export
- const ${1:selectorName} = state => state.${2:selector}
-
- rnc
- reactNativeComponent
-
-
-
- import React, { Component } from 'react'
-
import { Text,
- View } from 'react-native'
export default class
- ${1:${TM_FILENAME_BASE}} extends Component {
- render() {
- return (
- <View>
- <Text> ${2:textInComponent} </Text>
- </View>
- )
- }
}
-
- rncs
- reactNativeComponentWithStyles
-
-
-
- import React, { Component } from 'react'
-
import { Text,
- StyleSheet, View } from 'react-native'
export
- default class ${1:${TM_FILENAME_BASE}} extends Component {
- render() {
- return (
- <View>
- <Text> ${2:textInComponent} </Text>
- </View>
- )
- }
}
const styles = StyleSheet.create({})
-
- rnce
- reactNativeComponentExport
-
-
-
- import React, { Component } from 'react'
-
import { Text,
- View } from 'react-native'
export class
- ${1:${TM_FILENAME_BASE}} extends Component {
- render() {
- return (
- <View>
- <Text> ${2:textInComponent} </Text>
- </View>
- )
- }
}
export default ${1:${TM_FILENAME_BASE}}
-
- rnpc
- reactNativePureComponent
-
-
-
- import React, { PureComponent } from 'react'
-
import {
- Text, View } from 'react-native'
export default
- class ${1:${TM_FILENAME_BASE}} extends PureComponent {
- render() {
- return (
- <View>
- <Text> ${2:textInComponent} </Text>
- </View>
- )
- }
}
-
- rnpce
- reactNativePureComponentExport
-
-
-
- import React, { PureComponent } from 'react'
-
import {
- Text, View } from 'react-native'
export class
- ${1:${TM_FILENAME_BASE}} extends PureComponent {
- render() {
- return (
- <View>
- <Text> ${2:textInComponent} </Text>
- </View>
- )
- }
}
export default ${1:${TM_FILENAME_BASE}}
-
- rncredux
- reactNativeClassComponentRedux
-
- Creates a React Native component class with PropTypes with
- connected redux and ES7 module system
-
-
-
- import React, { Component } from 'react'
-
import { View,
- Text } from 'react-native'
import PropTypes from
- 'prop-types'
import { connect } from 'react-redux'
export
- class ${1:${TM_FILENAME_BASE}} extends Component {
- static propTypes = {
- ${2:prop}: ${3:PropTypes}
- }
- render() {
- return (
- <View>
- <Text> ${2:textInComponent} </Text>
- </View>
- )
- }
}
const mapStateToProps = (state) =>
- ({
-
})
const mapDispatchToProps = {
-
}
export default connect(mapStateToProps,
- mapDispatchToProps)(${1:${TM_FILENAME_BASE}})
-
- rnfe
- reactNativeFunctionalExportComponent
-
-
-
- import React from 'react'
-
import { View, Text } from
- 'react-native'
const ${1:${TM_FILENAME_BASE}} = ()
- => {
- return (
- <View>
- <Text>$0</Text>
- </View>
- )
}
export default ${1:${TM_FILENAME_BASE}}
-
- rnfes
- reactNativeFunctionalExportComponentWithStyles
-
-
-
- import React from 'react'
-
import { StyleSheet, Text,
- View } from 'react-native'
const
- ${1:${TM_FILENAME_BASE}} = () => {
- return (
- <View>
- <Text>$0</Text>
- </View>
- )
}
export default ${1:${TM_FILENAME_BASE}}
const
- styles = StyleSheet.create({})
-
- rnf
- reactNativeFunctionalComponent
-
-
-
- import React from 'react'
-
import { View, Text } from
- 'react-native'
export default function
- ${1:${TM_FILENAME_BASE}}() {
- return (
- <View>
- <Text>$0</Text>
- </View>
- )
}
-
- rnfs
- reactNativeFunctionalComponentWithStyles
-
-
-
- import React from 'react'
-
import { StyleSheet, Text,
- View } from 'react-native'
export default function
- ${1:${TM_FILENAME_BASE}}() {
- return (
- <View>
- <Text>$0</Text>
- </View>
- )
}
const styles = StyleSheet.create({})
-
- imrn
- reactNativeImport
-
-
-
- import { ${1:moduleName} } from 'react-native'
-
-
- rnstyle
- reactNativeStyles
-
-
-
- const styles = StyleSheet.create({
-
- ${1:style}
})
-
- pta
- propTypeArray
- Array prop type
-
-
- PropTypes.array,
-
-
- ptar
- propTypeArrayRequired
- Array prop type required
-
-
- PropTypes.array.isRequired,
-
-
- ptb
- propTypeBool
- Bool prop type
-
-
- PropTypes.bool,
-
-
- ptbr
- propTypeBoolRequired
- Bool prop type required
-
-
- PropTypes.bool.isRequired,
-
-
- ptf
- propTypeFunc
- Func prop type
-
-
- PropTypes.func,
-
-
- ptfr
- propTypeFuncRequired
- Func prop type required
-
-
- PropTypes.func.isRequired,
-
-
- ptn
- propTypeNumber
- Number prop type
-
-
- PropTypes.number,
-
-
- ptnr
- propTypeNumberRequired
- Number prop type required
-
-
- PropTypes.number.isRequired,
-
-
- pto
- propTypeObject
- Object prop type
-
-
- PropTypes.object,
-
-
- ptor
- propTypeObjectRequired
- Object prop type required
-
-
- PropTypes.object.isRequired,
-
-
- pts
- propTypeString
- String prop type
-
-
- PropTypes.string,
-
-
- ptsr
- propTypeStringRequired
- String prop type required
-
-
- PropTypes.string.isRequired,
-
-
- ptnd
- propTypeNode
-
- Anything that can be rendered: numbers, strings, elements or an
- array
-
-
-
- PropTypes.node,
-
-
- ptndr
- propTypeNodeRequired
-
- Anything that can be rendered: numbers, strings, elements or an
- array required
-
-
-
- PropTypes.node.isRequired,
-
-
- ptel
- propTypeElement
- React element prop type
-
-
- PropTypes.element,
-
-
- ptelr
- propTypeElementRequired
- React element prop type required
-
-
- PropTypes.element.isRequired,
-
-
- pti
- propTypeInstanceOf
- Is an instance of a class prop type
-
-
- PropTypes.instanceOf($0),
-
-
- ptir
- propTypeInstanceOfRequired
- Is an instance of a class prop type required
-
-
- PropTypes.instanceOf($0).isRequired,
-
-
- pte
- propTypeEnum
-
- Prop type limited to specific values by treating it as an enum
-
-
-
- PropTypes.oneOf(['$0']),
-
-
- pter
- propTypeEnumRequired
-
- Prop type limited to specific values by treating it as an enum
- required
-
-
-
- PropTypes.oneOf(['$0']).isRequired,
-
-
- ptet
- propTypeOneOfType
- An object that could be one of many types
-
-
- PropTypes.oneOfType([
-
- $0
]),
-
- ptetr
- propTypeOneOfTypeRequired
- An object that could be one of many types required
-
-
- PropTypes.oneOfType([
-
- $0
]).isRequired,
-
- ptao
- propTypeArrayOf
- An array of a certain type
-
-
- PropTypes.arrayOf($0),
-
-
- ptaor
- propTypeArrayOfRequired
- An array of a certain type required
-
-
- PropTypes.arrayOf($0).isRequired,
-
-
- ptoo
- propTypeObjectOf
- An object with property values of a certain type
-
-
- PropTypes.objectOf($0),
-
-
- ptoor
- propTypeObjectOfRequired
- An object with property values of a certain type required
-
-
- PropTypes.objectOf($0).isRequired,
-
-
- ptsh
- propTypeShape
- An object taking on a particular shape
-
-
- PropTypes.shape({
-
- $0
}),
-
- ptshr
- propTypeShapeRequired
- An object taking on a particular shape required
-
-
- PropTypes.shape({
-
- $0
}).isRequired,
-
- ptex
- propTypeExact
- An object with warnings on extra properties
-
-
- PropTypes.exact({
-
- $0
}),
-
- ptexr
- propTypeExactRequired
- An object with warnings on extra properties required
-
-
- PropTypes.exact({
-
- $0
}).isRequired,
-
- ptypes
- staticPropTpyes
-
-
-
- static propTypes = {
-
$0
}
-
- ptany
- propTypeAny
- Any prop type
-
-
- PropTypes.any,
-
-
- cmmb
- Comment Big Block
-
-
-
- /**
-
- * ${0}
- */
-
- desc
- describeBlock
- Testing `describe` block
-
-
- describe('$1', () => {
-
- $0
})
-
- test
- testBlock
- Testing `test` block
-
-
- test('should $1', () => {
-
- $0
})
-
- testa
- testAsyncBlock
- Testing `asynchronous test` block
-
-
- test('should $1', async () => {
-
- $0
})
-
- tit
- itBlock
- Testing `it` block
-
-
- it('should $1', () => {
-
- $0
})
-
- tita
- itAsyncBlock
- Testing asynchronous `it` block
-
-
- it('should $1', async () => {
-
- $0
})
-
- stest
- setupReactTest
-
-
-
- import React from 'react'
-
import renderer from
- 'react-test-renderer'
import {
- ${1:${TM_FILENAME_BASE}} } from
- '../${1:${TM_FILENAME_BASE}}'
describe('<${1:${TM_FILENAME_BASE}}
- />', () => {
- const defaultProps = {}
- const wrapper = renderer.create(<${1:${TM_FILENAME_BASE}}
- {...defaultProps} />)
- test('render', () => {
- expect(wrapper).toMatchSnapshot()
- })
})
-
- sntest
- setupReactNativeTest
-
-
-
- import 'react-native'
-
import React from 'react'
import
- renderer from 'react-test-renderer'
import
- ${1:${TM_FILENAME_BASE}} from '../${1:${TM_FILENAME_BASE}}'
describe('<${1:${TM_FILENAME_BASE}}
- />', () => {
- const defaultProps = {}
- const wrapper = renderer.create(<${1:${TM_FILENAME_BASE}}
- {...defaultProps} />)
- test('render', () => {
- expect(wrapper).toMatchSnapshot()
- })
})
-
- srtest
- setupReactComponentTestWithRedux
- Create test component
-
-
- import React from 'react'
-
import renderer from
- 'react-test-renderer'
import { Provider } from
- 'react-redux'
import store from 'src/store'
import
- { ${1:${TM_FILENAME_BASE}} } from
- '../${1:${TM_FILENAME_BASE}}'
describe('<${1:${TM_FILENAME_BASE}}
- />', () => {
- const defaultProps = {}
- const wrapper = renderer.create(
- <Provider store={store}>
- <${1:${TM_FILENAME_BASE}} {...defaultProps} />
- </Provider>,
- )
- test('render', () => {
- expect(wrapper).toMatchSnapshot()
- })
})
-
- snrtest
- setupReactNativeTestWithRedux
-
-
-
- import 'react-native'
-
import React from 'react'
import
- renderer from 'react-test-renderer'
import { Provider }
- from 'react-redux'
import store from 'src/store'
import
- ${1:${TM_FILENAME_BASE}} from '../${1:${TM_FILENAME_BASE}}'
describe('<${1:${TM_FILENAME_BASE}}
- />', () => {
- const defaultProps = {}
- const wrapper = renderer.create(
- <Provider store={store}>
- <${1:${TM_FILENAME_BASE}} {...defaultProps} />
- </Provider>,
- )
- test('render', () => {
- expect(wrapper).toMatchSnapshot()
- })
})
-
- graphql
- graphQLForComponent
-
-
-
- import { compose, graphql } from 'react-apollo'
-
-
- expgql
- exportGraphQL
-
-
-
- export default compose(
-
- graphql(${1:queryOrMutation}, { name: ${2:name} }),
)(${1:${TM_FILENAME_BASE}})
-
- hocredux
- hocComponentWithRedux
-
-
-
- import React from 'react'
-
import PropTypes from
- 'prop-types'
import { connect } from 'react-redux'
export
- const mapStateToProps = state => ({
})
export
- const mapDispatchToProps = {
-
}
export const ${1:hocComponentName} =
- (WrappedComponent) => {
- const hocComponent = ({ ...props }) => <WrappedComponent
- {...props} />
- hocComponent.propTypes = {
- }
- return hocComponent
}
export default
- WrapperComponent => connect(mapStateToProps,
- mapDispatchToProps)(${1:hocComponentName}(WrapperComponent))
-
- hoc
- hocComponent
-
-
-
- import React from 'react'
-
import PropTypes from
- 'prop-types'
export default (WrappedComponent)
- => {
- const hocComponent = ({ ...props }) => <WrappedComponent
- {...props} />
- hocComponent.propTypes = {
- }
- return hocComponent
}
-
- useState
- useState
-
-
-
- const [${1:state}, set${1/(.*)/${1:/capitalize}/}] =
- useState(${2:initialState})
-
-
- useEffect
- useEffect
-
-
-
- useEffect(() => {
-
- ${1:effect}
- return () => {
- ${2:cleanup}
- }
}, [${3:input}])
-
- useContext
- useContext
-
-
-
- const ${1:context} = useContext(${2:contextValue})
-
-
- useReducer
- useReducer
-
-
-
- const [state, dispatch] = useReducer(${1:reducer},
- ${2:initialState}, ${3:init})
-
-
- useCallback
- useCallback
-
-
-
- useCallback(
-
- () => {
- ${1:callback}
- },
- [${2:input}],
)
-
- useMemo
- useMemo
-
-
-
- useMemo(() => ${1:function}, ${2:input})
-
-
- useRef
- useRef
-
-
-
- const ${1:ref} = useRef(${2:initialValue})
-
-
- useImperativeHandle
- useImperativeHandle
-
-
-
- useImperativeHandle(
-
- ${1:ref},
- () => {
- ${2:handler}
- },
- [${3:input}],
)
-
- useDebugValue
- useDebugValue
-
-
-
- useDebugValue(${1:value})
-
-
- useLayoutEffect
- useLayoutEffect
-
-
-
- useLayoutEffect(() => {
-
- ${1:effect}
- return () => {
- ${2:cleanup}
- };
}, [${3:input}])
-
- useSelector
- useSelector
-
-
-
- const ${1:state} = useSelector(state =>
- state.${1:state})
-
-
- useDispatch
- useDispatch
-
-
-
- const dispatch = useDispatch(${1:function})
-
-
-
- tpf
- typeof
-
-
-
- typeof ${0}
-
-
- ts-snippets.json
- Available in the following languages: typescript, typescriptreact.
-
-
-
-
-
-
-
- Prefix
- Name
- Description
- Body
-
-
- tsrcc
- typeScriptReactClassComponent
-
- Creates a React component class with ES7 module system and
- TypeScript interfaces
-
-
-
- import React, { Component } from 'react'
-
interface
- Props {
-
}
interface State {
-
}
export default class
- ${1:${TM_FILENAME_BASE}} extends Component<Props, State>
- {
- state = {}
- render() {
- return (
- <div>
- $0
- </div>
- )
- }
}
-
- tsrce
- typeScriptReactClassExportComponent
-
- Creates a React component class with ES7 module system and
- TypeScript interfaces
-
-
-
- import React, { Component } from 'react'
-
interface
- Props {
-
}
interface State {
-
}
class ${1:${TM_FILENAME_BASE}} extends
- Component<Props, State> {
- state = {}
- render() {
- return (
- <div>
- $0
- </div>
- )
- }
}
export default ${1:${TM_FILENAME_BASE}}
-
- tsrfce
- typeScriptReactFunctionalExportComponent
-
- Creates a React Functional Component with ES7 module system and
- TypeScript interface
-
-
-
- import React, { ReactElement } from 'react'
-
interface
- Props {
-
}
function ${1:${TM_FILENAME_BASE}}({}:
- Props): ReactElement {
- return (
- <div>
- $0
- </div>
- )
}
export default ${1:${TM_FILENAME_BASE}}
-
- tsrfc
- typeScriptReactFunctionalComponent
-
- Creates a React Functional Component with ES7 module system and
- TypeScript interface
-
-
-
- import React, { ReactElement } from 'react'
-
interface
- Props {
-
}
export default function
- ${1:${TM_FILENAME_BASE}}({}: Props): ReactElement {
- return (
- <div>
- $0
- </div>
- )
}
-
- tsrafce
- typeScriptReactArrowFunctionExportComponent
-
- Creates a React Arrow Function Component with ES7 module system
- and TypeScript interface
-
-
-
- import React from 'react'
-
interface Props {
-
}
const ${1:${TM_FILENAME_BASE}} = (props:
- Props) => {
- return (
- <div>
- $0
- </div>
- )
}
export default ${1:${TM_FILENAME_BASE}}
-
- tsrafc
- typeScriptReactArrowFunctionComponent
-
- Creates a React Arrow Function Component with ES7 module system
- and TypeScript interface
-
-
-
- import React from 'react'
-
interface Props {
-
}
export const ${1:${TM_FILENAME_BASE}} =
- (props: Props) => {
- return (
- <div>
- $0
- </div>
- )
}
-
- tsrpc
- typeScriptReactClassPureComponent
-
- Creates a React pure component class with ES7 module system and
- TypeScript interface
-
-
-
- import React, { PureComponent } from 'react'
-
interface
- Props {
-
}
export default class
- ${1:${TM_FILENAME_BASE}} extends PureComponent<Props>
- {
- render() {
- return (
- <div>
- $0
- </div>
- )
- }
}
-
- tsrpce
- typeScriptReactClassExportPureComponent
-
- Creates a React pure component class with ES7 module system and
- TypeScript interface
-
-
-
- import React, { PureComponent } from 'react'
-
interface
- Props {
-
}
class ${1:${TM_FILENAME_BASE}} extends
- PureComponent<Props> {
- render() {
- return (
- <div>
- $0
- </div>
- )
- }
}
export default ${1:${TM_FILENAME_BASE}}
-
- tsrmc
- typeScriptReactFunctionMemoComponent
-
- Creates a React Memo Function Component with ES7 module system
- and TypeScript interface
-
-
-
- import React, { memo } from 'react'
-
interface
- Props {
-
}
export default memo(function
- ${1:${TM_FILENAME_BASE}}({}: Props) {
- return (
- <div>
- $0
- </div>
- )
})
-
- tsrcredux
- typeScriptReactClassCompomentRedux
-
- Creates a React component class with PropTypes with connected
- redux and ES7 module system and TypeScript interfaces
-
-
-
- import React, { Component } from 'react'
-
import {
- connect } from 'react-redux'
interface Props {
-
}
interface State {
-
}
export class ${1:${TM_FILENAME_BASE}}
- extends Component<Props, State> {
- state = {}
- render() {
- return (
- <div>
- $0
- </div>
- )
- }
}
const mapStateToProps = (state) =>
- ({
-
})
const mapDispatchToProps = {
-
}
export default connect(mapStateToProps,
- mapDispatchToProps)(${1:${TM_FILENAME_BASE}})
-
- tsrnf
- typescriptReactNativeArrowFunctionComponent
-
- Creates a React Native Arrow Function Component with ES7 module
- system and TypeScript interface
-
-
-
- import React from 'react'
-
import { View, Text } from
- 'react-native'
interface Props {
-
}
const ${1:${TM_FILENAME_BASE}} = (props:
- Props) => {
- return (
- <View>
- <Text>$0</Text>
- </View>
- )
}
export default ${1:${TM_FILENAME_BASE}}
-
- tsrnfi
- typescriptReactNativeArrowFunctionComponentNamedProps
-
- Creates a React Native Arrow Function Component with ES7 module
- system and named TypeScript interface
-
-
-
- import React from 'react'
-
import { View } from
- 'react-native'
interface
- ${1:${TM_FILENAME_BASE}}Props {
-
}
const ${1:${TM_FILENAME_BASE}}:
- React.FunctionComponent<${1:${TM_FILENAME_BASE}}Props> =
- (props) => {
- return (
- <View>
- $0
- </View>
- )
}
export default ${1:${TM_FILENAME_BASE}}
-
- tsrnfs
- typescriptReactNativeArrowFunctionComponentWithStyles
-
- Creates a React Native Arrow Function Component with ES7 module
- system, TypeScript interface and StyleSheet
-
-
-
- import React from 'react'
-
import { StyleSheet, Text,
- View } from 'react-native'
interface Props {
-
}
const ${1:${TM_FILENAME_BASE}} = (props:
- Props) => {
- return (
- <View>
- <Text>$0</Text>
- </View>
- )
}
export default ${1:${TM_FILENAME_BASE}}
const
- styles = StyleSheet.create({})
-
- expint
- Export interface
-
-
-
- export interface ${1:${TM_FILENAME_BASE}} {$0}
-
-
-
- exptp
- Export type
-
-
-
- export type ${1:${TM_FILENAME_BASE}} = {$0}
- Markdown Snippets
-
-
- snippets.code-snippets
- Available in the following languages: markdown.
-
-
-
-
-
-
-
- Prefix
- Name
- Description
- Body
-
-
- heading1
- Insert heading level 1
- Insert heading level 1
-
-
- # ${1:${TM_SELECTED_TEXT}}
-
-
- heading2
- Insert heading level 2
- Insert heading level 2
-
-
- ## ${1:${TM_SELECTED_TEXT}}
-
-
- heading3
- Insert heading level 3
- Insert heading level 3
-
-
- ### ${1:${TM_SELECTED_TEXT}}
-
-
- heading4
- Insert heading level 4
- Insert heading level 4
-
-
- #### ${1:${TM_SELECTED_TEXT}}
-
-
- heading5
- Insert heading level 5
- Insert heading level 5
-
-
- ##### ${1:${TM_SELECTED_TEXT}}
-
-
- heading6
- Insert heading level 6
- Insert heading level 6
-
-
- ###### ${1:${TM_SELECTED_TEXT}}
-
-
- strikethrough
- Insert strikethrough
- Insert strikethrough
-
-
- ~~${1:${TM_SELECTED_TEXT}}~~
-
-
- task
- Insert task list
- Insert task list
-
-
- - [${1| ,x|}] ${2:text}
-
- [${3| ,x|}] ${4:text}
${0}
-
- table
- Insert table
-
- Insert table with 2 rows and 3 columns. First row is heading.
-
-
-
- | ${1:Column1} | ${2:Column2} | ${3:Column3} |
-
|--------------
- | -------------- | -------------- |
| ${4:Item1} |
- ${5:Item1} | ${6:Item1} |
${0}
-
- 2x1table
- Insert 2x1 table
-
- Insert table with 2 rows and 1 column. First row is heading.
-
-
-
- | ${1:Column1} |
-
|-------------- |
| ${2:Item1}
- |
${0}
-
- 3x1table
- Insert 3x1 table
-
- Insert table with 3 rows and 1 column. First row is heading.
-
-
-
- | ${1:Column1} |
-
|-------------- |
| ${2:Item1}
- |
| ${3:Item2} |
${0}
-
- 4x1table
- Insert 4x1 table
-
- Insert table with 4 rows and 1 column. First row is heading.
-
-
-
- | ${1:Column1} |
-
|-------------- |
| ${2:Item1}
- |
| ${3:Item2} |
| ${4:Item3} |
${0}
-
- 5x1table
- Insert 5x1 table
-
- Insert table with 5 rows and 1 column. First row is heading.
-
-
-
- | ${1:Column1} |
-
|-------------- |
| ${2:Item1}
- |
| ${3:Item2} |
| ${4:Item3} |
| ${5:Item4}
- |
${0}
-
- 2x2table
- Insert 2x2 table
-
- Insert table with 2 rows and 2 columns. First row is heading.
-
-
-
- | ${1:Column1} | ${2:Column2} |
-
|--------------- |
- --------------- |
| ${3:Item1.1} | ${4:Item2.1} |
${0}
-
- 3x2table
- Insert 3x2 table
-
- Insert table with 3 rows and 2 columns. First row is heading.
-
-
-
- | ${1:Column1} | ${2:Column2} |
-
|--------------- |
- --------------- |
| ${3:Item1.1} | ${4:Item2.1} |
|
- ${5:Item1.2} | ${6:Item2.2} |
${0}
-
- 4x2table
- Insert 4x2 table
-
- Insert table with 4 rows and 2 columns. First row is heading.
-
-
-
- | ${1:Column1} | ${2:Column2} |
-
|--------------- |
- --------------- |
| ${3:Item1.1} | ${4:Item2.1} |
|
- ${5:Item1.2} | ${6:Item2.2} |
| ${7:Item1.3} |
- ${8:Item2.3} |
${0}
-
- 5x2table
- Insert 5x2 table
-
- Insert table with 5 rows and 2 columns. First row is heading.
-
-
-
- | ${1:Column1} | ${2:Column2} |
-
|--------------- |
- --------------- |
| ${3:Item1.1} | ${4:Item2.1} |
|
- ${4:Item1.2} | ${5:Item2.2} |
| ${6:Item1.3} |
- ${7:Item2.3} |
| ${8:Item1.4} | ${9:Item2.4} |
${0}
-
- 2x3table
- Insert 2x3 table
-
- Insert table with 2 rows and 3 columns. First row is heading.
-
-
-
- | ${1:Column1} | ${2:Column2} | ${3:Column3} |
-
|----------------
- | --------------- | --------------- |
| ${4:Item1.1} |
- ${5:Item2.1} | ${6:Item3.1} |
${0}
-
- 3x3table
- Insert 3x3 table
-
- Insert table with 3 rows and 3 columns. First row is heading.
-
-
-
- | ${1:Column1} | ${2:Column2} | ${3:Column3} |
-
|----------------
- | --------------- | --------------- |
| ${4:Item1.1} |
- ${5:Item2.1} | ${6:Item3.1} |
| ${7:Item1.2} |
- ${8:Item2.2} | ${9:Item3.2} |
${0}
-
- 4x3table
- Insert 4x3 table
-
- Insert table with 4 rows and 3 columns. First row is heading.
-
-
-
- | ${1:Column1} | ${2:Column2} | ${3:Column3} |
-
|----------------
- | --------------- | --------------- |
| ${4:Item1.1} |
- ${5:Item2.1} | ${6:Item3.1} |
| ${7:Item1.2} |
- ${8:Item2.2} | ${9:Item3.2} |
| ${10:Item1.3} |
- ${11:Item2.3} | ${12:Item3.3} |
${0}
-
-
- 5x3table
- Insert 5x3 table
-
- Insert table with 5 rows and 3 columns. First row is heading.
-
-
-
- | ${1:Column1} | ${2:Column2} | ${3:Column3} |
-
|----------------
- | --------------- | --------------- |
| ${4:Item1.1} |
- ${5:Item2.1} | ${6:Item3.1} |
| ${7:Item1.2} |
- ${8:Item2.2} | ${9:Item3.2} |
| ${10:Item1.3} |
- ${11:Item2.3} | ${12:Item3.3} |
| ${13:Item1.4} |
- ${14:Item2.4} | ${15:Item3.4} |
${0}Vue VSCode Snippets
-
-
- vue.json
- Available in the following languages: vue.
-
-
-
-
-
-
-
- Prefix
- Name
- Description
- Body
-
-
- vbase
- Vue Single File Component
- Base for Vue File with SCSS
-
-
- <template>
-
- <div>
- </div>
</template>
<script>
- export default {
- ${0}
- }
</script>
<style lang="scss"
- scoped>
</style>
-
- vbase-sass
- Vue Single File Component with SASS
- Base for Vue File with PostCSS
-
-
- <template>
-
- <div>
- </div>
</template>
<script>
- export default {
- ${0}
- }
</script>
<style lang="sass"
- scoped>
</style>
-
- vbase-less
- Vue Single File Component with LESS
- Base for Vue File with PostCSS
-
-
- <template>
-
- <div>
- </div>
</template>
<script>
- export default {
- ${0}
- }
</script>
<style lang="less"
- scoped>
</style>
-
- vbase-pcss
- Vue Single File Component with postcss
- Base for Vue File with PostCSS
-
-
- <template>
-
- <div>
- </div>
</template>
<script>
- export default {
- ${0}
- }
</script>
<style lang="postcss"
- scoped>
</style>
-
- vbase-css
- Vue Single File Component with Css
- Base for Vue File with CSS
-
-
- <template>
-
- <div>
- </div>
</template>
<script>
- export default {
- ${0}
- }
</script>
<style scoped>
</style>
-
- vbase-styl
- Vue Single File Component with Stylus
- Base for Vue File with Stylus
-
-
- <template>
-
- <div>
- </div>
</template>
<script>
- export default {
- ${0}
- }
</script>
<style lang="stylus"
- scoped>
</style>
-
- vbase-ts
- Vue Single File Component with Typescript
- Base for Vue File with Typescript
-
-
- <template>
-
- <div>
- </div>
</template>
<script
- lang="ts">
- import Vue from 'vue'
- export default Vue.extend({
- ${0}
- })
</script>
<style scoped>
</style>
-
- vbase-ns
- Vue Single File Component with No Style
- Base for Vue File with no styles
-
-
- <template>
-
- <div>
- </div>
</template>
<script>
- export default {
- ${0}
- }
</script>
-
- vbase-3
- Vue Single File Component Composition API
- Base for Vue File Composition API with SCSS
-
-
- <template>
-
- <div>
- </div>
</template>
<script>
export
- default {
- setup () {
- ${0}
- return {}
- }
}
</script>
<style lang="scss"
- scoped>
</style>
-
- vbase-3-reactive
- Vue Single File Component Composition API Reactive
- Base for Vue File Composition API with SCSS
-
-
- <template>
-
- <div>
- </div>
</template>
<script>
import
- { reactive, toRefs } from '@vue/composition-api'
export
- default {
- setup () {
- const state = reactive({
- ${0:count}: ${1:0},
- })
-
- return {
- ...toRefs(state),
- }
- }
}
</script>
<style lang="scss"
- scoped>
</style>
-
- vbase-3-ts
- Vue Single File Component Composition API with Typescript
- Base for Vue File Composition API - Typescript
-
-
- <template>
-
- <div>
- </div>
</template>
<script
- lang="ts">
import { defineComponent } from 'vue'
export
- default defineComponent({
- setup () {
- ${0}
- return {}
- }
})
</script>
<style
- scoped>
</style>
-
-
- vbase-ts-class
-
- Vue Single File Component with Class based Typescript format
-
- Base for Vue File with Class based Typescript format
-
-
- <template>
-
- <div>
- </div>
</template>
<script
- lang="ts">
- import { Component, Vue } from 'vue-property-decorator';
- @Component
- export default class ${0} extends Vue {
-
- }
</script>
<style scoped>
</style>
-
- vue-pug.json
- Available in the following languages: jade.
-
-
-
-
-
-
-
- Prefix
- Name
- Description
- Body
-
-
- vfor
- Vue v-for
- vfor statement
-
-
- ${1:div}(v-for="${2:item} in ${2:item}s"
- :key="${2:item}.id")
-
- | {{ ${2:item} }}
-
- vmodel
- Vue v-model Directive
- v-model directive
-
-
- input(v-model="${1:data}" type="text")
-
-
- vmodel-num
- Vue v-model Number Directive
- v-model directive number input
-
-
- input(v-model.number="${1:numData}" type="number"
- step="1")
-
-
- von
- Vue v-on Shortcut Directive
- v-on click handler with arguments
-
-
- @click="${1:handler}(${2:arg}, $event)"
-
-
- vel-props
- Vue Component with Props Binding
- component element with props
-
-
- ${1:component}(:${1:propName}="${0}")
-
-
- vsrc
- Vue Image Source Binding
- image source binding
-
-
- img(:src="'/path/to/images/' + ${1:fileName}"
- alt="${2:altText}")
-
-
- vstyle
- Vue Style Binding
- vue inline style binding
-
-
- ${1:div}(:style="{ fontSize: ${2:data} + 'px' }")
-
-
- vstyle-obj
- Vue Style Binding Object
- vue inline style binding, objects
-
-
- ${1:div}(:style="[${2:styleObjectA}, ${3:styleObjectB]}")
-
-
- vclass
- Vue Class Binding
- vue class binding
-
-
- ${1:div}(:class="{ ${2:className}: ${3:data} }")
-
-
- vclass-obj
- Vue Class Binding Object
- vue class binding
-
-
- ${1:div}(:class="[${2:classNameA}, ${3:classNameB}]")
-
-
- vclass-obj-mult
- Vue Multiple Conditional Class Bindings
- vue multiple conditional class bindings
-
-
- ${1:div}(:class="[${2:classNameA}, {${3:classNameB} :
- ${4:condition}}]")
-
-
- vanim
- Vue Transition Component with JavaScript Hooks
- transition component js hooks
-
-
- transition(
-
- mode="out-in"
- @before-enter="beforeEnter"
- @enter="enter"
- @before-leave="beforeLeave"
- @leave="leave"
- :css="false"
)
-
-
- vnuxtl
- Vue Nuxt Routing Link
- nuxt routing link
-
-
- nuxt-link(to="/${1:page}") ${1:page}
-
-
- vue-template.json
- Available in the following languages: html, vue-html.
-
-
-
-
-
-
-
- Prefix
- Name
- Description
- Body
-
-
- vfor
- Vue v-for
- vfor statement
-
-
- <${1:div} v-for="${2:item} in ${2:item}s"
- :key="${2:item}.id">
-
- {{ ${2:item} }}
</${1:div}>
-
- vmodel
- Vue v-model Directive
- v-model directive
-
-
- <input v-model="${1:data}" type="text" />
-
-
- vmodel-num
- Vue v-model Number Directive
- v-model directive number input
-
-
- <input v-model.number="${1:numData}" type="number"
- step="1" />
-
-
- von
- Vue v-on Shortcut Directive
- v-on click handler with arguments
-
-
- @click="${1:handler}(${2:arg}, $event)"
-
-
- vel-props
- Vue Component with Props Binding
- component element with props
-
-
- <${1:component}
- :${1:propName}="${0}"></${1:component}>
-
-
- vslot-named
- Vue Named Slot
- named slot
-
-
- <template
- v-slot:${0:name}>${1:defaultcontent}</template>
-
-
- vsrc
- Vue Image Source Binding
- image source binding
-
-
- <img :src="'/path/to/images/' + ${1:fileName}"
- alt="${2:altText}"/>
-
-
- vstyle
- Vue Style Binding
- vue inline style binding
-
-
- <${1:div} :style="{ fontSize: ${2:data} + 'px'
- }"></${1:div}>
-
-
- vstyle-obj
- Vue Style Binding Object
- vue inline style binding, objects
-
-
- <${1:div} :style="[${2:styleObjectA},
- ${3:styleObjectB]}"></${1:div}>
-
-
- vclass
- Vue Class Binding
- vue class binding
-
-
- <${1:div} :class="{ ${2:className}: ${3:data}
- }"></${1:div}>
-
-
- vclass-obj
- Vue Class Binding Object
- vue class binding
-
-
- <${1:div} :class="[${2:classNameA},
- ${3:classNameB}]"></${1:div}>
-
-
- vclass-obj-mult
- Vue Multiple Conditional Class Bindings
- vue multiple conditional class bindings
-
-
- <${1:div} :class="[${2:classNameA}, {${3:classNameB} :
- ${4:condition}}]"></${1:div}>
-
-
- vemit-child
- Vue Emit from Child
- Vue Emit from Child Component
-
-
- @change="$$emit('change', $$event.target.value)"
-
-
- vemit-parent
- Vue Emit to Parent
- Vue Emit to Parent Component
-
-
- @change="${1:foo} = $$event"
-
-
- vanim
- Vue Transition Component with JavaScript Hooks
- transition component js hooks
-
-
- <transition
-
- mode="out-in"
- @before-enter="beforeEnter"
- @enter="enter"
- @before-leave="beforeLeave"
- @leave="leave"
- :css="false">
</transition>
-
- vnuxtl
- Vue Nuxt Routing Link
- nuxt routing link
-
-
- <nuxt-link
- to="/${1:page}">${1:page}</nuxt-link>
-
-
- vroutename
- Vue Named Routing Link
- Named routing link
-
-
- <router-link :to="{name:
- '${1:name}'}">${2:LinkTitle}</router-link>
-
-
- vroutenameparam
- Vue Named Routing Link with Params
- Named routing link w/ params
-
-
- <router-link :to="{name: '${1:name}', params:{${2:id}:
- '${3:value}'} }">${4:LinkTitle}</router-link>
-
-
-
- vroutepath
- Vue Path Routing Link
- Path routing link
-
-
- <router-link
- to="${1:path}">${2:LinkTitle}</router-link>
-
-
- vue-script.json
- Available in the following languages: javascript, typescript.
-
-
-
-
-
-
-
- Prefix
- Name
- Description
- Body
-
-
- vdata
- Vue Data
- Vue Component Data
-
-
- data() {
-
- return {
- ${1:key}: ${2:value}
- }
},
-
- vmethod
- Vue Methods
- vue method
-
-
- methods: {
-
- ${1:name}() {
- ${0}
- }
},
-
- vcomputed
- Vue Computed
- computed value
-
-
- computed: {
-
- ${1:name}() {
- return this.${2:data} ${0}
- }
},
-
- vbeforecreate
- Vue Lifecycle beforeCreate
- beforeCreate lifecycle method
-
-
- beforeCreate () {
-
- ${0};
},
-
- vcreated
- Vue Lifecycle created
- created lifecycle method
-
-
- created () {
-
- ${0};
},
-
- vbeforemount
- Vue Lifecycle beforeMount
- beforeMount lifecycle method
-
-
- beforeMount () {
-
- ${0};
},
-
- vmounted
- Vue Lifecycle mounted
- mounted lifecycle method
-
-
- mounted () {
-
- ${0};
},
-
- vbeforeupdate
- Vue Lifecycle beforeUpdate
- beforeUpdate lifecycle method
-
-
- beforeUpdate () {
-
- ${0};
},
-
- vupdated
- Vue Lifecycle updated
- updated lifecycle method
-
-
- updated () {
-
- ${0};
},
-
- vbeforedestroy
- Vue Lifecycle beforeDestroy
- beforeDestroy lifecycle method
-
-
- beforeDestroy () {
-
- ${0};
},
-
- vdestroyed
- Vue Lifecycle destroyed
- destroyed lifecycle method
-
-
- destroyed () {
-
- ${0};
},
-
- vwatcher
- Vue Watchers
- vue watcher
-
-
- watch: {
-
- ${1:data}(${2:newValue}, ${3:oldValue}) {
- ${0}
- }
},
-
- vwatcher-options
- Vue Watchers with Options
- vue watcher with options
-
-
- watch: {
-
- ${1:data}: {
- immediate: ${2:true},
- deep: ${3:true},
- handler(${4:newValue}, ${5:oldValue}) {
- ${0}
- }
- }
},
-
- vprops
- Vue Props with Default
- Vue Props with Default
-
-
- props: {
-
- ${1:propName}: {
- type: ${2:Number},
- default: ${0}
- },
},
-
- vimport
- Vue Import File
- Import one component into another
-
-
- import ${1:New} from '@/components/${1:New}.vue';
-
-
- vcomponents
- Vue Import into the Component
-
- Import one component into another, within export statement
-
-
-
- components: {
-
- ${1:New},
},
-
- vimport-export
- Vue Import Export
- import a component and include it in export default
-
-
- import ${1:Name} from '@/components/${1:Name}.vue';
-
export
- default {
- components: {
- ${1:Name}
- },
};
-
- vimport-dynamic
- Vue Import Component Dynamically
- Import component that should be lazy loaded
-
-
- ${1:New} = () => import('@/components/${1:New}.vue')
-
-
- vmapstate
- Vue MapState
- map getters inside a vue component
-
-
- import { mapState } from 'vuex';
-
export default
- {
- computed: {
- ...mapState([
- ${1:'nameOfState'},
- ])
- },
};
-
- vmapgetters
- Vue MapGetters
- mapgetters inside a vue component
-
-
- import { mapGetters } from 'vuex';
-
export default
- {
- computed: {
- ...mapGetters([
- ${1:'nameOfGetter'},
- ])
- },
};
-
- vmapmutations
- Vue MapMutations
- mapmutations inside a vue component
-
-
- import { mapMutations } from 'vuex';
-
export
- default {
- methods: {
- ...mapMutations([
- ${1:'nameOfMutation'}, //also supports payload
- `this.nameOfMutation(amount)`
- ])
- },
};
-
- vmapactions
- Vue MapActions
- mapactions inside a vue component
-
-
- import { mapActions } from 'vuex';
-
export default
- {
- methods: {
- ...mapActions([
- ${1:'nameOfAction'}, //also supports payload
- `this.nameOfAction(amount)`
- ])
- },
};
-
- vfilter
- Vue Filter
- vue filter
-
-
- filters: {
-
- ${1:fnName}: function(${2:value}) {
- return ${2:value}${0};
- }
}
-
- vmixin
- Vue Mixin
- vue mixin
-
-
- const ${1:mixinName} = {
-
- mounted() {
- console.log('hello from mixin!');
- },
};
-
- vmixin-use
- Vue Use Mixin
- vue use mixin
-
-
- mixins: [${1:mixinName}],
-
-
- vc-direct
- Vue Custom Directive
- vue custom directive
-
-
- Vue.directive('${1:directiveName}', {
-
- bind(el, binding, vnode) {
- el.style.${2:arg} = binding.value.${2:arg};
- }
});
-
- vimport-lib
- Vue Import Library
- import a library
-
-
- import { ${1:libName} } from '${1:libName}';
-
-
- vimport-gsap
- Vue Import GSAP
- import gsap library
-
-
- import gsap from 'gsap';
-
-
- vanimhook-js
- Vue Transition Methods with JavaScript Hooks
- transition component js hooks
-
-
- beforeEnter(el) {
-
- console.log('beforeEnter');
},
enter(el, done) {
- console.log('enter');
- done();
},
beforeLeave(el) {
- console.log('beforeLeave');
},
leave(el, done) {
- console.log('leave');
- done();
},
-
- vcommit
- Vue Commit Vuex Store in Methods
- commit to vuex store in methods for mutation
-
-
- ${1:mutationName}() {
-
- this.\$store.commit('${1:mutationName}', ${2:payload});
}
-
- vdispatch
- Vue Dispatch Vuex Store in Methods
- dispatch to vuex store in methods for action
-
-
- ${1:actionName}() {
-
- this.\$store.dispatch('${1:actionName}', ${2:payload});
}
-
- vtest
- Unit Test
- unit test component
-
-
- import Vue from 'vue';
-
import ${1:HelloWorld} from
- './components/${1:HelloWorld}';
describe('${1:HelloWorld}.vue',
- () => {
- it('${2:should render correct contents}', () => {
- const Constructor = Vue.extend(${1:HelloWorld});
- const vm = new Constructor().$mount();
- expect(vm.$el.querySelector('.hello h1').textContent)
- .to.equal(${3:'Welcome to Your Vue.js App'});
- });
});
-
- vconfig
- Vue.config.js Import
- vue.config.js
-
-
- module.exports = {
-
- css: {
- loaderOptions: {
- ${1:sass}: {
- data: `${2:@import '@/styles/_variables.scss';}`
- }
- }
- }
}
-
- v3reactive
- Vue Composition API - Reactive
- Vue Composition api - reactive
-
-
- const ${1:name} = reactive({
-
- ${2:count}: ${3:0}
})
-
- v3computed
- Vue Composition API - Computed
- Vue Composition api - computed
-
-
- const ${1:name} = computed(() => {
-
- return ${2}
})
-
- v3watch
- Vue Composition API - watch - single source
- Vue Composition api - watcher single source
-
-
- watch(() => ${1:foo}, (newValue, oldValue) => {
-
- ${2}
})
-
- v3watch-array
- Vue Composition API - watch - array
- Vue Composition api - watch as array
-
-
- watch([${1:foo}, ${2:bar}], ([new${1}, new${2}], [prev${1},
- prev${2}]) => {
-
- ${3}
})
-
- v3watcheffect
- Vue Composition API - watchEffect
- Vue Composition api - watchEffect
-
-
- watchEffect(() => {
-
- ${1}
})
-
- v3ref
- Vue Composition API - Vue ref
- Vue Ref
-
-
- const ${1:name} = ref(${2:initialValue})
-
-
- v3onmounted
- Vue Lifecycle Hooks - onMounted
- Vue Mounted Lifecycle hook
-
-
- onMounted(() => {${1}})
-
-
- v3onbeforemount
- Vue Lifecycle Hooks - onBeforeMount
- Vue onBeforeMount Lifecycle hook
-
-
- onBeforeMount(() => {${1}})
-
-
- v3onbeforeupdate
- Vue Lifecycle Hooks - onBeforeUpdate
- Vue onBeforeUpdate Lifecycle hook
-
-
- onBeforeUpdate(() => {${1}})
-
-
- v3onupdated
- Vue Lifecycle Hooks - onUpdated
- Vue onUpdated Lifecycle hook
-
-
- onUpdated(() => {${1}})
-
-
- v3onerrorcaptured
- Vue Lifecycle Hooks - onErrorCaptured
- Vue onErrorCaptured Lifecycle hook
-
-
- onErrorCaptured(() => {${1}})
-
-
- v3onunmounted
- Vue Lifecycle Hooks - onUnmounted
- (destroyed) Vue onUnmounted Lifecycle hook
-
-
- onUnmounted(() => {${1}})
-
-
- v3onbeforeunmount
- Vue Lifecycle Hooks - onBeforeUnmount
- (beforeDestroy) Vue onBeforeUnmount Lifecycle hook
-
-
- onBeforeUnmount(() => {${1}})
-
-
- vplugin
- Plugin import
- Import a plugin to main.js or plugins file
-
-
- import Vue from 'vue'
-
import ${1:VueCompositionApi} from
- '${2:@vue/composition-api}'
Vue.use(${1:VueCompositionApi})
-
- v3reactive-setup
- Vue Composition API Reactive Script
- Vue Composition API Script with Reactive
-
-
- import { reactive, toRefs } from '@vue/composition-api'
-
export
- default {
- setup () {
- const state = reactive({
- ${0:count}: ${1:0},
- })
-
- return {
- ...toRefs(state),
- }
- }
}
-
-
- v3useinoptions
- Use Composition API within Options API
- Use Composition API within Options API
-
-
- import { ${0:component} } from
- '@/composables/${0:component}.js'
-
export default
- {
- setup () {
- const { ${1:name} } = ${0:component}()
-
- return {
- ${1:name}
- }
- }
}
-
- vue-script-vuex.json
- Available in the following languages: javascript, typescript.
-
-
-
-
-
-
-
- Prefix
- Name
- Description
- Body
-
-
- vstore
- Vuex Store
- Base for Vuex store
-
-
- import Vue from 'vue';
-
import Vuex from 'vuex';
Vue.use(Vuex);
export
- const store = new Vuex.Store({
- state: {
- ${1:key}: ${2:value}
- }
});
-
- vgetter
- Vuex Getters
- vuex getter
-
-
- getters: {
-
- ${1:value}: state => {
- return state.${1:value};
- }
}
-
- vmutation
- Vuex Mutation
- vuex mutation
-
-
- mutations: {
-
- ${1:updateValue}(state, ${3:payload}) {
- state.${2:value} = ${3:payload};
- }
}
-
- vaction
- Vuex Action
- vuex action
-
-
- actions: {
-
- ${1:updateValue}({commit}, ${2:payload}) {
- commit('${1:updateValue}', ${2:payload});
- }
}
-
- vstore-import
- Vue Import Vuex Store
- import vuex store into main.js
-
-
- import { store } from './store/index';
-
-
- vmodule
- Vuex Module
- vuex module
-
-
- export default {
-
- state: {
- value: 'my value'
- },
- getters: {
- value: state => {
- return state.value;
- }
- },
- mutations: {
- updateValue(state, payload) {
- state.value = payload;
- }
- },
- actions: {
- updateValue({commit}, payload) {
- commit('updateValue', payload);
- }
- }
};
-
-
- vstore2
- Vuex Store 2
- vuex store 2
-
-
- export const state = () => ({
-
- value: 'myvalue'
})
export const getters =
- {
- getterValue: state => {
- return state.value
- }
}
export const mutations = {
- updateValue: (state, payload) => {
- state.value = payload
- }
}
export const actions = {
- updateActionValue({ commit }) {
- commit('updateValue', payload)
- }
}
-
- vue-script-router.json
- Available in the following languages: javascript, typescript.
-
-
-
-
-
-
-
- Prefix
- Name
- Description
- Body
-
-
- vrouter
- Vue Router
- Base for Vue Router
-
-
- import Vue from 'vue';
-
import VueRouter from
- 'vue-router';
Vue.use(VueRouter);
export
- const router = new VueRouter({
- base: '/',
- mode: 'history',
- routes: [
- { path: '/path', component: component }
- ]
});
-
- vscrollbehavior
- Vue Router scrollBehavior
- Vue Router scrollBehavior
-
-
- scrollBehavior(to, from, savedPosition) {
-
- if(savedPosition) {
- return savedPosition;
- } else {
- return { x: 0, y: 0 };
- }
},
-
- vbeforeeach
- Vue Router beforeEach
- Vue Router global guards beforeEach
-
-
- router.beforeEach((to, from, next) => {
-
- ${1:next();}
});
-
- vbeforeresolve
- Vue Router beforeResolve
- Vue Router global guards beforeResolve
-
-
- router.beforeResolve((to, from, next) => {
-
- ${1:next();}
});
-
- vaftereach
- Vue Router afterEach
- Vue Router global guards afterEach
-
-
- router.afterEach((to, from) => {
-
-
});
-
- vbeforeenter
- Vue Router beforeEnter
- Vue Router per-route guard beforeEnter
-
-
- beforeEnter(to, from, next) {
-
- ${1:next();}
},
-
- vbeforerouteenter
- Vue Router beforeRouteEnter
- Vue Router component guards beforeRouteEnter
-
-
- beforeRouteEnter(to, from, next) {
-
- next(vm => {${1:}});
},
-
- vbeforerouteupdate
- Vue Router beforeRouteUpdate
- Vue Router component guards beforeRouteUpdate
-
-
- beforeRouteUpdate(to, from, next) {
-
- ${1:next();}
},
-
- vbeforerouteleave
- Vue Router beforeRouteLeave
- Vue Router component guards beforeRouteLeave
-
-
- beforeRouteLeave(to, from, next) {
-
- ${1:next();}
},
-
-
- vroute-named
- Vue Router Route
- Vue Router route with per route code-splitting
-
-
- {
-
- path: '${1:pathName}',
- name: '${2:routeName}',
- component: () => import('./${3:pathToComponent}'),
},
-
- nuxt-config.json
- Available in the following languages: javascript, typescript.
-
-
-
-
-
-
-
- Prefix
- Name
- Description
- Body
-
-
- nfont
- Nuxt Font
- link to include fonts in a nuxt project, in nuxt-config
-
-
- { rel: 'stylesheet', href:
- '${1:https://fonts.googleapis.com/css?family=Montserrat:600|Rufina:700}'
- }
-
-
-
- ncss
- Nuxt Use CSS File
- link to css assets such as normalize
-
-
- css: ['assets/${1:normalize.css}'],
-
-
- nuxt-script.json
- Available in the following languages: javascript.
-
-
-
-
-
-
-
- Prefix
- Name
- Description
- Body
-
-
- nasyncdata
- Nuxt Async
- Nuxt asyncData
-
-
- async asyncData ({ ${1:params} }) {
-
- const { data } = await fetch(`${2:endpoint}`).then(res =>
- res.json())
- return { ${3:key}:${4:value} }
},
-
- nfetch
- Nuxt Fetch
- Nuxt Fetch
-
-
- async fetch ({ store, ${1:params} }) {
-
- let { data } = await fetch('${2:endpoint}').then(res =>
- res.json())
- store.commit('${3:MUTATION_TYPE}', data)
},
-
- nparam
- Nuxt Route Params
- Nuxt Route Params
-
-
- this.$route.params.${1:id}
-
-
-
- nhead
- Nuxt Head
- Nuxt Head
-
-
- head () {
-
- return {
- title: ${1:'Page Title'},
- meta: [
- // hid is used as unique identifier. Do not use `vmid` for it
- as it will not work
- { hid: 'description', name: 'description', content: ${2:'My
- custom description'} }
- ]
- }
},VS Code Snippets
-
-
- Batchfile
-
-
-
-
-
-
-
- Prefix
- Name
- Description
- Body
-
-
- #region
- Region Start
- Folding Region Start
-
-
- ::#region
-
-
-
- #endregion
- Region End
- Folding Region End
-
-
- ::#endregion
-
-
- Coffeescript
-
-
-
-
-
-
-
- Prefix
- Name
- Description
- Body
-
-
- #region
- Region Start
- Folding Region Start
-
-
- #region
-
-
-
- #endregion
- Region End
- Folding Region End
-
-
- #endregion
-
-
- C
-
-
-
-
-
-
-
- Prefix
- Name
- Description
- Body
-
-
- #region
- Region Start
- Folding Region Start
-
-
- #pragma region $0
-
-
-
- #endregion
- Region End
- Folding Region End
-
-
- #pragma endregion
-
-
- CPP
-
-
-
-
-
-
-
- Prefix
- Name
- Description
- Body
-
-
- #region
- Region Start
- Folding Region Start
-
-
- #pragma region $0
-
-
-
- #endregion
- Region End
- Folding Region End
-
-
- #pragma endregion
-
-
- Csharp
-
-
-
-
-
-
-
- Prefix
- Name
- Description
- Body
-
-
- #region
- Region Start
- Folding Region Start
-
-
- #region $0
-
-
-
- #endregion
- Region End
- Folding Region End
-
-
- #endregion
-
-
- Fsharp
-
-
-
-
-
-
-
- Prefix
- Name
- Description
- Body
-
-
- #region
- Region Start
- Folding Region Start
-
-
- //#region $0
-
-
-
- #endregion
- Region End
- Folding Region End
-
-
- //#endregion
-
-
- Groovy
-
-
-
-
-
-
-
- Prefix
- Name
- Description
- Body
-
-
- replace
- replace(dir: …, includes: …, token: …, value: …)
- Replace(...)
-
-
- replace(dir:"${1:dirName}", includes:"${2:*.*}",
- token:"${3:tokenName}", value:"\${${4:value}}")$0
-
-
- doc
- Doc Block
- Doc block comment
-
-
- /**
-
- * $0
- */
-
- key
- key: "value" (Hash Pair)
-
-
-
- ${1:key}: ${2:"${3:value}"}
-
-
- thread
- Thread.start { … }
- Thread.start { ... }
-
-
- Thread.start {
-
- $0
}
-
- thread
- Thread.startDaemon { … }
- Thread.startDaemon { ... }
-
-
- Thread.startDaemon {
-
- $0
}
-
- case
- case … break
- case ... break
-
-
- case ${1:CASE_NAME}:
-
- $2
break$0
-
- instance
- instance … (Singleton)
- Singleton instance + Getter
-
-
- private static $1 instance
-
static $1
- getInstance(${2:args}) {
- if (!instance) instance = new $1(${2:args})
- return instance
}
-
- tc
- class … extends GroovyTestCase { … }
- GroovyTestCase class
-
-
- class $1 extends GroovyTestCase {
-
- $0
}
-
- copy
- copy(file: …, tofile: …)
- Copy file
-
-
- copy(file:"${1:sourceFile}", tofile:"${2:targetFile}")
-
-
- copy
- copy(todir: …) { fileset(dir: …) { include … exclude }
- Copy fileset todir w/ include/exclude
-
-
- copy(todir:"${1:targetDir}") {
-
- fileset(dir:"${2:sourceDir}") {
- include(name:"${3:includeName}")
- exclude(name:"${4:excludeName}")
- }
}
-
- copy
- copy(todir: …) { fileset:dir …) }
- Copy fileset todir
-
-
- copy(todir:"${1:targetDir}") {
-
- fileset(dir:"${2:sourceDir}")
}
-
- cv
- closure = { … }
- Closure block
-
-
- def ${1:closureName} = { ${2:args} ->
-
- $0
}
-
- forin
- for(… in …) { … }
- For-loop
-
-
- for (${1:element} in ${2:collection}) {
-
- $0
}
-
- mkdir
- mkdir(dir: …)
- mkdir
-
-
- mkdir(dir:"${1:dirName}")
-
-
- p
- print
- print
-
-
- print $0
-
-
- pl
- println
- println
-
-
- println $0
-
-
- runa
- runAfter() { … }
- runAfter() { ... }
-
-
- runAfter(${1:delay}) {
-
- $0
}
-
- setup
- setUp() { … }
- setup() { ... }
-
-
- void setUp() {
-
- $0
}
-
- sleep
- sleep(secs) { … // on interrupt do }
- sleep with interrupt
-
-
- sleep(${1:secs}) {
-
- ${2:// on interrupt do}
}
-
- sleep
- sleep(secs)
- sleep
-
-
- sleep(${1:secs})
-
-
- sort
- sort { … }
- sort
-
-
- sort {
-
- $0
}
-
- main
- static main() { … }
- main method
-
-
- static main(args) {
-
- $0
}
-
- switch
- switch … case
- Switch-Case block
-
-
- switch(${1:value}) {
-
- case ${2:CASE}:
- $3
- break$0
}
-
- switch
- switch … case … default
- Switch-Case-Default block
-
-
- switch(${1:value}) {
-
- case ${3:CASE}:
- $4
- break$0
- default:
- $2
- break
}
-
- tear
- tearDown() { … }
- tearDown() { ... }
-
-
- void tearDown() {
-
- $0
}
-
- t
- test()
- test method
-
-
- void test$1() {
-
- $0
}
-
-
- v
- var
- var
-
-
- ${1:def} ${2:var}${3: = ${0:null}}
-
-
- Java
-
-
-
-
-
-
-
- Prefix
- Name
- Description
- Body
-
-
- #region
- Region Start
- Folding Region Start
-
-
- //#region
-
-
-
- #endregion
- Region End
- Folding Region End
-
-
- //#endregion
-
-
- Javascript
-
-
-
-
-
-
-
- Prefix
- Name
- Description
- Body
-
-
- define
- define module
- define module
-
-
- define([
-
- 'require',
- '${1:dependency}'
], function(require, ${2:factory}) {
- 'use strict';
- $0
});
-
- for
- For Loop
- For Loop
-
-
- for (let ${1:index} = 0; ${1:index} < ${2:array}.length;
- ${1:index}++) {
-
- const ${3:element} = ${2:array}[${1:index}];
- $0
}
-
- foreach
- For-Each Loop
- For-Each Loop
-
-
- ${1:array}.forEach(${2:element} => {
-
- $0
});
-
- forin
- For-In Loop
- For-In Loop
-
-
- for (const ${1:key} in ${2:object}) {
-
- if (${2:object}.hasOwnProperty(${1:key})) {
- const ${3:element} = ${2:object}[${1:key}];
- $0
- }
}
-
- forof
- For-Of Loop
- For-Of Loop
-
-
- for (const ${1:iterator} of ${2:object}) {
-
- $0
}
-
- function
- Function Statement
- Function Statement
-
-
- function ${1:name}(${2:params}) {
-
- $0
}
-
- if
- If Statement
- If Statement
-
-
- if (${1:condition}) {
-
- $0
}
-
- ifelse
- If-Else Statement
- If-Else Statement
-
-
- if (${1:condition}) {
-
- $0
} else {
-
}
-
- new
- New Statement
- New Statement
-
-
- const ${1:name} = new ${2:type}(${3:arguments});$0
-
-
- switch
- Switch Statement
- Switch Statement
-
-
- switch (${1:key}) {
-
- case ${2:value}:
- $0
- break;
- default:
- break;
}
-
- while
- While Statement
- While Statement
-
-
- while (${1:condition}) {
-
- $0
}
-
- dowhile
- Do-While Statement
- Do-While Statement
-
-
- do {
-
- $0
} while (${1:condition});
-
- trycatch
- Try-Catch Statement
- Try-Catch Statement
-
-
- try {
-
- $0
} catch (${1:error}) {
-
}
-
- settimeout
- Set Timeout Function
- Set Timeout Function
-
-
- setTimeout(() => {
-
- $0
}, ${1:timeout});
-
- setinterval
- Set Interval Function
- Set Interval Function
-
-
- setInterval(() => {
-
- $0
}, ${1:interval});
-
- import statement
- Import external module.
- Import external module.
-
-
- import { $0 } from "${1:module}";
-
-
- #region
- Region Start
- Folding Region Start
-
-
- //#region $0
-
-
- #endregion
- Region End
- Folding Region End
-
-
- //#endregion
-
-
- log
- Log to the console
- Log to the console
-
-
- console.log($1);
-
-
- warn
- Log warning to console
- Log warning to the console
-
-
- console.warn($1);
-
-
-
- error
- Log error to console
- Log error to the console
-
-
- console.error($1);
-
-
- Markdown
-
-
-
-
-
-
-
- Prefix
- Name
- Description
- Body
-
-
- bold
- Insert bold text
- Insert bold text
-
-
- **${1:${TM_SELECTED_TEXT}}**$0
-
-
- italic
- Insert italic text
- Insert italic text
-
-
- *${1:${TM_SELECTED_TEXT}}*$0
-
-
- quote
- Insert quoted text
- Insert quoted text
-
-
- > ${1:${TM_SELECTED_TEXT}}
-
-
- code
- Insert code
- Insert code
-
-
- `${1:${TM_SELECTED_TEXT}}`$0
-
-
- fenced codeblock
- Insert fenced code block
- Insert fenced code block
-
-
- ```${1:language}
-
${TM_SELECTED_TEXT}$0
```
-
- heading
- Insert heading
- Insert heading
-
-
- # ${1:${TM_SELECTED_TEXT}}
-
-
- unordered list
- Insert unordered list
- Insert unordered list
-
-
- - ${1:first}
-
- ${2:second}
- ${3:third}
$0
-
- ordered list
- Insert ordered list
- Insert ordered list
-
-
- 1. ${1:first}
-
2. ${2:second}
3. ${3:third}
$0
-
- horizontal rule
- Insert horizontal rule
- Insert horizontal rule
-
-
- ----------
-
-
- link
- Insert link
- Insert link
-
-
- [${TM_SELECTED_TEXT:${1:text}}](https://${2:link})$0
-
-
-
- image
- Insert image
- Insert image
-
-
- $0
-
-
- PHP
-
-
-
-
-
-
-
- Prefix
- Name
- Description
- Body
-
-
- class
- class …
- Class definition
-
-
- class ${1:ClassName} ${2:extends ${3:AnotherClass}}
- ${4:implements ${5:Interface}}
-
{
- $0
}
-
- doc_class
- PHPDoc class …
- Documented Class Declaration
-
-
- /**
-
- * ${6:undocumented class}
- */
class ${1:ClassName} ${2:extends ${3:AnotherClass}}
- ${4:implements ${5:Interface}}
{
- $0
}
-
- con
- function __construct
-
-
-
- ${1:public} function __construct(${2:${3:Type} $${4:var}${5:
- = ${6:null}}}) {
-
- \$this->${4:var} = $${4:var};$0
}
-
- doc_v
- PHPDoc property
- Documented Class Variable
-
-
- /** @var ${1:Type} $${2:var} ${3:description} */
-
${4:protected}
- $${2:var}${5: = ${6:null}};$0
-
- doc_f
- PHPDoc function …
- Documented function
-
-
- /**
-
- * ${1:undocumented function summary}
- *
- * ${2:Undocumented function long description}
- *
${3: * @param ${4:Type} $${5:var} ${6:Description}}
${7:
- * @return ${8:type}}
${9: * @throws ${10:conditon}}
- **/
${11:public }function
- ${12:FunctionName}(${13:${14:${4:Type} }$${5:var}${15: =
- ${16:null}}})
{
- ${0:# code...}
}
-
- param
- PHPDoc param …
- Paramater documentation
-
-
- * @param ${1:Type} ${2:var} ${3:Description}$0
-
-
- fun
- function …
- Function
-
-
- ${1:public }function ${2:FunctionName}(${3:${4:${5:Type}
- }$${6:var}${7: = ${8:null}}})
-
{
- ${0:# code...}
}
-
- trait
- trait …
- Trait
-
-
- /**
-
- * $1
- */
trait ${2:TraitName}
{
- $0
}
-
- def
- define(…, …)
- Definition
-
-
- define('$1', ${2:'$3'});
-
$0
-
- do
- do … while …
- Do-While loop
-
-
- do {
-
- ${0:# code...}
} while (${1:$${2:a} <= ${3:10}});
-
- while
- while …
- While-loop
-
-
- while (${1:$${2:a} <= ${3:10}}) {
-
- ${0:# code...}
}
-
- if
- if …
- If block
-
-
- if (${1:condition}) {
-
- ${0:# code...}
}
-
- ifelse
- if … else …
- If Else block
-
-
- if (${1:condition}) {
-
- ${2:# code...}
} else {
- ${3:# code...}
}
$0
-
- if?
- $… = ( … ) ? … : …
- Ternary conditional assignment
-
-
- $${1:retVal} = (${2:condition}) ? ${3:a} : ${4:b} ;
-
-
- else
- else …
- Else block
-
-
- else {
-
- ${0:# code...}
}
-
- elseif
- elseif …
- Elseif block
-
-
- elseif (${1:condition}) {
-
- ${0:# code...}
}
-
- for
- for …
- For-loop
-
-
- for ($${1:i}=${2:0}; $${1:i} < $3; $${1:i}++) {
-
- ${0:# code...}
}
-
- foreach
- foreach …
- Foreach loop
-
-
- foreach ($${1:variable} as $${2:key} ${3:=> $${4:value}})
- {
-
- ${0:# code...}
}
-
- array
- $… = array (…)
- Array initializer
-
-
- $${1:arrayName} = array('$2' => $3${4:,} $0);
-
-
- shorray
- $… = […]
- Array initializer
-
-
- $${1:arrayName} = ['$2' => $3${4:,} $0];
-
-
- keyval
- … => …
- Key-Value initializer
-
-
- '$1' => $2${3:,} $0
-
-
- switch
- switch …
- Switch block
-
-
- switch (\$${1:variable}) {
-
- case '${2:value}':
- ${3:# code...}
- break;
- $0
- default:
- ${4:# code...}
- break;
}
-
- case
- case …
- Case Block
-
-
- case '${1:value}':
-
- ${0:# code...}
- break;
-
- this
- $this->…
- $this->...
-
-
- \$this->$0;
-
-
- ethis
- echo $this->…
- Echo this
-
-
- echo \$this->$0;
-
-
- throw
- Throw Exception
- Throw exception
-
-
- throw new $1Exception(${2:"${3:Error Processing
- Request}"}${4:, ${5:1}});
-
$0
-
- #region
- Region Start
- Folding Region Start
-
-
- #region
-
-
- #endregion
- Region End
- Folding Region End
-
-
- #endregion
-
-
-
- try
- Try Catch Block
- Try catch block
-
-
- try {
-
- ${1://code...}
} catch (${2:\Throwable} ${3:\$th}) {
- ${4://throw \$th;}
}
-
- Powershell
-
-
-
-
-
-
-
- Prefix
- Name
- Description
- Body
-
-
- #region
- Region Start
- Folding Region Start
-
-
- #region $0
-
-
-
- #endregion
- Region End
- Folding Region End
-
-
- #endregion
-
-
- Swift
-
-
-
-
-
-
-
- Prefix
- Name
- Description
- Body
-
-
- print
- print
- print("...")
-
-
- print("$1") $0
-
-
- printv
- print value
- print("\(...)")
-
-
- print("\($1)") $0
-
-
- while
- while
- while statement
-
-
- while ${1:condition} {
-
- $0
}
-
- repeat
- repeat-while
- repeat-while statement
-
-
- repeat {
-
- $0
} while ${1:condition}
-
- for
- for
- for-in statement
-
-
- for ${1:item} in ${2:collection} {
-
- $0
}
-
- if
- if
- if statement
-
-
- if ${1:condition} {
-
- $0
}
-
- elif
- else if
- else clause with a nested if statement
-
-
- else if ${1:condition} {
-
- $0
}
-
- else
- else
- else clause
-
-
- else {
-
- $0
}
-
- iflet
- if let
- if statement with optional binding
-
-
- if let ${1:value} = ${2:optional} {
-
- $0
}
-
- guard
- guard
- guard statement
-
-
- guard ${1:condition} else {
-
- $0
}
-
- guardlet
- guard let
- guard statement with optional binding
-
-
- guard let ${1:value} = ${2:optional} else {
-
- $0
}
-
- switch
- switch
- switch statement
-
-
- switch ${1:value} {
-
case ${2:pattern}:
- $0
default:
-
}
-
- do
- do
- do statement
-
-
- do {
-
- $0
} catch ${1:error} {
- $2
}
-
- func
- func
- function declaration
-
-
- func ${1:name}(${2:parameters}) -> ${3:Type} {
-
- $0
}
-
- struct
- struct
- struct declaration
-
-
- struct ${1:Name} {
-
- $0
}
-
- enum
- enum
- enum declaration
-
-
- enum ${1:Name} {
-
- case $0
}
-
- class
- class
- class declaration
-
-
- class ${1:Name} {
-
- $0
}
-
- protocol
- protocol
- protocol declaration
-
-
- protocol ${1:Name} {
-
- $0
}
-
-
- extension
- extension
- extension declaration
-
-
- extension ${1:Type} {
-
- $0
}
-
- Typescript
-
-
-
-
-
-
-
- Prefix
- Name
- Description
- Body
-
-
- ctor
- Constructor
- Constructor
-
-
- /**
-
- *
- */
constructor() {
- super();
- $0
}
-
- class
- Class Definition
- Class Definition
-
-
- class ${1:name} {
-
- constructor(${2:parameters}) {
- $0
- }
}
-
- public method
- Public Method Definition
- Public Method Definition
-
-
- /**
-
- * ${1:name}
- */
public ${1:name}() {
- $0
}
-
- private method
- Private Method Definition
- Private Method Definition
-
-
- private ${1:name}() {
-
- $0
}
-
- import statement
- Import external module.
- Import external module.
-
-
- import { $0 } from "${1:module}";
-
-
- get
- Property getter
- Property getter
-
-
-
public get ${1:value}() : ${2:string} {
- ${3:return $0}
}
-
- log
- Log to the console
- Log to the console
-
-
- console.log($1);
-
$0
-
- warn
- Log warning to console
- Log warning to the console
-
-
- console.warn($1);
-
$0
-
- error
- Log error to console
- Log error to the console
-
-
- console.error($1);
-
$0
-
- prop
- Define a full property
- Define a full property
-
-
-
private _${1:value} : ${2:string};
public get
- ${1:value}() : ${2:string} {
- return this._${1:value};
}
public set ${1:value}(v :
- ${2:string}) {
- this._${1:value} = v;
}
-
- ref
- Triple-slash reference
- Triple-slash reference
-
-
- /// <reference path="$1" />
-
$0
-
- set
- Property setter
- Property setter
-
-
-
public set ${1:value}(v : ${2:string}) {
- this.$3 = v;
}
-
- throw
- Throw Exception
- Throw Exception
-
-
- throw new Error("$1");
-
$0
-
- for
- For Loop
- For Loop
-
-
- for (let ${1:index} = 0; ${1:index} < ${2:array}.length;
- ${1:index}++) {
-
- const ${3:element} = ${2:array}[${1:index}];
- $0
}
-
- foreach =>
- For-Each Loop using =>
- For-Each Loop using =>
-
-
- ${1:array}.forEach(${2:element} => {
-
- $0
});
-
- forin
- For-In Loop
- For-In Loop
-
-
- for (const ${1:key} in ${2:object}) {
-
- if (Object.prototype.hasOwnProperty.call(${2:object},
- ${1:key})) {
- const ${3:element} = ${2:object}[${1:key}];
- $0
- }
}
-
- forof
- For-Of Loop
- For-Of Loop
-
-
- for (const ${1:iterator} of ${2:object}) {
-
- $0
}
-
- forawaitof
- For-Await-Of Loop
- For-Await-Of Loop
-
-
- for await (const ${1:iterator} of ${2:object}) {
-
- $0
}
-
- function
- Function Statement
- Function Statement
-
-
- function ${1:name}(${2:params}:${3:type}) {
-
- $0
}
-
- if
- If Statement
- If Statement
-
-
- if (${1:condition}) {
-
- $0
}
-
- ifelse
- If-Else Statement
- If-Else Statement
-
-
- if (${1:condition}) {
-
- $0
} else {
-
}
-
- new
- New Statement
- New Statement
-
-
- const ${1:name} = new ${2:type}(${3:arguments});$0
-
-
- switch
- Switch Statement
- Switch Statement
-
-
- switch (${1:key}) {
-
- case ${2:value}:
- $0
- break;
- default:
- break;
}
-
- while
- While Statement
- While Statement
-
-
- while (${1:condition}) {
-
- $0
}
-
- dowhile
- Do-While Statement
- Do-While Statement
-
-
- do {
-
- $0
} while (${1:condition});
-
- trycatch
- Try-Catch Statement
- Try-Catch Statement
-
-
- try {
-
- $0
} catch (${1:error}) {
-
}
-
- settimeout
- Set Timeout Function
- Set Timeout Function
-
-
- setTimeout(() => {
-
- $0
}, ${1:timeout});
-
- #region
- Region Start
- Folding Region Start
-
-
- //#region $0
-
-
-
- #endregion
- Region End
- Folding Region End
-
-
- //#endregion
-
-
- VB
-
-
-
-
-
-
-
- Prefix
- Name
- Description
- Body
-
-
- for
- For Next Loop
- For Next Loop
-
-
- For ${1:index} As ${2:ObjectType} = ${3:lower} To
- ${4:Upper}
-
- $0
Next ${1:index}
-
- fore
- For Each...Next
- For Each...Next
-
-
- For Each ${1:Variable} As ${2:ObjectType} In
- ${3:Collection}
-
- $0
Next
-
- fori
- For i...Next i
- For i...Next i
-
-
- For i As ${1:Integer} = ${2:Lower} To ${3:Upper}
-
- $0
Next i
-
- forj
- For j...Next j
- For j...Next j
-
-
- For j As ${1:Integer} = ${2:Lower} To ${3:Upper}
-
- $0
Next j
-
- pf
- Public Function...
- Public Function...
-
-
- Public Function ${1:FunctionName}(${2:ParameterList}) As
- ${3:ReturnType}
-
- Try
- $0
- Catch ex As Exception
- End Try
- Return ${3:ReturnValue}
End Function
-
- ps
- Public Sub ...
- Public Sub ...
-
-
- Public Sub ${1:ProcedureName}(${2:ParameterList})
-
- Try
- $0
- Catch ex As Exception
- End Try
End Sub
-
- while
- While ... End While
- While ... End While
-
-
- While ${1:Boolean}
-
- $0
End While
-
- #Region
- Region Start
- Folding Region Start
-
-
- #Region $0
-
-
-
- #End Region
- Region End
- Folding Region End
-
-
- #End Region
- Snippets Ranger
- Table of Contents
-
-
-
-
-
-
-
-
- User Snippets
-
-
- Markdown
-
-
-
-
-
-
-
-
-
-
- Prefix
- Name
- Description
- Body
-
-
- test
- test
-
-
-
- [
-
${CLIPBOARD/^(.+)$/'$1',/gm}
]
-
-
- up
- Upper the second mirrored tab stop
-
-
-
- ${1:title}
-
${1/(.*)/${1:/upcase}/}
${1/(.*)/${1:/upcase}/}
$0Extension Snippets
- markdownlint
-
-
- snippets.json
-
-
-
-
-
-
-
-
-
-
-
-
- Prefix
- Name
- Description
- Body
-
-
- markdownlint-disable
- insertMarkdownLintDisableComment
-
- Disables one or more rules by name (MD013), alias (line-length),
- or tag (whitespace). Multiple rules are space-delimited (MD018
- MD019). If no rules are specified, all rules are disabled. Takes
- effect starting with the line the comment is on.
-
-
-
- <!-- markdownlint-disable ${1:MD000 }-->
-
-
- markdownlint-enable
- insertMarkdownLintEnableComment
-
- Enables one or more rules by name (MD013), alias (line-length),
- or tag (whitespace). Multiple rules are space-delimited (MD018
- MD019). If no rules are specified, all rules are enabled. Takes
- effect starting with the line the comment is on.
-
-
-
- <!-- markdownlint-enable ${1:MD000 }-->
-
-
- markdownlint-disable-file
- insertMarkdownLintDisableFileComment
-
- Disables one or more rules by name (MD013), alias (line-length),
- or tag (whitespace). Multiple rules are space-delimited (MD018
- MD019). If no rules are specified, all rules are disabled.
- Applies to the entire file.
-
-
-
- <!-- markdownlint-disable-file ${1:MD000 }-->
-
-
- markdownlint-enable-file
- insertMarkdownLintEnableFileComment
-
- Enables one or more rules by name (MD013), alias (line-length),
- or tag (whitespace). Multiple rules are space-delimited (MD018
- MD019). If no rules are specified, all rules are enabled.
- Applies to the entire file.
-
-
-
- <!-- markdownlint-enable-file ${1:MD000 }-->
-
-
- markdownlint-capture
- insertMarkdownLintCaptureComment
-
- Captures the current rule configuration. Takes effect starting
- with the line the comment is on.
-
-
-
- <!-- markdownlint-capture -->
-
-
- markdownlint-restore
- insertMarkdownLintRestoreComment
-
- Restores the most recently captured rule configuration. Defaults
- to the document's initial configuration. Takes effect starting
- with the line the comment is on.
-
-
-
- <!-- markdownlint-restore -->
-
-
-
- markdownlint-configure-file
- insertMarkdownLintConfigureFileComment
-
- Configures one or more rules by name (MD013), alias
- (line-length), or tag (whitespace) using the same JSON format as
- the "markdownlint.config" object. Applies to the entire file.
-
-
-
- <!-- markdownlint-configure-file { ${1:"MD013": {
- "line_length": 100 \}} } -->
- Markdown Snippets
-
-
- snippets.code-snippets
-
-
-
-
-
-
-
-
-
-
-
-
- Prefix
- Name
- Description
- Body
-
-
- task
- Insert task list
- Insert task list
-
-
- - [${1| ,x|}] ${2:text}
-
${0}
-
- task2
- Insert task list 2
- Insert task list with 2 tasks
-
-
- - [${1| ,x|}] ${2:text}
-
- [${3| ,x|}] ${4:text}
${0}
-
- task3
- Insert task list 3
- Insert task list with 3 tasks
-
-
- - [${1| ,x|}] ${2:text}
-
- [${3| ,x|}] ${4:text}
-
- [${5| ,x|}] ${6:text}
${0}
-
- task4
- Insert task list 4
- Insert task list with 4 tasks
-
-
- - [${1| ,x|}] ${2:text}
-
- [${3| ,x|}] ${4:text}
-
- [${5| ,x|}] ${6:text}
- [${7| ,x|}] ${8:text}
${0}
-
- task5
- Insert task list 5
- Insert task list with 5 tasks
-
-
- - [${1| ,x|}] ${2:text}
-
- [${3| ,x|}] ${4:text}
-
- [${5| ,x|}] ${6:text}
- [${7| ,x|}] ${8:text}
-
- [${9| ,x|}] ${10:text}
${0}
-
- table
- Insert table
-
- Insert table with 2 rows and 3 columns. First row is heading.
-
-
-
- | ${1:Column1} | ${2:Column2} | ${3:Column3} |
-
|--------------
- | -------------- | -------------- |
| ${4:Item1} |
- ${5:Item1} | ${6:Item1} |
${0}
-
- 2x1table
- Insert 2x1 table
-
- Insert table with 2 rows and 1 column. First row is heading.
-
-
-
- | ${1:Column1} |
-
|-------------- |
| ${2:Item1}
- |
${0}
-
- 3x1table
- Insert 3x1 table
-
- Insert table with 3 rows and 1 column. First row is heading.
-
-
-
- | ${1:Column1} |
-
|-------------- |
| ${2:Item1}
- |
| ${3:Item2} |
${0}
-
- 4x1table
- Insert 4x1 table
-
- Insert table with 4 rows and 1 column. First row is heading.
-
-
-
- | ${1:Column1} |
-
|-------------- |
| ${2:Item1}
- |
| ${3:Item2} |
| ${4:Item3} |
${0}
-
- 5x1table
- Insert 5x1 table
-
- Insert table with 5 rows and 1 column. First row is heading.
-
-
-
- | ${1:Column1} |
-
|-------------- |
| ${2:Item1}
- |
| ${3:Item2} |
| ${4:Item3} |
| ${5:Item4}
- |
${0}
-
- 2x2table
- Insert 2x2 table
-
- Insert table with 2 rows and 2 columns. First row is heading.
-
-
-
- | ${1:Column1} | ${2:Column2} |
-
|--------------- |
- --------------- |
| ${3:Item1.1} | ${4:Item2.1} |
${0}
-
- 3x2table
- Insert 3x2 table
-
- Insert table with 3 rows and 2 columns. First row is heading.
-
-
-
- | ${1:Column1} | ${2:Column2} |
-
|--------------- |
- --------------- |
| ${3:Item1.1} | ${4:Item2.1} |
|
- ${5:Item1.2} | ${6:Item2.2} |
${0}
-
- 4x2table
- Insert 4x2 table
-
- Insert table with 4 rows and 2 columns. First row is heading.
-
-
-
- | ${1:Column1} | ${2:Column2} |
-
|--------------- |
- --------------- |
| ${3:Item1.1} | ${4:Item2.1} |
|
- ${5:Item1.2} | ${6:Item2.2} |
| ${7:Item1.3} |
- ${8:Item2.3} |
${0}
-
- 5x2table
- Insert 5x2 table
-
- Insert table with 5 rows and 2 columns. First row is heading.
-
-
-
- | ${1:Column1} | ${2:Column2} |
-
|--------------- |
- --------------- |
| ${3:Item1.1} | ${4:Item2.1} |
|
- ${4:Item1.2} | ${5:Item2.2} |
| ${6:Item1.3} |
- ${7:Item2.3} |
| ${8:Item1.4} | ${9:Item2.4} |
${0}
-
- 2x3table
- Insert 2x3 table
-
- Insert table with 2 rows and 3 columns. First row is heading.
-
-
-
- | ${1:Column1} | ${2:Column2} | ${3:Column3} |
-
|----------------
- | --------------- | --------------- |
| ${4:Item1.1} |
- ${5:Item2.1} | ${6:Item3.1} |
${0}
-
- 3x3table
- Insert 3x3 table
-
- Insert table with 3 rows and 3 columns. First row is heading.
-
-
-
- | ${1:Column1} | ${2:Column2} | ${3:Column3} |
-
|----------------
- | --------------- | --------------- |
| ${4:Item1.1} |
- ${5:Item2.1} | ${6:Item3.1} |
| ${7:Item1.2} |
- ${8:Item2.2} | ${9:Item3.2} |
${0}
-
- 4x3table
- Insert 4x3 table
-
- Insert table with 4 rows and 3 columns. First row is heading.
-
-
-
- | ${1:Column1} | ${2:Column2} | ${3:Column3} |
-
|----------------
- | --------------- | --------------- |
| ${4:Item1.1} |
- ${5:Item2.1} | ${6:Item3.1} |
| ${7:Item1.2} |
- ${8:Item2.2} | ${9:Item3.2} |
| ${10:Item1.3} |
- ${11:Item2.3} | ${12:Item3.3} |
${0}
-
-
- 5x3table
- Insert 5x3 table
-
- Insert table with 5 rows and 3 columns. First row is heading.
-
-
-
- | ${1:Column1} | ${2:Column2} | ${3:Column3} |
-
|----------------
- | --------------- | --------------- |
| ${4:Item1.1} |
- ${5:Item2.1} | ${6:Item3.1} |
| ${7:Item1.2} |
- ${8:Item2.2} | ${9:Item3.2} |
| ${10:Item1.3} |
- ${11:Item2.3} | ${12:Item3.3} |
| ${13:Item1.4} |
- ${14:Item2.4} | ${15:Item3.4} |
${0}Vue VSCode Snippets
-
-
- vue.json
-
-
-
-
-
-
-
-
-
-
-
-
- Prefix
- Name
- Description
- Body
-
-
- vbase
- Vue Single File Component
- Base for Vue File with SCSS
-
-
- <template>
-
- <div>
- </div>
</template>
<script>
- export default {
- ${0}
- }
</script>
<style lang="scss"
- scoped>
</style>
-
- vbase-sass
- Vue Single File Component with SASS
- Base for Vue File with PostCSS
-
-
- <template>
-
- <div>
- </div>
</template>
<script>
- export default {
- ${0}
- }
</script>
<style lang="sass"
- scoped>
</style>
-
- vbase-less
- Vue Single File Component with LESS
- Base for Vue File with PostCSS
-
-
- <template>
-
- <div>
- </div>
</template>
<script>
- export default {
- ${0}
- }
</script>
<style lang="less"
- scoped>
</style>
-
- vbase-pcss
- Vue Single File Component with postcss
- Base for Vue File with PostCSS
-
-
- <template>
-
- <div>
- </div>
</template>
<script>
- export default {
- ${0}
- }
</script>
<style lang="postcss"
- scoped>
</style>
-
- vbase-css
- Vue Single File Component with Css
- Base for Vue File with CSS
-
-
- <template>
-
- <div>
- </div>
</template>
<script>
- export default {
- ${0}
- }
</script>
<style scoped>
</style>
-
- vbase-styl
- Vue Single File Component with Stylus
- Base for Vue File with Stylus
-
-
- <template>
-
- <div>
- </div>
</template>
<script>
- export default {
- ${0}
- }
</script>
<style lang="stylus"
- scoped>
</style>
-
- vbase-ts
- Vue Single File Component with Typescript
- Base for Vue File with Typescript
-
-
- <template>
-
- <div>
- </div>
</template>
<script
- lang="ts">
- import Vue from 'vue'
- export default Vue.extend({
- ${0}
- })
</script>
<style scoped>
</style>
-
- vbase-ns
- Vue Single File Component with No Style
- Base for Vue File with no styles
-
-
- <template>
-
- <div>
- </div>
</template>
<script>
- export default {
- ${0}
- }
</script>
-
- vbase-3
- Vue Single File Component Composition API
- Base for Vue File Composition API with SCSS
-
-
- <template>
-
- <div>
- </div>
</template>
<script>
export
- default {
- setup () {
- ${0}
- return {}
- }
}
</script>
<style lang="scss"
- scoped>
</style>
-
- vbase-3-reactive
- Vue Single File Component Composition API Reactive
- Base for Vue File Composition API with SCSS
-
-
- <template>
-
- <div>
- </div>
</template>
<script>
import
- { reactive, toRefs } from '@vue/composition-api'
export
- default {
- setup () {
- const state = reactive({
- ${0:count}: ${1:0},
- })
-
- return {
- ...toRefs(state),
- }
- }
}
</script>
<style lang="scss"
- scoped>
</style>
-
- vbase-3-ts
- Vue Single File Component Composition API with Typescript
- Base for Vue File Composition API - Typescript
-
-
- <template>
-
- <div>
- </div>
</template>
<script
- lang="ts">
import { defineComponent } from 'vue'
export
- default defineComponent({
- setup () {
- ${0}
- return {}
- }
})
</script>
<style
- scoped>
</style>
-
-
- vbase-ts-class
-
- Vue Single File Component with Class based Typescript format
-
- Base for Vue File with Class based Typescript format
-
-
- <template>
-
- <div>
- </div>
</template>
<script
- lang="ts">
- import { Component, Vue } from 'vue-property-decorator';
- @Component
- export default class ${0} extends Vue {
-
- }
</script>
<style scoped>
</style>
-
- vue-pug.json
-
-
-
-
-
-
-
-
-
-
-
-
- Prefix
- Name
- Description
- Body
-
-
- vfor
- Vue v-for
- vfor statement
-
-
- ${1:div}(v-for="${2:item} in ${2:item}s"
- :key="${2:item}.id")
-
- | {{ ${2:item} }}
-
- vmodel
- Vue v-model Directive
- v-model directive
-
-
- input(v-model="${1:data}" type="text")
-
-
- vmodel-num
- Vue v-model Number Directive
- v-model directive number input
-
-
- input(v-model.number="${1:numData}" type="number"
- step="1")
-
-
- von
- Vue v-on Shortcut Directive
- v-on click handler with arguments
-
-
- @click="${1:handler}(${2:arg}, $event)"
-
-
- vel-props
- Vue Component with Props Binding
- component element with props
-
-
- ${1:component}(:${1:propName}="${0}")
-
-
- vsrc
- Vue Image Source Binding
- image source binding
-
-
- img(:src="'/path/to/images/' + ${1:fileName}"
- alt="${2:altText}")
-
-
- vstyle
- Vue Style Binding
- vue inline style binding
-
-
- ${1:div}(:style="{ fontSize: ${2:data} + 'px' }")
-
-
- vstyle-obj
- Vue Style Binding Object
- vue inline style binding, objects
-
-
- ${1:div}(:style="[${2:styleObjectA}, ${3:styleObjectB]}")
-
-
- vclass
- Vue Class Binding
- vue class binding
-
-
- ${1:div}(:class="{ ${2:className}: ${3:data} }")
-
-
- vclass-obj
- Vue Class Binding Object
- vue class binding
-
-
- ${1:div}(:class="[${2:classNameA}, ${3:classNameB}]")
-
-
- vclass-obj-mult
- Vue Multiple Conditional Class Bindings
- vue multiple conditional class bindings
-
-
- ${1:div}(:class="[${2:classNameA}, {${3:classNameB} :
- ${4:condition}}]")
-
-
- vanim
- Vue Transition Component with JavaScript Hooks
- transition component js hooks
-
-
- transition(
-
- mode="out-in"
- @before-enter="beforeEnter"
- @enter="enter"
- @before-leave="beforeLeave"
- @leave="leave"
- :css="false"
)
-
-
- vnuxtl
- Vue Nuxt Routing Link
- nuxt routing link
-
-
- nuxt-link(to="/${1:page}") ${1:page}
-
-
- vue-template.json
-
-
-
-
-
-
-
-
-
-
-
-
- Prefix
- Name
- Description
- Body
-
-
- vfor
- Vue v-for
- vfor statement
-
-
- <${1:div} v-for="${2:item} in ${2:item}s"
- :key="${2:item}.id">
-
- {{ ${2:item} }}
</${1:div}>
-
- vmodel
- Vue v-model Directive
- v-model directive
-
-
- <input v-model="${1:data}" type="text" />
-
-
- vmodel-num
- Vue v-model Number Directive
- v-model directive number input
-
-
- <input v-model.number="${1:numData}" type="number"
- step="1" />
-
-
- von
- Vue v-on Shortcut Directive
- v-on click handler with arguments
-
-
- @click="${1:handler}(${2:arg}, $event)"
-
-
- vel-props
- Vue Component with Props Binding
- component element with props
-
-
- <${1:component}
- :${1:propName}="${0}"></${1:component}>
-
-
- vslot-named
- Vue Named Slot
- named slot
-
-
- <template
- v-slot:${0:name}>${1:defaultcontent}</template>
-
-
- vsrc
- Vue Image Source Binding
- image source binding
-
-
- <img :src="'/path/to/images/' + ${1:fileName}"
- alt="${2:altText}"/>
-
-
- vstyle
- Vue Style Binding
- vue inline style binding
-
-
- <${1:div} :style="{ fontSize: ${2:data} + 'px'
- }"></${1:div}>
-
-
- vstyle-obj
- Vue Style Binding Object
- vue inline style binding, objects
-
-
- <${1:div} :style="[${2:styleObjectA},
- ${3:styleObjectB]}"></${1:div}>
-
-
- vclass
- Vue Class Binding
- vue class binding
-
-
- <${1:div} :class="{ ${2:className}: ${3:data}
- }"></${1:div}>
-
-
- vclass-obj
- Vue Class Binding Object
- vue class binding
-
-
- <${1:div} :class="[${2:classNameA},
- ${3:classNameB}]"></${1:div}>
-
-
- vclass-obj-mult
- Vue Multiple Conditional Class Bindings
- vue multiple conditional class bindings
-
-
- <${1:div} :class="[${2:classNameA}, {${3:classNameB} :
- ${4:condition}}]"></${1:div}>
-
-
- vemit-child
- Vue Emit from Child
- Vue Emit from Child Component
-
-
- @change="$$emit('change', $$event.target.value)"
-
-
- vemit-parent
- Vue Emit to Parent
- Vue Emit to Parent Component
-
-
- @change="${1:foo} = $$event"
-
-
- vanim
- Vue Transition Component with JavaScript Hooks
- transition component js hooks
-
-
- <transition
-
- mode="out-in"
- @before-enter="beforeEnter"
- @enter="enter"
- @before-leave="beforeLeave"
- @leave="leave"
- :css="false">
</transition>
-
- vnuxtl
- Vue Nuxt Routing Link
- nuxt routing link
-
-
- <nuxt-link
- to="/${1:page}">${1:page}</nuxt-link>
-
-
- vroutename
- Vue Named Routing Link
- Named routing link
-
-
- <router-link :to="{name:
- '${1:name}'}">${2:LinkTitle}</router-link>
-
-
- vroutenameparam
- Vue Named Routing Link with Params
- Named routing link w/ params
-
-
- <router-link :to="{name: '${1:name}', params:{${2:id}:
- '${3:value}'} }">${4:LinkTitle}</router-link>
-
-
-
- vroutepath
- Vue Path Routing Link
- Path routing link
-
-
- <router-link
- to="${1:path}">${2:LinkTitle}</router-link>
-
-
- vue-script.json
-
-
-
-
-
-
-
-
-
-
-
-
- Prefix
- Name
- Description
- Body
-
-
- vdata
- Vue Data
- Vue Component Data
-
-
- data() {
-
- return {
- ${1:key}: ${2:value}
- }
},
-
- vmethod
- Vue Methods
- vue method
-
-
- methods: {
-
- ${1:name}() {
- ${0}
- }
},
-
- vcomputed
- Vue Computed
- computed value
-
-
- computed: {
-
- ${1:name}() {
- return this.${2:data} ${0}
- }
},
-
- vbeforecreate
- Vue Lifecycle beforeCreate
- beforeCreate lifecycle method
-
-
- beforeCreate () {
-
- ${0};
},
-
- vcreated
- Vue Lifecycle created
- created lifecycle method
-
-
- created () {
-
- ${0};
},
-
- vbeforemount
- Vue Lifecycle beforeMount
- beforeMount lifecycle method
-
-
- beforeMount () {
-
- ${0};
},
-
- vmounted
- Vue Lifecycle mounted
- mounted lifecycle method
-
-
- mounted () {
-
- ${0};
},
-
- vbeforeupdate
- Vue Lifecycle beforeUpdate
- beforeUpdate lifecycle method
-
-
- beforeUpdate () {
-
- ${0};
},
-
- vupdated
- Vue Lifecycle updated
- updated lifecycle method
-
-
- updated () {
-
- ${0};
},
-
- vbeforedestroy
- Vue Lifecycle beforeDestroy
- beforeDestroy lifecycle method
-
-
- beforeDestroy () {
-
- ${0};
},
-
- vdestroyed
- Vue Lifecycle destroyed
- destroyed lifecycle method
-
-
- destroyed () {
-
- ${0};
},
-
- vwatcher
- Vue Watchers
- vue watcher
-
-
- watch: {
-
- ${1:data}(${2:newValue}, ${3:oldValue}) {
- ${0}
- }
},
-
- vwatcher-options
- Vue Watchers with Options
- vue watcher with options
-
-
- watch: {
-
- ${1:data}: {
- immediate: ${2:true},
- deep: ${3:true},
- handler(${4:newValue}, ${5:oldValue}) {
- ${0}
- }
- }
},
-
- vprops
- Vue Props with Default
- Vue Props with Default
-
-
- props: {
-
- ${1:propName}: {
- type: ${2:Number},
- default: ${0}
- },
},
-
- vimport
- Vue Import File
- Import one component into another
-
-
- import ${1:New} from '@/components/${1:New}.vue';
-
-
- vcomponents
- Vue Import into the Component
-
- Import one component into another, within export statement
-
-
-
- components: {
-
- ${1:New},
},
-
- vimport-export
- Vue Import Export
- import a component and include it in export default
-
-
- import ${1:Name} from '@/components/${1:Name}.vue';
-
export
- default {
- components: {
- ${1:Name}
- },
};
-
- vimport-dynamic
- Vue Import Component Dynamically
- Import component that should be lazy loaded
-
-
- ${1:New} = () => import('@/components/${1:New}.vue')
-
-
- vmapstate
- Vue MapState
- map getters inside a vue component
-
-
- import { mapState } from 'vuex';
-
export default
- {
- computed: {
- ...mapState([
- ${1:'nameOfState'},
- ])
- },
};
-
- vmapgetters
- Vue MapGetters
- mapgetters inside a vue component
-
-
- import { mapGetters } from 'vuex';
-
export default
- {
- computed: {
- ...mapGetters([
- ${1:'nameOfGetter'},
- ])
- },
};
-
- vmapmutations
- Vue MapMutations
- mapmutations inside a vue component
-
-
- import { mapMutations } from 'vuex';
-
export
- default {
- methods: {
- ...mapMutations([
- ${1:'nameOfMutation'}, //also supports payload
- `this.nameOfMutation(amount)`
- ])
- },
};
-
- vmapactions
- Vue MapActions
- mapactions inside a vue component
-
-
- import { mapActions } from 'vuex';
-
export default
- {
- methods: {
- ...mapActions([
- ${1:'nameOfAction'}, //also supports payload
- `this.nameOfAction(amount)`
- ])
- },
};
-
- vfilter
- Vue Filter
- vue filter
-
-
- filters: {
-
- ${1:fnName}: function(${2:value}) {
- return ${2:value}${0};
- }
}
-
- vmixin
- Vue Mixin
- vue mixin
-
-
- const ${1:mixinName} = {
-
- mounted() {
- console.log('hello from mixin!');
- },
};
-
- vmixin-use
- Vue Use Mixin
- vue use mixin
-
-
- mixins: [${1:mixinName}],
-
-
- vc-direct
- Vue Custom Directive
- vue custom directive
-
-
- Vue.directive('${1:directiveName}', {
-
- bind(el, binding, vnode) {
- el.style.${2:arg} = binding.value.${2:arg};
- }
});
-
- vimport-lib
- Vue Import Library
- import a library
-
-
- import { ${1:libName} } from '${1:libName}';
-
-
- vimport-gsap
- Vue Import GSAP
- import gsap library
-
-
- import gsap from 'gsap';
-
-
- vanimhook-js
- Vue Transition Methods with JavaScript Hooks
- transition component js hooks
-
-
- beforeEnter(el) {
-
- console.log('beforeEnter');
},
enter(el, done) {
- console.log('enter');
- done();
},
beforeLeave(el) {
- console.log('beforeLeave');
},
leave(el, done) {
- console.log('leave');
- done();
},
-
- vcommit
- Vue Commit Vuex Store in Methods
- commit to vuex store in methods for mutation
-
-
- ${1:mutationName}() {
-
- this.\$store.commit('${1:mutationName}', ${2:payload});
}
-
- vdispatch
- Vue Dispatch Vuex Store in Methods
- dispatch to vuex store in methods for action
-
-
- ${1:actionName}() {
-
- this.\$store.dispatch('${1:actionName}', ${2:payload});
}
-
- vtest
- Unit Test
- unit test component
-
-
- import Vue from 'vue';
-
import ${1:HelloWorld} from
- './components/${1:HelloWorld}';
describe('${1:HelloWorld}.vue',
- () => {
- it('${2:should render correct contents}', () => {
- const Constructor = Vue.extend(${1:HelloWorld});
- const vm = new Constructor().$mount();
- expect(vm.$el.querySelector('.hello h1').textContent)
- .to.equal(${3:'Welcome to Your Vue.js App'});
- });
});
-
- vconfig
- Vue.config.js Import
- vue.config.js
-
-
- module.exports = {
-
- css: {
- loaderOptions: {
- ${1:sass}: {
- data: `${2:@import '@/styles/_variables.scss';}`
- }
- }
- }
}
-
- v3reactive
- Vue Composition API - Reactive
- Vue Composition api - reactive
-
-
- const ${1:name} = reactive({
-
- ${2:count}: ${3:0}
})
-
- v3computed
- Vue Composition API - Computed
- Vue Composition api - computed
-
-
- const ${1:name} = computed(() => {
-
- return ${2}
})
-
- v3watch
- Vue Composition API - watch - single source
- Vue Composition api - watcher single source
-
-
- watch(() => ${1:foo}, (newValue, oldValue) => {
-
- ${2}
})
-
- v3watch-array
- Vue Composition API - watch - array
- Vue Composition api - watch as array
-
-
- watch([${1:foo}, ${2:bar}], ([new${1}, new${2}], [prev${1},
- prev${2}]) => {
-
- ${3}
})
-
- v3watcheffect
- Vue Composition API - watchEffect
- Vue Composition api - watchEffect
-
-
- watchEffect(() => {
-
- ${1}
})
-
- v3ref
- Vue Composition API - Vue ref
- Vue Ref
-
-
- const ${1:name} = ref(${2:initialValue})
-
-
- v3onmounted
- Vue Lifecycle Hooks - onMounted
- Vue Mounted Lifecycle hook
-
-
- onMounted(() => {${1}})
-
-
- v3onbeforemount
- Vue Lifecycle Hooks - onBeforeMount
- Vue onBeforeMount Lifecycle hook
-
-
- onBeforeMount(() => {${1}})
-
-
- v3onbeforeupdate
- Vue Lifecycle Hooks - onBeforeUpdate
- Vue onBeforeUpdate Lifecycle hook
-
-
- onBeforeUpdate(() => {${1}})
-
-
- v3onupdated
- Vue Lifecycle Hooks - onUpdated
- Vue onUpdated Lifecycle hook
-
-
- onUpdated(() => {${1}})
-
-
- v3onerrorcaptured
- Vue Lifecycle Hooks - onErrorCaptured
- Vue onErrorCaptured Lifecycle hook
-
-
- onErrorCaptured(() => {${1}})
-
-
- v3onunmounted
- Vue Lifecycle Hooks - onUnmounted
- (destroyed) Vue onUnmounted Lifecycle hook
-
-
- onUnmounted(() => {${1}})
-
-
- v3onbeforeunmount
- Vue Lifecycle Hooks - onBeforeUnmount
- (beforeDestroy) Vue onBeforeUnmount Lifecycle hook
-
-
- onBeforeUnmount(() => {${1}})
-
-
- vplugin
- Plugin import
- Import a plugin to main.js or plugins file
-
-
- import Vue from 'vue'
-
import ${1:VueCompositionApi} from
- '${2:@vue/composition-api}'
Vue.use(${1:VueCompositionApi})
-
- v3reactive-setup
- Vue Composition API Reactive Script
- Vue Composition API Script with Reactive
-
-
- import { reactive, toRefs } from '@vue/composition-api'
-
export
- default {
- setup () {
- const state = reactive({
- ${0:count}: ${1:0},
- })
-
- return {
- ...toRefs(state),
- }
- }
}
-
-
- v3useinoptions
- Use Composition API within Options API
- Use Composition API within Options API
-
-
- import { ${0:component} } from
- '@/composables/${0:component}.js'
-
export default
- {
- setup () {
- const { ${1:name} } = ${0:component}()
-
- return {
- ${1:name}
- }
- }
}
-
- vue-script-vuex.json
-
-
-
-
-
-
-
-
-
-
-
-
- Prefix
- Name
- Description
- Body
-
-
- vstore
- Vuex Store
- Base for Vuex store
-
-
- import Vue from 'vue';
-
import Vuex from 'vuex';
Vue.use(Vuex);
export
- const store = new Vuex.Store({
- state: {
- ${1:key}: ${2:value}
- }
});
-
- vgetter
- Vuex Getters
- vuex getter
-
-
- getters: {
-
- ${1:value}: state => {
- return state.${1:value};
- }
}
-
- vmutation
- Vuex Mutation
- vuex mutation
-
-
- mutations: {
-
- ${1:updateValue}(state, ${3:payload}) {
- state.${2:value} = ${3:payload};
- }
}
-
- vaction
- Vuex Action
- vuex action
-
-
- actions: {
-
- ${1:updateValue}({commit}, ${2:payload}) {
- commit('${1:updateValue}', ${2:payload});
- }
}
-
- vstore-import
- Vue Import Vuex Store
- import vuex store into main.js
-
-
- import { store } from './store/index';
-
-
- vmodule
- Vuex Module
- vuex module
-
-
- export default {
-
- state: {
- value: 'my value'
- },
- getters: {
- value: state => {
- return state.value;
- }
- },
- mutations: {
- updateValue(state, payload) {
- state.value = payload;
- }
- },
- actions: {
- updateValue({commit}, payload) {
- commit('updateValue', payload);
- }
- }
};
-
-
- vstore2
- Vuex Store 2
- vuex store 2
-
-
- export const state = () => ({
-
- value: 'myvalue'
})
export const getters =
- {
- getterValue: state => {
- return state.value
- }
}
export const mutations = {
- updateValue: (state, payload) => {
- state.value = payload
- }
}
export const actions = {
- updateActionValue({ commit }) {
- commit('updateValue', payload)
- }
}
-
- vue-script-router.json
-
-
-
-
-
-
-
-
-
-
-
-
- Prefix
- Name
- Description
- Body
-
-
- vrouter
- Vue Router
- Base for Vue Router
-
-
- import Vue from 'vue';
-
import VueRouter from
- 'vue-router';
Vue.use(VueRouter);
export
- const router = new VueRouter({
- base: '/',
- mode: 'history',
- routes: [
- { path: '/path', component: component }
- ]
});
-
- vscrollbehavior
- Vue Router scrollBehavior
- Vue Router scrollBehavior
-
-
- scrollBehavior(to, from, savedPosition) {
-
- if(savedPosition) {
- return savedPosition;
- } else {
- return { x: 0, y: 0 };
- }
},
-
- vbeforeeach
- Vue Router beforeEach
- Vue Router global guards beforeEach
-
-
- router.beforeEach((to, from, next) => {
-
- ${1:next();}
});
-
- vbeforeresolve
- Vue Router beforeResolve
- Vue Router global guards beforeResolve
-
-
- router.beforeResolve((to, from, next) => {
-
- ${1:next();}
});
-
- vaftereach
- Vue Router afterEach
- Vue Router global guards afterEach
-
-
- router.afterEach((to, from) => {
-
-
});
-
- vbeforeenter
- Vue Router beforeEnter
- Vue Router per-route guard beforeEnter
-
-
- beforeEnter(to, from, next) {
-
- ${1:next();}
},
-
- vbeforerouteenter
- Vue Router beforeRouteEnter
- Vue Router component guards beforeRouteEnter
-
-
- beforeRouteEnter(to, from, next) {
-
- next(vm => {${1:}});
},
-
- vbeforerouteupdate
- Vue Router beforeRouteUpdate
- Vue Router component guards beforeRouteUpdate
-
-
- beforeRouteUpdate(to, from, next) {
-
- ${1:next();}
},
-
- vbeforerouteleave
- Vue Router beforeRouteLeave
- Vue Router component guards beforeRouteLeave
-
-
- beforeRouteLeave(to, from, next) {
-
- ${1:next();}
},
-
-
- vroute-named
- Vue Router Route
- Vue Router route with per route code-splitting
-
-
- {
-
- path: '${1:pathName}',
- name: '${2:routeName}',
- component: () => import('./${3:pathToComponent}'),
},
-
- nuxt-config.json
-
-
-
-
-
-
-
-
-
-
-
-
- Prefix
- Name
- Description
- Body
-
-
- nfont
- Nuxt Font
- link to include fonts in a nuxt project, in nuxt-config
-
-
- { rel: 'stylesheet', href:
- '${1:https://fonts.googleapis.com/css?family=Montserrat:600|Rufina:700}'
- }
-
-
-
- ncss
- Nuxt Use CSS File
- link to css assets such as normalize
-
-
- css: ['assets/${1:normalize.css}'],
-
-
- nuxt-script.json
-
-
-
-
-
-
-
-
-
-
-
-
- Prefix
- Name
- Description
- Body
-
-
- nasyncdata
- Nuxt Async
- Nuxt asyncData
-
-
- async asyncData ({ ${1:params} }) {
-
- const { data } = await fetch(`${2:endpoint}`).then(res =>
- res.json())
- return { ${3:key}:${4:value} }
},
-
- nfetch
- Nuxt Fetch
- Nuxt Fetch
-
-
- async fetch ({ store, ${1:params} }) {
-
- let { data } = await fetch('${2:endpoint}').then(res =>
- res.json())
- store.commit('${3:MUTATION_TYPE}', data)
},
-
- nparam
- Nuxt Route Params
- Nuxt Route Params
-
-
- this.$route.params.${1:id}
-
-
-
- nhead
- Nuxt Head
- Nuxt Head
-
-
- head () {
-
- return {
- title: ${1:'Page Title'},
- meta: [
- // hid is used as unique identifier. Do not use `vmid` for it
- as it will not work
- { hid: 'description', name: 'description', content: ${2:'My
- custom description'} }
- ]
- }
},JavaScript (ES6) code snippets
-
-
- snippets.json
-
-
-
-
-
-
-
-
-
-
-
-
- Prefix
- Name
- Description
- Body
-
-
- imp
- import
- Imports entire module statement in ES6 syntax
-
-
- import ${2:moduleName} from '${1:module}';$0
-
-
- imn
- importNoModuleName
- Imports entire module in ES6 syntax without module name
-
-
- import '${1:module}';$0
-
-
- imd
- importDestructing
- Imports only a portion of the module in ES6 syntax
-
-
- import { $2 } from '${1:module}';$0
-
-
- ime
- importEverything
- Imports everything as alias from the module in ES6 syntax
-
-
- import * as ${2:alias} from '${1:module}';$0
-
-
- ima
- importAs
-
- Imports a specific portion of the module by assigning a local
- alias in ES6 syntax
-
-
-
- import { ${2:originalName} as ${3:alias} } from
- '${1:module}';$0
-
-
- rqr
- require
- Require a package
-
-
- require('${1:package}');
-
-
- req
- requireToConst
- Require a package to const
-
-
- const ${1:packageName} = require('${1:package}');$0
-
-
- mde
- moduleExports
- Module exports from Common JS, node syntax at ES6
-
-
- module.exports = { $0 };
-
-
- env
- exportNamedVariable
- Export named variable in ES6 syntax
-
-
- export const ${1:exportVariable} = ${2:localVariable};
-
-
- enf
- exportNamedFunction
- Export named function in ES6 syntax
-
-
- export const ${1:functionName} = (${2:params}) => { $0 };
-
-
-
- edf
- exportDefaultFunction
- Export default function in ES6 syntax
-
-
- export default function ${1:${TM_FILENAME_BASE}}(${2:params})
- { $0 };
-
-
- ecl
- exportClass
- Export default class in ES6 syntax
-
-
- export default class ${1:className} { $0 };
-
-
- ece
- exportClassExtends
-
- Export default class which extends a base one in ES6 syntax
-
-
-
- export default class ${1:className} extends
- ${2:baseclassName} { $0 };
-
-
- con
- constructor
- Add default constructor in a class in ES6 syntax
-
-
- constructor(${1:params}) { ${0} }
-
-
- met
- method
- Creates a method inside a class in ES6 syntax
-
-
- ${1:methodName}(${2:params}) { ${0} }
-
-
- pge
- propertyGet
- Creates a getter property inside a class in ES6 syntax
-
-
- get ${1:propertyName}() { return this.${0}; }
-
-
- pse
- propertyset
- Creates a setter property inside a class in ES6 syntax
-
-
- set ${1:propertyName}(${2:value}) { ${0}; }
-
-
- fre
- forEach
- Creates a forEach statement in ES6 syntax
-
-
- ${1:array}.forEach(${2:currentItem} => { ${0} });
-
-
- fof
- forOf
- Iterating over property names of iterable objects
-
-
- for (const ${1:item} of ${2:object}) { ${0} }
-
-
- fin
- forIn
- Iterating over property values of iterable objects
-
-
- for (const ${1:item} in ${2:object}) { ${0} }
-
-
- anfn
- anonymousFunction
- Creates an anonymous function in ES6 syntax
-
-
- (${1:params}) => { ${2} }
-
-
- nfn
- namedFunction
- Creates a named function in ES6 syntax
-
-
- const ${1:name} = (${2:params}) => { ${3} }
-
-
- dob
- destructingObject
-
- Creates and assigns a local variable using object destructing
-
-
-
- const {${2:propertyName}} = ${1:objectToDestruct};
-
-
- dar
- destructingArray
-
- Creates and assigns a local variable using array destructing
-
-
-
- const [${2:propertyName}] = ${1:arrayToDestruct};
-
-
- sti
- setInterval
-
- Executes the given function at specified intervals in ES6 syntax
-
-
-
- setInterval(() => { ${2} }, ${0:intervalInms});
-
-
- sto
- setTimeOut
-
- Executes the given function after the specified delay in ES6
- syntax
-
-
-
- setTimeout(() => { ${2} }, ${1:delayInms});
-
-
- prom
- promise
-
- Creates and returns a new Promise in the standard ES6 syntax
-
-
-
- return new Promise((resolve, reject) => { ${1} });
-
-
- thenc
- thenCatch
- Add the .then and .catch methods to handle promises
-
-
- .then((${1:result}) => { ${2} }).catch((${3:err}) => {
- ${4} });
-
-
- cas
- consoleAssert
-
- If the specified expression is false, the message is written to
- the console along with a stack trace
-
-
-
- console.assert(${1:expression}, ${2:object});
-
-
- ccl
- consoleClear
- Clears the console
-
-
- console.clear();
-
-
- cco
- consoleCount
-
- Writes the the number of times that count() has been invoked at
- the same line and with the same label
-
-
-
- console.count(${1:label});
-
-
- cdb
- consoleDebug
-
- Displays a message in the console. Also display a blue right
- arrow icon along with the logged message in Safari
-
-
-
- console.debug(${1:object});
-
-
- cdi
- consoleDir
-
- Prints a JavaScript representation of the specified object
-
-
-
- console.dir(${1:object});
-
-
- cer
- consoleError
-
- Displays a message in the console and also includes a stack
- trace from where the method was called
-
-
-
- console.error(${1:object});
-
-
- cgr
- consoleGroup
-
- Groups and indents all following output by an additional level,
- until console.groupEnd() is called.
-
-
-
- console.group('${1:label}');
-
-
- cge
- consoleGroupEnd
- Closes out the corresponding console.group().
-
-
- console.groupEnd();
-
-
- clg
- consoleLog
- Displays a message in the console
-
-
- console.log(${1:object});
-
-
- clo
- consoleLogObject
- Displays an object in the console with its name
-
-
- console.log('${1:object} :>> ', ${1:object});
-
-
- ctr
- consoleTrace
-
- Prints a stack trace from the point where the method was called
-
-
-
- console.trace(${1:object});
-
-
- cwa
- consoleWarn
-
- Displays a message in the console but also displays a yellow
- warning icon along with the logged message
-
-
-
- console.warn(${1:object});
-
-
- cin
- consoleInfo
-
- Displays a message in the console but also displays a blue
- information icon along with the logged message
-
-
-
- console.info(${1:object});
-
-
- clt
- consoleTable
- Displays tabular data as a table.
-
-
- console.table(${1:object});
-
-
- cti
- consoleTime
- Sets starting point for execution time measurement
-
-
- console.time(${1:object});
-
-
-
- cte
- consoleTimeEnd
- Sets end point for execution time measurement
-
-
- console.timeEnd(${1:object});
- VS Code Snippets
-
-
- Batchfile
-
-
-
-
-
-
-
-
-
-
- Prefix
- Name
- Description
- Body
-
-
- #region
- Region Start
- Folding Region Start
-
-
- ::#region
-
-
-
- #endregion
- Region End
- Folding Region End
-
-
- ::#endregion
-
-
- Coffeescript
-
-
-
-
-
-
-
-
-
-
- Prefix
- Name
- Description
- Body
-
-
- #region
- Region Start
- Folding Region Start
-
-
- #region
-
-
-
- #endregion
- Region End
- Folding Region End
-
-
- #endregion
-
-
- C
-
-
-
-
-
-
-
-
-
-
- Prefix
- Name
- Description
- Body
-
-
- #region
- Region Start
- Folding Region Start
-
-
- #pragma region $0
-
-
-
- #endregion
- Region End
- Folding Region End
-
-
- #pragma endregion
-
-
- CPP
-
-
-
-
-
-
-
-
-
-
- Prefix
- Name
- Description
- Body
-
-
- #region
- Region Start
- Folding Region Start
-
-
- #pragma region $0
-
-
-
- #endregion
- Region End
- Folding Region End
-
-
- #pragma endregion
-
-
- Csharp
-
-
-
-
-
-
-
-
-
-
- Prefix
- Name
- Description
- Body
-
-
- #region
- Region Start
- Folding Region Start
-
-
- #region $0
-
-
-
- #endregion
- Region End
- Folding Region End
-
-
- #endregion
-
-
- Fsharp
-
-
-
-
-
-
-
-
-
-
- Prefix
- Name
- Description
- Body
-
-
- #region
- Region Start
- Folding Region Start
-
-
- //#region $0
-
-
-
- #endregion
- Region End
- Folding Region End
-
-
- //#endregion
-
-
- Groovy
-
-
-
-
-
-
-
-
-
-
- Prefix
- Name
- Description
- Body
-
-
- replace
- replace(dir: …, includes: …, token: …, value: …)
- Replace(...)
-
-
- replace(dir:"${1:dirName}", includes:"${2:*.*}",
- token:"${3:tokenName}", value:"\${${4:value}}")$0
-
-
- doc
- Doc Block
- Doc block comment
-
-
- /**
-
- * $0
- */
-
- key
- key: "value" (Hash Pair)
-
-
-
- ${1:key}: ${2:"${3:value}"}
-
-
- thread
- Thread.start { … }
- Thread.start { ... }
-
-
- Thread.start {
-
- $0
}
-
- thread
- Thread.startDaemon { … }
- Thread.startDaemon { ... }
-
-
- Thread.startDaemon {
-
- $0
}
-
- case
- case … break
- case ... break
-
-
- case ${1:CASE_NAME}:
-
- $2
break$0
-
- instance
- instance … (Singleton)
- Singleton instance + Getter
-
-
- private static $1 instance
-
static $1
- getInstance(${2:args}) {
- if (!instance) instance = new $1(${2:args})
- return instance
}
-
- tc
- class … extends GroovyTestCase { … }
- GroovyTestCase class
-
-
- class $1 extends GroovyTestCase {
-
- $0
}
-
- copy
- copy(file: …, tofile: …)
- Copy file
-
-
- copy(file:"${1:sourceFile}", tofile:"${2:targetFile}")
-
-
- copy
- copy(todir: …) { fileset(dir: …) { include … exclude }
- Copy fileset todir w/ include/exclude
-
-
- copy(todir:"${1:targetDir}") {
-
- fileset(dir:"${2:sourceDir}") {
- include(name:"${3:includeName}")
- exclude(name:"${4:excludeName}")
- }
}
-
- copy
- copy(todir: …) { fileset:dir …) }
- Copy fileset todir
-
-
- copy(todir:"${1:targetDir}") {
-
- fileset(dir:"${2:sourceDir}")
}
-
- cv
- closure = { … }
- Closure block
-
-
- def ${1:closureName} = { ${2:args} ->
-
- $0
}
-
- forin
- for(… in …) { … }
- For-loop
-
-
- for (${1:element} in ${2:collection}) {
-
- $0
}
-
- mkdir
- mkdir(dir: …)
- mkdir
-
-
- mkdir(dir:"${1:dirName}")
-
-
- p
- print
- print
-
-
- print $0
-
-
- pl
- println
- println
-
-
- println $0
-
-
- runa
- runAfter() { … }
- runAfter() { ... }
-
-
- runAfter(${1:delay}) {
-
- $0
}
-
- setup
- setUp() { … }
- setup() { ... }
-
-
- void setUp() {
-
- $0
}
-
- sleep
- sleep(secs) { … // on interrupt do }
- sleep with interrupt
-
-
- sleep(${1:secs}) {
-
- ${2:// on interrupt do}
}
-
- sleep
- sleep(secs)
- sleep
-
-
- sleep(${1:secs})
-
-
- sort
- sort { … }
- sort
-
-
- sort {
-
- $0
}
-
- main
- static main() { … }
- main method
-
-
- static main(args) {
-
- $0
}
-
- switch
- switch … case
- Switch-Case block
-
-
- switch(${1:value}) {
-
- case ${2:CASE}:
- $3
- break$0
}
-
- switch
- switch … case … default
- Switch-Case-Default block
-
-
- switch(${1:value}) {
-
- case ${3:CASE}:
- $4
- break$0
- default:
- $2
- break
}
-
- tear
- tearDown() { … }
- tearDown() { ... }
-
-
- void tearDown() {
-
- $0
}
-
- t
- test()
- test method
-
-
- void test$1() {
-
- $0
}
-
-
- v
- var
- var
-
-
- ${1:def} ${2:var}${3: = ${0:null}}
-
-
- Java
-
-
-
-
-
-
-
-
-
-
- Prefix
- Name
- Description
- Body
-
-
- #region
- Region Start
- Folding Region Start
-
-
- //#region
-
-
-
- #endregion
- Region End
- Folding Region End
-
-
- //#endregion
-
-
- Javascript
-
-
-
-
-
-
-
-
-
-
- Prefix
- Name
- Description
- Body
-
-
- define
- define module
- define module
-
-
- define([
-
- 'require',
- '${1:dependency}'
], function(require, ${2:factory}) {
- 'use strict';
- $0
});
-
- for
- For Loop
- For Loop
-
-
- for (let ${1:index} = 0; ${1:index} < ${2:array}.length;
- ${1:index}++) {
-
- const ${3:element} = ${2:array}[${1:index}];
- $0
}
-
- foreach
- For-Each Loop
- For-Each Loop
-
-
- ${1:array}.forEach(${2:element} => {
-
- $0
});
-
- forin
- For-In Loop
- For-In Loop
-
-
- for (const ${1:key} in ${2:object}) {
-
- if (${2:object}.hasOwnProperty(${1:key})) {
- const ${3:element} = ${2:object}[${1:key}];
- $0
- }
}
-
- forof
- For-Of Loop
- For-Of Loop
-
-
- for (const ${1:iterator} of ${2:object}) {
-
- $0
}
-
- function
- Function Statement
- Function Statement
-
-
- function ${1:name}(${2:params}) {
-
- $0
}
-
- if
- If Statement
- If Statement
-
-
- if (${1:condition}) {
-
- $0
}
-
- ifelse
- If-Else Statement
- If-Else Statement
-
-
- if (${1:condition}) {
-
- $0
} else {
-
}
-
- new
- New Statement
- New Statement
-
-
- const ${1:name} = new ${2:type}(${3:arguments});$0
-
-
- switch
- Switch Statement
- Switch Statement
-
-
- switch (${1:key}) {
-
- case ${2:value}:
- $0
- break;
- default:
- break;
}
-
- while
- While Statement
- While Statement
-
-
- while (${1:condition}) {
-
- $0
}
-
- dowhile
- Do-While Statement
- Do-While Statement
-
-
- do {
-
- $0
} while (${1:condition});
-
- trycatch
- Try-Catch Statement
- Try-Catch Statement
-
-
- try {
-
- $0
} catch (${1:error}) {
-
}
-
- settimeout
- Set Timeout Function
- Set Timeout Function
-
-
- setTimeout(() => {
-
- $0
}, ${1:timeout});
-
- setinterval
- Set Interval Function
- Set Interval Function
-
-
- setInterval(() => {
-
- $0
}, ${1:interval});
-
- import statement
- Import external module.
- Import external module.
-
-
- import { $0 } from "${1:module}";
-
-
- #region
- Region Start
- Folding Region Start
-
-
- //#region $0
-
-
- #endregion
- Region End
- Folding Region End
-
-
- //#endregion
-
-
- log
- Log to the console
- Log to the console
-
-
- console.log($1);
-
-
- warn
- Log warning to console
- Log warning to the console
-
-
- console.warn($1);
-
-
-
- error
- Log error to console
- Log error to the console
-
-
- console.error($1);
-
-
- Markdown
-
-
-
-
-
-
-
-
-
-
- Prefix
- Name
- Description
- Body
-
-
- bold
- Insert bold text
- Insert bold text
-
-
- **${1:${TM_SELECTED_TEXT}}**$0
-
-
- italic
- Insert italic text
- Insert italic text
-
-
- *${1:${TM_SELECTED_TEXT}}*$0
-
-
- quote
- Insert quoted text
- Insert quoted text
-
-
- > ${1:${TM_SELECTED_TEXT}}
-
-
- code
- Insert inline code
- Insert inline code
-
-
- `${1:${TM_SELECTED_TEXT}}`$0
-
-
- fenced codeblock
- Insert fenced code block
- Insert fenced code block
-
-
- ```${1:language}
-
${TM_SELECTED_TEXT}$0
```
-
- heading1
- Insert heading level 1
- Insert heading level 1
-
-
- # ${1:${TM_SELECTED_TEXT}}
-
-
- heading2
- Insert heading level 2
- Insert heading level 2
-
-
- ## ${1:${TM_SELECTED_TEXT}}
-
-
- heading3
- Insert heading level 3
- Insert heading level 3
-
-
- ### ${1:${TM_SELECTED_TEXT}}
-
-
- heading4
- Insert heading level 4
- Insert heading level 4
-
-
- #### ${1:${TM_SELECTED_TEXT}}
-
-
- heading5
- Insert heading level 5
- Insert heading level 5
-
-
- ##### ${1:${TM_SELECTED_TEXT}}
-
-
- heading6
- Insert heading level 6
- Insert heading level 6
-
-
- ###### ${1:${TM_SELECTED_TEXT}}
-
-
- unordered list
- Insert unordered list
- Insert unordered list
-
-
- - ${1:first}
-
- ${2:second}
- ${3:third}
$0
-
- ordered list
- Insert ordered list
- Insert ordered list
-
-
- 1. ${1:first}
-
2. ${2:second}
3. ${3:third}
$0
-
- horizontal rule
- Insert horizontal rule
- Insert horizontal rule
-
-
- ----------
-
-
- link
- Insert link
- Insert link
-
-
- [${TM_SELECTED_TEXT:${1:text}}](https://${2:link})$0
-
-
- image
- Insert image
- Insert image
-
-
- $0
-
-
-
- strikethrough
- Insert strikethrough
- Insert strikethrough
-
-
- ~~${1:${TM_SELECTED_TEXT}}~~
-
-
- PHP
-
-
-
-
-
-
-
-
-
-
- Prefix
- Name
- Description
- Body
-
-
- class
- class …
- Class definition
-
-
- class ${1:ClassName} ${2:extends ${3:AnotherClass}}
- ${4:implements ${5:Interface}}
-
{
- $0
}
-
- doc_class
- PHPDoc class …
- Documented Class Declaration
-
-
- /**
-
- * ${6:undocumented class}
- */
class ${1:ClassName} ${2:extends ${3:AnotherClass}}
- ${4:implements ${5:Interface}}
{
- $0
}
-
- con
- function __construct
-
-
-
- ${1:public} function __construct(${2:${3:Type} $${4:var}${5:
- = ${6:null}}}) {
-
- \$this->${4:var} = $${4:var};$0
}
-
- doc_v
- PHPDoc property
- Documented Class Variable
-
-
- /** @var ${1:Type} $${2:var} ${3:description} */
-
${4:protected}
- $${2:var}${5: = ${6:null}};$0
-
- doc_f
- PHPDoc function …
- Documented function
-
-
- /**
-
- * ${1:undocumented function summary}
- *
- * ${2:Undocumented function long description}
- *
${3: * @param ${4:Type} $${5:var} ${6:Description}}
${7:
- * @return ${8:type}}
${9: * @throws ${10:conditon}}
- **/
${11:public }function
- ${12:FunctionName}(${13:${14:${4:Type} }$${5:var}${15: =
- ${16:null}}})
{
- ${0:# code...}
}
-
- param
- PHPDoc param …
- Paramater documentation
-
-
- * @param ${1:Type} ${2:var} ${3:Description}$0
-
-
- fun
- function …
- Function
-
-
- ${1:public }function ${2:FunctionName}(${3:${4:${5:Type}
- }$${6:var}${7: = ${8:null}}})
-
{
- ${0:# code...}
}
-
- trait
- trait …
- Trait
-
-
- /**
-
- * $1
- */
trait ${2:TraitName}
{
- $0
}
-
- def
- define(…, …)
- Definition
-
-
- define('$1', ${2:'$3'});
-
$0
-
- do
- do … while …
- Do-While loop
-
-
- do {
-
- ${0:# code...}
} while (${1:$${2:a} <= ${3:10}});
-
- while
- while …
- While-loop
-
-
- while (${1:$${2:a} <= ${3:10}}) {
-
- ${0:# code...}
}
-
- if
- if …
- If block
-
-
- if (${1:condition}) {
-
- ${0:# code...}
}
-
- ifelse
- if … else …
- If Else block
-
-
- if (${1:condition}) {
-
- ${2:# code...}
} else {
- ${3:# code...}
}
$0
-
- if?
- $… = ( … ) ? … : …
- Ternary conditional assignment
-
-
- $${1:retVal} = (${2:condition}) ? ${3:a} : ${4:b} ;
-
-
- else
- else …
- Else block
-
-
- else {
-
- ${0:# code...}
}
-
- elseif
- elseif …
- Elseif block
-
-
- elseif (${1:condition}) {
-
- ${0:# code...}
}
-
- for
- for …
- For-loop
-
-
- for ($${1:i}=${2:0}; $${1:i} < $3; $${1:i}++) {
-
- ${0:# code...}
}
-
- foreach
- foreach …
- Foreach loop
-
-
- foreach ($${1:variable} as $${2:key} ${3:=> $${4:value}})
- {
-
- ${0:# code...}
}
-
- array
- $… = array (…)
- Array initializer
-
-
- $${1:arrayName} = array('$2' => $3${4:,} $0);
-
-
- shorray
- $… = […]
- Array initializer
-
-
- $${1:arrayName} = ['$2' => $3${4:,} $0];
-
-
- keyval
- … => …
- Key-Value initializer
-
-
- '$1' => $2${3:,} $0
-
-
- switch
- switch …
- Switch block
-
-
- switch (\$${1:variable}) {
-
- case '${2:value}':
- ${3:# code...}
- break;
- $0
- default:
- ${4:# code...}
- break;
}
-
- case
- case …
- Case Block
-
-
- case '${1:value}':
-
- ${0:# code...}
- break;
-
- this
- $this->…
- $this->...
-
-
- \$this->$0;
-
-
- ethis
- echo $this->…
- Echo this
-
-
- echo \$this->$0;
-
-
- throw
- Throw Exception
- Throw exception
-
-
- throw new $1Exception(${2:"${3:Error Processing
- Request}"}${4:, ${5:1}});
-
$0
-
- #region
- Region Start
- Folding Region Start
-
-
- #region
-
-
- #endregion
- Region End
- Folding Region End
-
-
- #endregion
-
-
-
- try
- Try Catch Block
- Try catch block
-
-
- try {
-
- ${1://code...}
} catch (${2:\Throwable} ${3:\$th}) {
- ${4://throw \$th;}
}
-
- Powershell
-
-
-
-
-
-
-
-
-
-
- Prefix
- Name
- Description
- Body
-
-
- #region
- Region Start
- Folding Region Start
-
-
- #region $0
-
-
-
- #endregion
- Region End
- Folding Region End
-
-
- #endregion
-
-
- Swift
-
-
-
-
-
-
-
-
-
-
- Prefix
- Name
- Description
- Body
-
-
- print
- print
- print("...")
-
-
- print("$1") $0
-
-
- printv
- print value
- print("\(...)")
-
-
- print("\($1)") $0
-
-
- while
- while
- while statement
-
-
- while ${1:condition} {
-
- $0
}
-
- repeat
- repeat-while
- repeat-while statement
-
-
- repeat {
-
- $0
} while ${1:condition}
-
- for
- for
- for-in statement
-
-
- for ${1:item} in ${2:collection} {
-
- $0
}
-
- if
- if
- if statement
-
-
- if ${1:condition} {
-
- $0
}
-
- elif
- else if
- else clause with a nested if statement
-
-
- else if ${1:condition} {
-
- $0
}
-
- else
- else
- else clause
-
-
- else {
-
- $0
}
-
- iflet
- if let
- if statement with optional binding
-
-
- if let ${1:value} = ${2:optional} {
-
- $0
}
-
- guard
- guard
- guard statement
-
-
- guard ${1:condition} else {
-
- $0
}
-
- guardlet
- guard let
- guard statement with optional binding
-
-
- guard let ${1:value} = ${2:optional} else {
-
- $0
}
-
- switch
- switch
- switch statement
-
-
- switch ${1:value} {
-
case ${2:pattern}:
- $0
default:
-
}
-
- do
- do
- do statement
-
-
- do {
-
- $0
} catch ${1:error} {
- $2
}
-
- func
- func
- function declaration
-
-
- func ${1:name}(${2:parameters}) -> ${3:Type} {
-
- $0
}
-
- struct
- struct
- struct declaration
-
-
- struct ${1:Name} {
-
- $0
}
-
- enum
- enum
- enum declaration
-
-
- enum ${1:Name} {
-
- case $0
}
-
- class
- class
- class declaration
-
-
- class ${1:Name} {
-
- $0
}
-
- protocol
- protocol
- protocol declaration
-
-
- protocol ${1:Name} {
-
- $0
}
-
-
- extension
- extension
- extension declaration
-
-
- extension ${1:Type} {
-
- $0
}
-
- Typescript
-
-
-
-
-
-
-
-
-
-
- Prefix
- Name
- Description
- Body
-
-
- ctor
- Constructor
- Constructor
-
-
- /**
-
- *
- */
constructor() {
- super();
- $0
}
-
- class
- Class Definition
- Class Definition
-
-
- class ${1:name} {
-
- constructor(${2:parameters}) {
- $0
- }
}
-
- public method
- Public Method Definition
- Public Method Definition
-
-
- /**
-
- * ${1:name}
- */
public ${1:name}() {
- $0
}
-
- private method
- Private Method Definition
- Private Method Definition
-
-
- private ${1:name}() {
-
- $0
}
-
- import statement
- Import external module.
- Import external module.
-
-
- import { $0 } from "${1:module}";
-
-
- get
- Property getter
- Property getter
-
-
-
public get ${1:value}() : ${2:string} {
- ${3:return $0}
}
-
- log
- Log to the console
- Log to the console
-
-
- console.log($1);
-
$0
-
- warn
- Log warning to console
- Log warning to the console
-
-
- console.warn($1);
-
$0
-
- error
- Log error to console
- Log error to the console
-
-
- console.error($1);
-
$0
-
- prop
- Define a full property
- Define a full property
-
-
-
private _${1:value} : ${2:string};
public get
- ${1:value}() : ${2:string} {
- return this._${1:value};
}
public set ${1:value}(v :
- ${2:string}) {
- this._${1:value} = v;
}
-
- ref
- Triple-slash reference
- Triple-slash reference
-
-
- /// <reference path="$1" />
-
$0
-
- set
- Property setter
- Property setter
-
-
-
public set ${1:value}(v : ${2:string}) {
- this.$3 = v;
}
-
- throw
- Throw Exception
- Throw Exception
-
-
- throw new Error("$1");
-
$0
-
- for
- For Loop
- For Loop
-
-
- for (let ${1:index} = 0; ${1:index} < ${2:array}.length;
- ${1:index}++) {
-
- const ${3:element} = ${2:array}[${1:index}];
- $0
}
-
- foreach =>
- For-Each Loop using =>
- For-Each Loop using =>
-
-
- ${1:array}.forEach(${2:element} => {
-
- $0
});
-
- forin
- For-In Loop
- For-In Loop
-
-
- for (const ${1:key} in ${2:object}) {
-
- if (Object.prototype.hasOwnProperty.call(${2:object},
- ${1:key})) {
- const ${3:element} = ${2:object}[${1:key}];
- $0
- }
}
-
- forof
- For-Of Loop
- For-Of Loop
-
-
- for (const ${1:iterator} of ${2:object}) {
-
- $0
}
-
- forawaitof
- For-Await-Of Loop
- For-Await-Of Loop
-
-
- for await (const ${1:iterator} of ${2:object}) {
-
- $0
}
-
- function
- Function Statement
- Function Statement
-
-
- function ${1:name}(${2:params}:${3:type}) {
-
- $0
}
-
- if
- If Statement
- If Statement
-
-
- if (${1:condition}) {
-
- $0
}
-
- ifelse
- If-Else Statement
- If-Else Statement
-
-
- if (${1:condition}) {
-
- $0
} else {
-
}
-
- new
- New Statement
- New Statement
-
-
- const ${1:name} = new ${2:type}(${3:arguments});$0
-
-
- switch
- Switch Statement
- Switch Statement
-
-
- switch (${1:key}) {
-
- case ${2:value}:
- $0
- break;
- default:
- break;
}
-
- while
- While Statement
- While Statement
-
-
- while (${1:condition}) {
-
- $0
}
-
- dowhile
- Do-While Statement
- Do-While Statement
-
-
- do {
-
- $0
} while (${1:condition});
-
- trycatch
- Try-Catch Statement
- Try-Catch Statement
-
-
- try {
-
- $0
} catch (${1:error}) {
-
}
-
- settimeout
- Set Timeout Function
- Set Timeout Function
-
-
- setTimeout(() => {
-
- $0
}, ${1:timeout});
-
- #region
- Region Start
- Folding Region Start
-
-
- //#region $0
-
-
- #endregion
- Region End
- Folding Region End
-
-
- //#endregion
-
-
- newpromise
- new Promise
- Create a new Promise
-
-
- new Promise<$1:type>((resolve, reject) => {
-
- $1
})
-
- async function
- Async Function Statement
- Async Function Statement
-
-
- async function ${1:name}(${2:params}:${3:type}) {
-
- $0
}
-
-
- async arrow function
- Async Function Expression
- Async Function Expression
-
-
- async (${1:params}:${2:type}) => {
-
- $0
}
-
- VB
-
-
-
-
-
-
-
-
-
-
- Prefix
- Name
- Description
- Body
-
-
- for
- For Next Loop
- For Next Loop
-
-
- For ${1:index} As ${2:ObjectType} = ${3:lower} To
- ${4:Upper}
-
- $0
Next ${1:index}
-
- fore
- For Each...Next
- For Each...Next
-
-
- For Each ${1:Variable} As ${2:ObjectType} In
- ${3:Collection}
-
- $0
Next
-
- fori
- For i...Next i
- For i...Next i
-
-
- For i As ${1:Integer} = ${2:Lower} To ${3:Upper}
-
- $0
Next i
-
- forj
- For j...Next j
- For j...Next j
-
-
- For j As ${1:Integer} = ${2:Lower} To ${3:Upper}
-
- $0
Next j
-
- pf
- Public Function...
- Public Function...
-
-
- Public Function ${1:FunctionName}(${2:ParameterList}) As
- ${3:ReturnType}
-
- Try
- $0
- Catch ex As Exception
- End Try
- Return ${3:ReturnValue}
End Function
-
- ps
- Public Sub ...
- Public Sub ...
-
-
- Public Sub ${1:ProcedureName}(${2:ParameterList})
-
- Try
- $0
- Catch ex As Exception
- End Try
End Sub
-
- while
- While ... End While
- While ... End While
-
-
- While ${1:Boolean}
-
- $0
End While
-
- #Region
- Region Start
- Folding Region Start
-
-
- #Region $0
-
-
-
- #End Region
- Region End
- Folding Region End
-
-
- #End Region
- Snippets Ranger
- Table of Contents
-
-
-
-
-
-
-
-
- User Snippets
-
-
- Markdown
-
-
-
-
-
-
-
-
- Prefix
- Name
- Description
- Body
-
-
- test
- test
-
-
-
- [
-
${CLIPBOARD/^(.+)$/'$1',/gm}
]
-
-
- up
- Upper the second mirrored tab stop
-
-
-
- ${1:title}
-
${1/(.*)/${1:/upcase}/}
${1/(.*)/${1:/upcase}/}
$0Extension Snippets
- markdownlint
-
-
- snippets.json
-
-
-
-
-
-
-
-
-
-
- Prefix
- Name
- Description
- Body
-
-
- markdownlint-disable
- insertMarkdownLintDisableComment
-
- Disables one or more rules by name (MD013), alias (line-length),
- or tag (whitespace). Multiple rules are space-delimited (MD018
- MD019). If no rules are specified, all rules are disabled. Takes
- effect starting with the line the comment is on.
-
-
-
- <!-- markdownlint-disable ${1:MD000 }-->
-
-
- markdownlint-enable
- insertMarkdownLintEnableComment
-
- Enables one or more rules by name (MD013), alias (line-length),
- or tag (whitespace). Multiple rules are space-delimited (MD018
- MD019). If no rules are specified, all rules are enabled. Takes
- effect starting with the line the comment is on.
-
-
-
- <!-- markdownlint-enable ${1:MD000 }-->
-
-
- markdownlint-disable-file
- insertMarkdownLintDisableFileComment
-
- Disables one or more rules by name (MD013), alias (line-length),
- or tag (whitespace). Multiple rules are space-delimited (MD018
- MD019). If no rules are specified, all rules are disabled.
- Applies to the entire file.
-
-
-
- <!-- markdownlint-disable-file ${1:MD000 }-->
-
-
- markdownlint-enable-file
- insertMarkdownLintEnableFileComment
-
- Enables one or more rules by name (MD013), alias (line-length),
- or tag (whitespace). Multiple rules are space-delimited (MD018
- MD019). If no rules are specified, all rules are enabled.
- Applies to the entire file.
-
-
-
- <!-- markdownlint-enable-file ${1:MD000 }-->
-
-
- markdownlint-capture
- insertMarkdownLintCaptureComment
-
- Captures the current rule configuration. Takes effect starting
- with the line the comment is on.
-
-
-
- <!-- markdownlint-capture -->
-
-
- markdownlint-restore
- insertMarkdownLintRestoreComment
-
- Restores the most recently captured rule configuration. Defaults
- to the document's initial configuration. Takes effect starting
- with the line the comment is on.
-
-
-
- <!-- markdownlint-restore -->
-
-
-
- markdownlint-configure-file
- insertMarkdownLintConfigureFileComment
-
- Configures one or more rules by name (MD013), alias
- (line-length), or tag (whitespace) using the same JSON format as
- the "markdownlint.config" object. Applies to the entire file.
-
-
-
- <!-- markdownlint-configure-file { ${1:"MD013": {
- "line_length": 100 \}} } -->
- Markdown Snippets
-
-
- snippets.code-snippets
-
-
-
-
-
-
-
-
-
-
- Prefix
- Name
- Description
- Body
-
-
- task
- Insert task list
- Insert task list
-
-
- - [${1| ,x|}] ${2:text}
-
${0}
-
- task2
- Insert task list 2
- Insert task list with 2 tasks
-
-
- - [${1| ,x|}] ${2:text}
-
- [${3| ,x|}] ${4:text}
${0}
-
- task3
- Insert task list 3
- Insert task list with 3 tasks
-
-
- - [${1| ,x|}] ${2:text}
-
- [${3| ,x|}] ${4:text}
-
- [${5| ,x|}] ${6:text}
${0}
-
- task4
- Insert task list 4
- Insert task list with 4 tasks
-
-
- - [${1| ,x|}] ${2:text}
-
- [${3| ,x|}] ${4:text}
-
- [${5| ,x|}] ${6:text}
- [${7| ,x|}] ${8:text}
${0}
-
- task5
- Insert task list 5
- Insert task list with 5 tasks
-
-
- - [${1| ,x|}] ${2:text}
-
- [${3| ,x|}] ${4:text}
-
- [${5| ,x|}] ${6:text}
- [${7| ,x|}] ${8:text}
-
- [${9| ,x|}] ${10:text}
${0}
-
- table
- Insert table
-
- Insert table with 2 rows and 3 columns. First row is heading.
-
-
-
- | ${1:Column1} | ${2:Column2} | ${3:Column3} |
-
|--------------
- | -------------- | -------------- |
| ${4:Item1} |
- ${5:Item1} | ${6:Item1} |
${0}
-
- 2x1table
- Insert 2x1 table
-
- Insert table with 2 rows and 1 column. First row is heading.
-
-
-
- | ${1:Column1} |
-
|-------------- |
| ${2:Item1}
- |
${0}
-
- 3x1table
- Insert 3x1 table
-
- Insert table with 3 rows and 1 column. First row is heading.
-
-
-
- | ${1:Column1} |
-
|-------------- |
| ${2:Item1}
- |
| ${3:Item2} |
${0}
-
- 4x1table
- Insert 4x1 table
-
- Insert table with 4 rows and 1 column. First row is heading.
-
-
-
- | ${1:Column1} |
-
|-------------- |
| ${2:Item1}
- |
| ${3:Item2} |
| ${4:Item3} |
${0}
-
- 5x1table
- Insert 5x1 table
-
- Insert table with 5 rows and 1 column. First row is heading.
-
-
-
- | ${1:Column1} |
-
|-------------- |
| ${2:Item1}
- |
| ${3:Item2} |
| ${4:Item3} |
| ${5:Item4}
- |
${0}
-
- 2x2table
- Insert 2x2 table
-
- Insert table with 2 rows and 2 columns. First row is heading.
-
-
-
- | ${1:Column1} | ${2:Column2} |
-
|--------------- |
- --------------- |
| ${3:Item1.1} | ${4:Item2.1} |
${0}
-
- 3x2table
- Insert 3x2 table
-
- Insert table with 3 rows and 2 columns. First row is heading.
-
-
-
- | ${1:Column1} | ${2:Column2} |
-
|--------------- |
- --------------- |
| ${3:Item1.1} | ${4:Item2.1} |
|
- ${5:Item1.2} | ${6:Item2.2} |
${0}
-
- 4x2table
- Insert 4x2 table
-
- Insert table with 4 rows and 2 columns. First row is heading.
-
-
-
- | ${1:Column1} | ${2:Column2} |
-
|--------------- |
- --------------- |
| ${3:Item1.1} | ${4:Item2.1} |
|
- ${5:Item1.2} | ${6:Item2.2} |
| ${7:Item1.3} |
- ${8:Item2.3} |
${0}
-
- 5x2table
- Insert 5x2 table
-
- Insert table with 5 rows and 2 columns. First row is heading.
-
-
-
- | ${1:Column1} | ${2:Column2} |
-
|--------------- |
- --------------- |
| ${3:Item1.1} | ${4:Item2.1} |
|
- ${4:Item1.2} | ${5:Item2.2} |
| ${6:Item1.3} |
- ${7:Item2.3} |
| ${8:Item1.4} | ${9:Item2.4} |
${0}
-
- 2x3table
- Insert 2x3 table
-
- Insert table with 2 rows and 3 columns. First row is heading.
-
-
-
- | ${1:Column1} | ${2:Column2} | ${3:Column3} |
-
|----------------
- | --------------- | --------------- |
| ${4:Item1.1} |
- ${5:Item2.1} | ${6:Item3.1} |
${0}
-
- 3x3table
- Insert 3x3 table
-
- Insert table with 3 rows and 3 columns. First row is heading.
-
-
-
- | ${1:Column1} | ${2:Column2} | ${3:Column3} |
-
|----------------
- | --------------- | --------------- |
| ${4:Item1.1} |
- ${5:Item2.1} | ${6:Item3.1} |
| ${7:Item1.2} |
- ${8:Item2.2} | ${9:Item3.2} |
${0}
-
- 4x3table
- Insert 4x3 table
-
- Insert table with 4 rows and 3 columns. First row is heading.
-
-
-
- | ${1:Column1} | ${2:Column2} | ${3:Column3} |
-
|----------------
- | --------------- | --------------- |
| ${4:Item1.1} |
- ${5:Item2.1} | ${6:Item3.1} |
| ${7:Item1.2} |
- ${8:Item2.2} | ${9:Item3.2} |
| ${10:Item1.3} |
- ${11:Item2.3} | ${12:Item3.3} |
${0}
-
-
- 5x3table
- Insert 5x3 table
-
- Insert table with 5 rows and 3 columns. First row is heading.
-
-
-
- | ${1:Column1} | ${2:Column2} | ${3:Column3} |
-
|----------------
- | --------------- | --------------- |
| ${4:Item1.1} |
- ${5:Item2.1} | ${6:Item3.1} |
| ${7:Item1.2} |
- ${8:Item2.2} | ${9:Item3.2} |
| ${10:Item1.3} |
- ${11:Item2.3} | ${12:Item3.3} |
| ${13:Item1.4} |
- ${14:Item2.4} | ${15:Item3.4} |
${0}Vue VSCode Snippets
-
-
- vue.json
-
-
-
-
-
-
-
-
-
-
- Prefix
- Name
- Description
- Body
-
-
- vbase
- Vue Single File Component
- Base for Vue File with SCSS
-
-
- <template>
-
- <div>
- </div>
</template>
<script>
- export default {
- ${0}
- }
</script>
<style lang="scss"
- scoped>
</style>
-
- vbase-sass
- Vue Single File Component with SASS
- Base for Vue File with PostCSS
-
-
- <template>
-
- <div>
- </div>
</template>
<script>
- export default {
- ${0}
- }
</script>
<style lang="sass"
- scoped>
</style>
-
- vbase-less
- Vue Single File Component with LESS
- Base for Vue File with PostCSS
-
-
- <template>
-
- <div>
- </div>
</template>
<script>
- export default {
- ${0}
- }
</script>
<style lang="less"
- scoped>
</style>
-
- vbase-pcss
- Vue Single File Component with postcss
- Base for Vue File with PostCSS
-
-
- <template>
-
- <div>
- </div>
</template>
<script>
- export default {
- ${0}
- }
</script>
<style lang="postcss"
- scoped>
</style>
-
- vbase-css
- Vue Single File Component with Css
- Base for Vue File with CSS
-
-
- <template>
-
- <div>
- </div>
</template>
<script>
- export default {
- ${0}
- }
</script>
<style scoped>
</style>
-
- vbase-styl
- Vue Single File Component with Stylus
- Base for Vue File with Stylus
-
-
- <template>
-
- <div>
- </div>
</template>
<script>
- export default {
- ${0}
- }
</script>
<style lang="stylus"
- scoped>
</style>
-
- vbase-ts
- Vue Single File Component with Typescript
- Base for Vue File with Typescript
-
-
- <template>
-
- <div>
- </div>
</template>
<script
- lang="ts">
- import Vue from 'vue'
- export default Vue.extend({
- ${0}
- })
</script>
<style scoped>
</style>
-
- vbase-ns
- Vue Single File Component with No Style
- Base for Vue File with no styles
-
-
- <template>
-
- <div>
- </div>
</template>
<script>
- export default {
- ${0}
- }
</script>
-
- vbase-3
- Vue Single File Component Composition API
- Base for Vue File Composition API with SCSS
-
-
- <template>
-
- <div>
- </div>
</template>
<script>
export
- default {
- setup () {
- ${0}
- return {}
- }
}
</script>
<style lang="scss"
- scoped>
</style>
-
- vbase-3-reactive
- Vue Single File Component Composition API Reactive
- Base for Vue File Composition API with SCSS
-
-
- <template>
-
- <div>
- </div>
</template>
<script>
import
- { reactive, toRefs } from '@vue/composition-api'
export
- default {
- setup () {
- const state = reactive({
- ${0:count}: ${1:0},
- })
-
- return {
- ...toRefs(state),
- }
- }
}
</script>
<style lang="scss"
- scoped>
</style>
-
- vbase-3-ts
- Vue Single File Component Composition API with Typescript
- Base for Vue File Composition API - Typescript
-
-
- <template>
-
- <div>
- </div>
</template>
<script
- lang="ts">
import { defineComponent } from 'vue'
export
- default defineComponent({
- setup () {
- ${0}
- return {}
- }
})
</script>
<style
- scoped>
</style>
-
-
- vbase-ts-class
-
- Vue Single File Component with Class based Typescript format
-
- Base for Vue File with Class based Typescript format
-
-
- <template>
-
- <div>
- </div>
</template>
<script
- lang="ts">
- import { Component, Vue } from 'vue-property-decorator';
- @Component
- export default class ${0} extends Vue {
-
- }
</script>
<style scoped>
</style>
-
- vue-pug.json
-
-
-
-
-
-
-
-
-
-
- Prefix
- Name
- Description
- Body
-
-
- vfor
- Vue v-for
- vfor statement
-
-
- ${1:div}(v-for="${2:item} in ${2:item}s"
- :key="${2:item}.id")
-
- | {{ ${2:item} }}
-
- vmodel
- Vue v-model Directive
- v-model directive
-
-
- input(v-model="${1:data}" type="text")
-
-
- vmodel-num
- Vue v-model Number Directive
- v-model directive number input
-
-
- input(v-model.number="${1:numData}" type="number"
- step="1")
-
-
- von
- Vue v-on Shortcut Directive
- v-on click handler with arguments
-
-
- @click="${1:handler}(${2:arg}, $event)"
-
-
- vel-props
- Vue Component with Props Binding
- component element with props
-
-
- ${1:component}(:${1:propName}="${0}")
-
-
- vsrc
- Vue Image Source Binding
- image source binding
-
-
- img(:src="'/path/to/images/' + ${1:fileName}"
- alt="${2:altText}")
-
-
- vstyle
- Vue Style Binding
- vue inline style binding
-
-
- ${1:div}(:style="{ fontSize: ${2:data} + 'px' }")
-
-
- vstyle-obj
- Vue Style Binding Object
- vue inline style binding, objects
-
-
- ${1:div}(:style="[${2:styleObjectA}, ${3:styleObjectB]}")
-
-
- vclass
- Vue Class Binding
- vue class binding
-
-
- ${1:div}(:class="{ ${2:className}: ${3:data} }")
-
-
- vclass-obj
- Vue Class Binding Object
- vue class binding
-
-
- ${1:div}(:class="[${2:classNameA}, ${3:classNameB}]")
-
-
- vclass-obj-mult
- Vue Multiple Conditional Class Bindings
- vue multiple conditional class bindings
-
-
- ${1:div}(:class="[${2:classNameA}, {${3:classNameB} :
- ${4:condition}}]")
-
-
- vanim
- Vue Transition Component with JavaScript Hooks
- transition component js hooks
-
-
- transition(
-
- mode="out-in"
- @before-enter="beforeEnter"
- @enter="enter"
- @before-leave="beforeLeave"
- @leave="leave"
- :css="false"
)
-
-
- vnuxtl
- Vue Nuxt Routing Link
- nuxt routing link
-
-
- nuxt-link(to="/${1:page}") ${1:page}
-
-
- vue-template.json
-
-
-
-
-
-
-
-
-
-
- Prefix
- Name
- Description
- Body
-
-
- vfor
- Vue v-for
- vfor statement
-
-
- <${1:div} v-for="${2:item} in ${2:item}s"
- :key="${2:item}.id">
-
- {{ ${2:item} }}
</${1:div}>
-
- vmodel
- Vue v-model Directive
- v-model directive
-
-
- <input v-model="${1:data}" type="text" />
-
-
- vmodel-num
- Vue v-model Number Directive
- v-model directive number input
-
-
- <input v-model.number="${1:numData}" type="number"
- step="1" />
-
-
- von
- Vue v-on Shortcut Directive
- v-on click handler with arguments
-
-
- @click="${1:handler}(${2:arg}, $event)"
-
-
- vel-props
- Vue Component with Props Binding
- component element with props
-
-
- <${1:component}
- :${1:propName}="${0}"></${1:component}>
-
-
- vslot-named
- Vue Named Slot
- named slot
-
-
- <template
- v-slot:${0:name}>${1:defaultcontent}</template>
-
-
- vsrc
- Vue Image Source Binding
- image source binding
-
-
- <img :src="'/path/to/images/' + ${1:fileName}"
- alt="${2:altText}"/>
-
-
- vstyle
- Vue Style Binding
- vue inline style binding
-
-
- <${1:div} :style="{ fontSize: ${2:data} + 'px'
- }"></${1:div}>
-
-
- vstyle-obj
- Vue Style Binding Object
- vue inline style binding, objects
-
-
- <${1:div} :style="[${2:styleObjectA},
- ${3:styleObjectB]}"></${1:div}>
-
-
- vclass
- Vue Class Binding
- vue class binding
-
-
- <${1:div} :class="{ ${2:className}: ${3:data}
- }"></${1:div}>
-
-
- vclass-obj
- Vue Class Binding Object
- vue class binding
-
-
- <${1:div} :class="[${2:classNameA},
- ${3:classNameB}]"></${1:div}>
-
-
- vclass-obj-mult
- Vue Multiple Conditional Class Bindings
- vue multiple conditional class bindings
-
-
- <${1:div} :class="[${2:classNameA}, {${3:classNameB} :
- ${4:condition}}]"></${1:div}>
-
-
- vemit-child
- Vue Emit from Child
- Vue Emit from Child Component
-
-
- @change="$$emit('change', $$event.target.value)"
-
-
- vemit-parent
- Vue Emit to Parent
- Vue Emit to Parent Component
-
-
- @change="${1:foo} = $$event"
-
-
- vanim
- Vue Transition Component with JavaScript Hooks
- transition component js hooks
-
-
- <transition
-
- mode="out-in"
- @before-enter="beforeEnter"
- @enter="enter"
- @before-leave="beforeLeave"
- @leave="leave"
- :css="false">
</transition>
-
- vnuxtl
- Vue Nuxt Routing Link
- nuxt routing link
-
-
- <nuxt-link
- to="/${1:page}">${1:page}</nuxt-link>
-
-
- vroutename
- Vue Named Routing Link
- Named routing link
-
-
- <router-link :to="{name:
- '${1:name}'}">${2:LinkTitle}</router-link>
-
-
- vroutenameparam
- Vue Named Routing Link with Params
- Named routing link w/ params
-
-
- <router-link :to="{name: '${1:name}', params:{${2:id}:
- '${3:value}'} }">${4:LinkTitle}</router-link>
-
-
-
- vroutepath
- Vue Path Routing Link
- Path routing link
-
-
- <router-link
- to="${1:path}">${2:LinkTitle}</router-link>
-
-
- vue-script.json
-
-
-
-
-
-
-
-
-
-
- Prefix
- Name
- Description
- Body
-
-
- vdata
- Vue Data
- Vue Component Data
-
-
- data() {
-
- return {
- ${1:key}: ${2:value}
- }
},
-
- vmethod
- Vue Methods
- vue method
-
-
- methods: {
-
- ${1:name}() {
- ${0}
- }
},
-
- vcomputed
- Vue Computed
- computed value
-
-
- computed: {
-
- ${1:name}() {
- return this.${2:data} ${0}
- }
},
-
- vbeforecreate
- Vue Lifecycle beforeCreate
- beforeCreate lifecycle method
-
-
- beforeCreate () {
-
- ${0};
},
-
- vcreated
- Vue Lifecycle created
- created lifecycle method
-
-
- created () {
-
- ${0};
},
-
- vbeforemount
- Vue Lifecycle beforeMount
- beforeMount lifecycle method
-
-
- beforeMount () {
-
- ${0};
},
-
- vmounted
- Vue Lifecycle mounted
- mounted lifecycle method
-
-
- mounted () {
-
- ${0};
},
-
- vbeforeupdate
- Vue Lifecycle beforeUpdate
- beforeUpdate lifecycle method
-
-
- beforeUpdate () {
-
- ${0};
},
-
- vupdated
- Vue Lifecycle updated
- updated lifecycle method
-
-
- updated () {
-
- ${0};
},
-
- vbeforedestroy
- Vue Lifecycle beforeDestroy
- beforeDestroy lifecycle method
-
-
- beforeDestroy () {
-
- ${0};
},
-
- vdestroyed
- Vue Lifecycle destroyed
- destroyed lifecycle method
-
-
- destroyed () {
-
- ${0};
},
-
- vwatcher
- Vue Watchers
- vue watcher
-
-
- watch: {
-
- ${1:data}(${2:newValue}, ${3:oldValue}) {
- ${0}
- }
},
-
- vwatcher-options
- Vue Watchers with Options
- vue watcher with options
-
-
- watch: {
-
- ${1:data}: {
- immediate: ${2:true},
- deep: ${3:true},
- handler(${4:newValue}, ${5:oldValue}) {
- ${0}
- }
- }
},
-
- vprops
- Vue Props with Default
- Vue Props with Default
-
-
- props: {
-
- ${1:propName}: {
- type: ${2:Number},
- default: ${0}
- },
},
-
- vimport
- Vue Import File
- Import one component into another
-
-
- import ${1:New} from '@/components/${1:New}.vue';
-
-
- vcomponents
- Vue Import into the Component
-
- Import one component into another, within export statement
-
-
-
- components: {
-
- ${1:New},
},
-
- vimport-export
- Vue Import Export
- import a component and include it in export default
-
-
- import ${1:Name} from '@/components/${1:Name}.vue';
-
export
- default {
- components: {
- ${1:Name}
- },
};
-
- vimport-dynamic
- Vue Import Component Dynamically
- Import component that should be lazy loaded
-
-
- ${1:New} = () => import('@/components/${1:New}.vue')
-
-
- vmapstate
- Vue MapState
- map getters inside a vue component
-
-
- import { mapState } from 'vuex';
-
export default
- {
- computed: {
- ...mapState([
- ${1:'nameOfState'},
- ])
- },
};
-
- vmapgetters
- Vue MapGetters
- mapgetters inside a vue component
-
-
- import { mapGetters } from 'vuex';
-
export default
- {
- computed: {
- ...mapGetters([
- ${1:'nameOfGetter'},
- ])
- },
};
-
- vmapmutations
- Vue MapMutations
- mapmutations inside a vue component
-
-
- import { mapMutations } from 'vuex';
-
export
- default {
- methods: {
- ...mapMutations([
- ${1:'nameOfMutation'}, //also supports payload
- `this.nameOfMutation(amount)`
- ])
- },
};
-
- vmapactions
- Vue MapActions
- mapactions inside a vue component
-
-
- import { mapActions } from 'vuex';
-
export default
- {
- methods: {
- ...mapActions([
- ${1:'nameOfAction'}, //also supports payload
- `this.nameOfAction(amount)`
- ])
- },
};
-
- vfilter
- Vue Filter
- vue filter
-
-
- filters: {
-
- ${1:fnName}: function(${2:value}) {
- return ${2:value}${0};
- }
}
-
- vmixin
- Vue Mixin
- vue mixin
-
-
- const ${1:mixinName} = {
-
- mounted() {
- console.log('hello from mixin!');
- },
};
-
- vmixin-use
- Vue Use Mixin
- vue use mixin
-
-
- mixins: [${1:mixinName}],
-
-
- vc-direct
- Vue Custom Directive
- vue custom directive
-
-
- Vue.directive('${1:directiveName}', {
-
- bind(el, binding, vnode) {
- el.style.${2:arg} = binding.value.${2:arg};
- }
});
-
- vimport-lib
- Vue Import Library
- import a library
-
-
- import { ${1:libName} } from '${1:libName}';
-
-
- vimport-gsap
- Vue Import GSAP
- import gsap library
-
-
- import gsap from 'gsap';
-
-
- vanimhook-js
- Vue Transition Methods with JavaScript Hooks
- transition component js hooks
-
-
- beforeEnter(el) {
-
- console.log('beforeEnter');
},
enter(el, done) {
- console.log('enter');
- done();
},
beforeLeave(el) {
- console.log('beforeLeave');
},
leave(el, done) {
- console.log('leave');
- done();
},
-
- vcommit
- Vue Commit Vuex Store in Methods
- commit to vuex store in methods for mutation
-
-
- ${1:mutationName}() {
-
- this.\$store.commit('${1:mutationName}', ${2:payload});
}
-
- vdispatch
- Vue Dispatch Vuex Store in Methods
- dispatch to vuex store in methods for action
-
-
- ${1:actionName}() {
-
- this.\$store.dispatch('${1:actionName}', ${2:payload});
}
-
- vtest
- Unit Test
- unit test component
-
-
- import Vue from 'vue';
-
import ${1:HelloWorld} from
- './components/${1:HelloWorld}';
describe('${1:HelloWorld}.vue',
- () => {
- it('${2:should render correct contents}', () => {
- const Constructor = Vue.extend(${1:HelloWorld});
- const vm = new Constructor().$mount();
- expect(vm.$el.querySelector('.hello h1').textContent)
- .to.equal(${3:'Welcome to Your Vue.js App'});
- });
});
-
- vconfig
- Vue.config.js Import
- vue.config.js
-
-
- module.exports = {
-
- css: {
- loaderOptions: {
- ${1:sass}: {
- data: `${2:@import '@/styles/_variables.scss';}`
- }
- }
- }
}
-
- v3reactive
- Vue Composition API - Reactive
- Vue Composition api - reactive
-
-
- const ${1:name} = reactive({
-
- ${2:count}: ${3:0}
})
-
- v3computed
- Vue Composition API - Computed
- Vue Composition api - computed
-
-
- const ${1:name} = computed(() => {
-
- return ${2}
})
-
- v3watch
- Vue Composition API - watch - single source
- Vue Composition api - watcher single source
-
-
- watch(() => ${1:foo}, (newValue, oldValue) => {
-
- ${2}
})
-
- v3watch-array
- Vue Composition API - watch - array
- Vue Composition api - watch as array
-
-
- watch([${1:foo}, ${2:bar}], ([new${1}, new${2}], [prev${1},
- prev${2}]) => {
-
- ${3}
})
-
- v3watcheffect
- Vue Composition API - watchEffect
- Vue Composition api - watchEffect
-
-
- watchEffect(() => {
-
- ${1}
})
-
- v3ref
- Vue Composition API - Vue ref
- Vue Ref
-
-
- const ${1:name} = ref(${2:initialValue})
-
-
- v3onmounted
- Vue Lifecycle Hooks - onMounted
- Vue Mounted Lifecycle hook
-
-
- onMounted(() => {${1}})
-
-
- v3onbeforemount
- Vue Lifecycle Hooks - onBeforeMount
- Vue onBeforeMount Lifecycle hook
-
-
- onBeforeMount(() => {${1}})
-
-
- v3onbeforeupdate
- Vue Lifecycle Hooks - onBeforeUpdate
- Vue onBeforeUpdate Lifecycle hook
-
-
- onBeforeUpdate(() => {${1}})
-
-
- v3onupdated
- Vue Lifecycle Hooks - onUpdated
- Vue onUpdated Lifecycle hook
-
-
- onUpdated(() => {${1}})
-
-
- v3onerrorcaptured
- Vue Lifecycle Hooks - onErrorCaptured
- Vue onErrorCaptured Lifecycle hook
-
-
- onErrorCaptured(() => {${1}})
-
-
- v3onunmounted
- Vue Lifecycle Hooks - onUnmounted
- (destroyed) Vue onUnmounted Lifecycle hook
-
-
- onUnmounted(() => {${1}})
-
-
- v3onbeforeunmount
- Vue Lifecycle Hooks - onBeforeUnmount
- (beforeDestroy) Vue onBeforeUnmount Lifecycle hook
-
-
- onBeforeUnmount(() => {${1}})
-
-
- vplugin
- Plugin import
- Import a plugin to main.js or plugins file
-
-
- import Vue from 'vue'
-
import ${1:VueCompositionApi} from
- '${2:@vue/composition-api}'
Vue.use(${1:VueCompositionApi})
-
- v3reactive-setup
- Vue Composition API Reactive Script
- Vue Composition API Script with Reactive
-
-
- import { reactive, toRefs } from '@vue/composition-api'
-
export
- default {
- setup () {
- const state = reactive({
- ${0:count}: ${1:0},
- })
-
- return {
- ...toRefs(state),
- }
- }
}
-
-
- v3useinoptions
- Use Composition API within Options API
- Use Composition API within Options API
-
-
- import { ${0:component} } from
- '@/composables/${0:component}.js'
-
export default
- {
- setup () {
- const { ${1:name} } = ${0:component}()
-
- return {
- ${1:name}
- }
- }
}
-
- vue-script-vuex.json
-
-
-
-
-
-
-
-
-
-
- Prefix
- Name
- Description
- Body
-
-
- vstore
- Vuex Store
- Base for Vuex store
-
-
- import Vue from 'vue';
-
import Vuex from 'vuex';
Vue.use(Vuex);
export
- const store = new Vuex.Store({
- state: {
- ${1:key}: ${2:value}
- }
});
-
- vgetter
- Vuex Getters
- vuex getter
-
-
- getters: {
-
- ${1:value}: state => {
- return state.${1:value};
- }
}
-
- vmutation
- Vuex Mutation
- vuex mutation
-
-
- mutations: {
-
- ${1:updateValue}(state, ${3:payload}) {
- state.${2:value} = ${3:payload};
- }
}
-
- vaction
- Vuex Action
- vuex action
-
-
- actions: {
-
- ${1:updateValue}({commit}, ${2:payload}) {
- commit('${1:updateValue}', ${2:payload});
- }
}
-
- vstore-import
- Vue Import Vuex Store
- import vuex store into main.js
-
-
- import { store } from './store/index';
-
-
- vmodule
- Vuex Module
- vuex module
-
-
- export default {
-
- state: {
- value: 'my value'
- },
- getters: {
- value: state => {
- return state.value;
- }
- },
- mutations: {
- updateValue(state, payload) {
- state.value = payload;
- }
- },
- actions: {
- updateValue({commit}, payload) {
- commit('updateValue', payload);
- }
- }
};
-
-
- vstore2
- Vuex Store 2
- vuex store 2
-
-
- export const state = () => ({
-
- value: 'myvalue'
})
export const getters =
- {
- getterValue: state => {
- return state.value
- }
}
export const mutations = {
- updateValue: (state, payload) => {
- state.value = payload
- }
}
export const actions = {
- updateActionValue({ commit }) {
- commit('updateValue', payload)
- }
}
-
- vue-script-router.json
-
-
-
-
-
-
-
-
-
-
- Prefix
- Name
- Description
- Body
-
-
- vrouter
- Vue Router
- Base for Vue Router
-
-
- import Vue from 'vue';
-
import VueRouter from
- 'vue-router';
Vue.use(VueRouter);
export
- const router = new VueRouter({
- base: '/',
- mode: 'history',
- routes: [
- { path: '/path', component: component }
- ]
});
-
- vscrollbehavior
- Vue Router scrollBehavior
- Vue Router scrollBehavior
-
-
- scrollBehavior(to, from, savedPosition) {
-
- if(savedPosition) {
- return savedPosition;
- } else {
- return { x: 0, y: 0 };
- }
},
-
- vbeforeeach
- Vue Router beforeEach
- Vue Router global guards beforeEach
-
-
- router.beforeEach((to, from, next) => {
-
- ${1:next();}
});
-
- vbeforeresolve
- Vue Router beforeResolve
- Vue Router global guards beforeResolve
-
-
- router.beforeResolve((to, from, next) => {
-
- ${1:next();}
});
-
- vaftereach
- Vue Router afterEach
- Vue Router global guards afterEach
-
-
- router.afterEach((to, from) => {
-
-
});
-
- vbeforeenter
- Vue Router beforeEnter
- Vue Router per-route guard beforeEnter
-
-
- beforeEnter(to, from, next) {
-
- ${1:next();}
},
-
- vbeforerouteenter
- Vue Router beforeRouteEnter
- Vue Router component guards beforeRouteEnter
-
-
- beforeRouteEnter(to, from, next) {
-
- next(vm => {${1:}});
},
-
- vbeforerouteupdate
- Vue Router beforeRouteUpdate
- Vue Router component guards beforeRouteUpdate
-
-
- beforeRouteUpdate(to, from, next) {
-
- ${1:next();}
},
-
- vbeforerouteleave
- Vue Router beforeRouteLeave
- Vue Router component guards beforeRouteLeave
-
-
- beforeRouteLeave(to, from, next) {
-
- ${1:next();}
},
-
-
- vroute-named
- Vue Router Route
- Vue Router route with per route code-splitting
-
-
- {
-
- path: '${1:pathName}',
- name: '${2:routeName}',
- component: () => import('./${3:pathToComponent}'),
},
-
- nuxt-config.json
-
-
-
-
-
-
-
-
-
-
- Prefix
- Name
- Description
- Body
-
-
- nfont
- Nuxt Font
- link to include fonts in a nuxt project, in nuxt-config
-
-
- { rel: 'stylesheet', href:
- '${1:https://fonts.googleapis.com/css?family=Montserrat:600|Rufina:700}'
- }
-
-
-
- ncss
- Nuxt Use CSS File
- link to css assets such as normalize
-
-
- css: ['assets/${1:normalize.css}'],
-
-
- nuxt-script.json
-
-
-
-
-
-
-
-
-
-
- Prefix
- Name
- Description
- Body
-
-
- nasyncdata
- Nuxt Async
- Nuxt asyncData
-
-
- async asyncData ({ ${1:params} }) {
-
- const { data } = await fetch(`${2:endpoint}`).then(res =>
- res.json())
- return { ${3:key}:${4:value} }
},
-
- nfetch
- Nuxt Fetch
- Nuxt Fetch
-
-
- async fetch ({ store, ${1:params} }) {
-
- let { data } = await fetch('${2:endpoint}').then(res =>
- res.json())
- store.commit('${3:MUTATION_TYPE}', data)
},
-
- nparam
- Nuxt Route Params
- Nuxt Route Params
-
-
- this.$route.params.${1:id}
-
-
-
- nhead
- Nuxt Head
- Nuxt Head
-
-
- head () {
-
- return {
- title: ${1:'Page Title'},
- meta: [
- // hid is used as unique identifier. Do not use `vmid` for it
- as it will not work
- { hid: 'description', name: 'description', content: ${2:'My
- custom description'} }
- ]
- }
},JavaScript (ES6) code snippets
-
-
- snippets.json
-
-
-
-
-
-
-
-
-
-
- Prefix
- Name
- Description
- Body
-
-
- imp
- import
- Imports entire module statement in ES6 syntax
-
-
- import ${2:moduleName} from '${1:module}';$0
-
-
- imn
- importNoModuleName
- Imports entire module in ES6 syntax without module name
-
-
- import '${1:module}';$0
-
-
- imd
- importDestructing
- Imports only a portion of the module in ES6 syntax
-
-
- import { $2 } from '${1:module}';$0
-
-
- ime
- importEverything
- Imports everything as alias from the module in ES6 syntax
-
-
- import * as ${2:alias} from '${1:module}';$0
-
-
- ima
- importAs
-
- Imports a specific portion of the module by assigning a local
- alias in ES6 syntax
-
-
-
- import { ${2:originalName} as ${3:alias} } from
- '${1:module}';$0
-
-
- rqr
- require
- Require a package
-
-
- require('${1:package}');
-
-
- req
- requireToConst
- Require a package to const
-
-
- const ${1:packageName} = require('${1:package}');$0
-
-
- mde
- moduleExports
- Module exports from Common JS, node syntax at ES6
-
-
- module.exports = { $0 };
-
-
- env
- exportNamedVariable
- Export named variable in ES6 syntax
-
-
- export const ${1:exportVariable} = ${2:localVariable};
-
-
- enf
- exportNamedFunction
- Export named function in ES6 syntax
-
-
- export const ${1:functionName} = (${2:params}) => { $0 };
-
-
-
- edf
- exportDefaultFunction
- Export default function in ES6 syntax
-
-
- export default function ${1:${TM_FILENAME_BASE}}(${2:params})
- { $0 };
-
-
- ecl
- exportClass
- Export default class in ES6 syntax
-
-
- export default class ${1:className} { $0 };
-
-
- ece
- exportClassExtends
-
- Export default class which extends a base one in ES6 syntax
-
-
-
- export default class ${1:className} extends
- ${2:baseclassName} { $0 };
-
-
- con
- constructor
- Add default constructor in a class in ES6 syntax
-
-
- constructor(${1:params}) { ${0} }
-
-
- met
- method
- Creates a method inside a class in ES6 syntax
-
-
- ${1:methodName}(${2:params}) { ${0} }
-
-
- pge
- propertyGet
- Creates a getter property inside a class in ES6 syntax
-
-
- get ${1:propertyName}() { return this.${0}; }
-
-
- pse
- propertyset
- Creates a setter property inside a class in ES6 syntax
-
-
- set ${1:propertyName}(${2:value}) { ${0}; }
-
-
- fre
- forEach
- Creates a forEach statement in ES6 syntax
-
-
- ${1:array}.forEach(${2:currentItem} => { ${0} });
-
-
- fof
- forOf
- Iterating over property names of iterable objects
-
-
- for (const ${1:item} of ${2:object}) { ${0} }
-
-
- fin
- forIn
- Iterating over property values of iterable objects
-
-
- for (const ${1:item} in ${2:object}) { ${0} }
-
-
- anfn
- anonymousFunction
- Creates an anonymous function in ES6 syntax
-
-
- (${1:params}) => { ${2} }
-
-
- nfn
- namedFunction
- Creates a named function in ES6 syntax
-
-
- const ${1:name} = (${2:params}) => { ${3} }
-
-
- dob
- destructingObject
-
- Creates and assigns a local variable using object destructing
-
-
-
- const {${2:propertyName}} = ${1:objectToDestruct};
-
-
- dar
- destructingArray
-
- Creates and assigns a local variable using array destructing
-
-
-
- const [${2:propertyName}] = ${1:arrayToDestruct};
-
-
- sti
- setInterval
-
- Executes the given function at specified intervals in ES6 syntax
-
-
-
- setInterval(() => { ${2} }, ${0:intervalInms});
-
-
- sto
- setTimeOut
-
- Executes the given function after the specified delay in ES6
- syntax
-
-
-
- setTimeout(() => { ${2} }, ${1:delayInms});
-
-
- prom
- promise
-
- Creates and returns a new Promise in the standard ES6 syntax
-
-
-
- return new Promise((resolve, reject) => { ${1} });
-
-
- thenc
- thenCatch
- Add the .then and .catch methods to handle promises
-
-
- .then((${1:result}) => { ${2} }).catch((${3:err}) => {
- ${4} });
-
-
- cas
- consoleAssert
-
- If the specified expression is false, the message is written to
- the console along with a stack trace
-
-
-
- console.assert(${1:expression}, ${2:object});
-
-
- ccl
- consoleClear
- Clears the console
-
-
- console.clear();
-
-
- cco
- consoleCount
-
- Writes the the number of times that count() has been invoked at
- the same line and with the same label
-
-
-
- console.count(${1:label});
-
-
- cdb
- consoleDebug
-
- Displays a message in the console. Also display a blue right
- arrow icon along with the logged message in Safari
-
-
-
- console.debug(${1:object});
-
-
- cdi
- consoleDir
-
- Prints a JavaScript representation of the specified object
-
-
-
- console.dir(${1:object});
-
-
- cer
- consoleError
-
- Displays a message in the console and also includes a stack
- trace from where the method was called
-
-
-
- console.error(${1:object});
-
-
- cgr
- consoleGroup
-
- Groups and indents all following output by an additional level,
- until console.groupEnd() is called.
-
-
-
- console.group('${1:label}');
-
-
- cge
- consoleGroupEnd
- Closes out the corresponding console.group().
-
-
- console.groupEnd();
-
-
- clg
- consoleLog
- Displays a message in the console
-
-
- console.log(${1:object});
-
-
- clo
- consoleLogObject
- Displays an object in the console with its name
-
-
- console.log('${1:object} :>> ', ${1:object});
-
-
- ctr
- consoleTrace
-
- Prints a stack trace from the point where the method was called
-
-
-
- console.trace(${1:object});
-
-
- cwa
- consoleWarn
-
- Displays a message in the console but also displays a yellow
- warning icon along with the logged message
-
-
-
- console.warn(${1:object});
-
-
- cin
- consoleInfo
-
- Displays a message in the console but also displays a blue
- information icon along with the logged message
-
-
-
- console.info(${1:object});
-
-
- clt
- consoleTable
- Displays tabular data as a table.
-
-
- console.table(${1:object});
-
-
- cti
- consoleTime
- Sets starting point for execution time measurement
-
-
- console.time(${1:object});
-
-
-
- cte
- consoleTimeEnd
- Sets end point for execution time measurement
-
-
- console.timeEnd(${1:object});
- VS Code Snippets
-
-
- Batchfile
-
-
-
-
-
-
-
-
- Prefix
- Name
- Description
- Body
-
-
- #region
- Region Start
- Folding Region Start
-
-
- ::#region
-
-
-
- #endregion
- Region End
- Folding Region End
-
-
- ::#endregion
-
-
- Coffeescript
-
-
-
-
-
-
-
-
- Prefix
- Name
- Description
- Body
-
-
- #region
- Region Start
- Folding Region Start
-
-
- #region
-
-
-
- #endregion
- Region End
- Folding Region End
-
-
- #endregion
-
-
- C
-
-
-
-
-
-
-
-
- Prefix
- Name
- Description
- Body
-
-
- #region
- Region Start
- Folding Region Start
-
-
- #pragma region $0
-
-
-
- #endregion
- Region End
- Folding Region End
-
-
- #pragma endregion
-
-
- CPP
-
-
-
-
-
-
-
-
- Prefix
- Name
- Description
- Body
-
-
- #region
- Region Start
- Folding Region Start
-
-
- #pragma region $0
-
-
-
- #endregion
- Region End
- Folding Region End
-
-
- #pragma endregion
-
-
- Csharp
-
-
-
-
-
-
-
-
- Prefix
- Name
- Description
- Body
-
-
- #region
- Region Start
- Folding Region Start
-
-
- #region $0
-
-
-
- #endregion
- Region End
- Folding Region End
-
-
- #endregion
-
-
- Fsharp
-
-
-
-
-
-
-
-
- Prefix
- Name
- Description
- Body
-
-
- #region
- Region Start
- Folding Region Start
-
-
- //#region $0
-
-
-
- #endregion
- Region End
- Folding Region End
-
-
- //#endregion
-
-
- Groovy
-
-
-
-
-
-
-
-
- Prefix
- Name
- Description
- Body
-
-
- replace
- replace(dir: …, includes: …, token: …, value: …)
- Replace(...)
-
-
- replace(dir:"${1:dirName}", includes:"${2:*.*}",
- token:"${3:tokenName}", value:"\${${4:value}}")$0
-
-
- doc
- Doc Block
- Doc block comment
-
-
- /**
-
- * $0
- */
-
- key
- key: "value" (Hash Pair)
-
-
-
- ${1:key}: ${2:"${3:value}"}
-
-
- thread
- Thread.start { … }
- Thread.start { ... }
-
-
- Thread.start {
-
- $0
}
-
- thread
- Thread.startDaemon { … }
- Thread.startDaemon { ... }
-
-
- Thread.startDaemon {
-
- $0
}
-
- case
- case … break
- case ... break
-
-
- case ${1:CASE_NAME}:
-
- $2
break$0
-
- instance
- instance … (Singleton)
- Singleton instance + Getter
-
-
- private static $1 instance
-
static $1
- getInstance(${2:args}) {
- if (!instance) instance = new $1(${2:args})
- return instance
}
-
- tc
- class … extends GroovyTestCase { … }
- GroovyTestCase class
-
-
- class $1 extends GroovyTestCase {
-
- $0
}
-
- copy
- copy(file: …, tofile: …)
- Copy file
-
-
- copy(file:"${1:sourceFile}", tofile:"${2:targetFile}")
-
-
- copy
- copy(todir: …) { fileset(dir: …) { include … exclude }
- Copy fileset todir w/ include/exclude
-
-
- copy(todir:"${1:targetDir}") {
-
- fileset(dir:"${2:sourceDir}") {
- include(name:"${3:includeName}")
- exclude(name:"${4:excludeName}")
- }
}
-
- copy
- copy(todir: …) { fileset:dir …) }
- Copy fileset todir
-
-
- copy(todir:"${1:targetDir}") {
-
- fileset(dir:"${2:sourceDir}")
}
-
- cv
- closure = { … }
- Closure block
-
-
- def ${1:closureName} = { ${2:args} ->
-
- $0
}
-
- forin
- for(… in …) { … }
- For-loop
-
-
- for (${1:element} in ${2:collection}) {
-
- $0
}
-
- mkdir
- mkdir(dir: …)
- mkdir
-
-
- mkdir(dir:"${1:dirName}")
-
-
- p
- print
- print
-
-
- print $0
-
-
- pl
- println
- println
-
-
- println $0
-
-
- runa
- runAfter() { … }
- runAfter() { ... }
-
-
- runAfter(${1:delay}) {
-
- $0
}
-
- setup
- setUp() { … }
- setup() { ... }
-
-
- void setUp() {
-
- $0
}
-
- sleep
- sleep(secs) { … // on interrupt do }
- sleep with interrupt
-
-
- sleep(${1:secs}) {
-
- ${2:// on interrupt do}
}
-
- sleep
- sleep(secs)
- sleep
-
-
- sleep(${1:secs})
-
-
- sort
- sort { … }
- sort
-
-
- sort {
-
- $0
}
-
- main
- static main() { … }
- main method
-
-
- static main(args) {
-
- $0
}
-
- switch
- switch … case
- Switch-Case block
-
-
- switch(${1:value}) {
-
- case ${2:CASE}:
- $3
- break$0
}
-
- switch
- switch … case … default
- Switch-Case-Default block
-
-
- switch(${1:value}) {
-
- case ${3:CASE}:
- $4
- break$0
- default:
- $2
- break
}
-
- tear
- tearDown() { … }
- tearDown() { ... }
-
-
- void tearDown() {
-
- $0
}
-
- t
- test()
- test method
-
-
- void test$1() {
-
- $0
}
-
-
- v
- var
- var
-
-
- ${1:def} ${2:var}${3: = ${0:null}}
-
-
- Java
-
-
-
-
-
-
-
-
- Prefix
- Name
- Description
- Body
-
-
- #region
- Region Start
- Folding Region Start
-
-
- //#region
-
-
-
- #endregion
- Region End
- Folding Region End
-
-
- //#endregion
-
-
- Javascript
-
-
-
-
-
-
-
-
- Prefix
- Name
- Description
- Body
-
-
- define
- define module
- define module
-
-
- define([
-
- 'require',
- '${1:dependency}'
], function(require, ${2:factory}) {
- 'use strict';
- $0
});
-
- for
- For Loop
- For Loop
-
-
- for (let ${1:index} = 0; ${1:index} < ${2:array}.length;
- ${1:index}++) {
-
- const ${3:element} = ${2:array}[${1:index}];
- $0
}
-
- foreach
- For-Each Loop
- For-Each Loop
-
-
- ${1:array}.forEach(${2:element} => {
-
- $0
});
-
- forin
- For-In Loop
- For-In Loop
-
-
- for (const ${1:key} in ${2:object}) {
-
- if (${2:object}.hasOwnProperty(${1:key})) {
- const ${3:element} = ${2:object}[${1:key}];
- $0
- }
}
-
- forof
- For-Of Loop
- For-Of Loop
-
-
- for (const ${1:iterator} of ${2:object}) {
-
- $0
}
-
- function
- Function Statement
- Function Statement
-
-
- function ${1:name}(${2:params}) {
-
- $0
}
-
- if
- If Statement
- If Statement
-
-
- if (${1:condition}) {
-
- $0
}
-
- ifelse
- If-Else Statement
- If-Else Statement
-
-
- if (${1:condition}) {
-
- $0
} else {
-
}
-
- new
- New Statement
- New Statement
-
-
- const ${1:name} = new ${2:type}(${3:arguments});$0
-
-
- switch
- Switch Statement
- Switch Statement
-
-
- switch (${1:key}) {
-
- case ${2:value}:
- $0
- break;
- default:
- break;
}
-
- while
- While Statement
- While Statement
-
-
- while (${1:condition}) {
-
- $0
}
-
- dowhile
- Do-While Statement
- Do-While Statement
-
-
- do {
-
- $0
} while (${1:condition});
-
- trycatch
- Try-Catch Statement
- Try-Catch Statement
-
-
- try {
-
- $0
} catch (${1:error}) {
-
}
-
- settimeout
- Set Timeout Function
- Set Timeout Function
-
-
- setTimeout(() => {
-
- $0
}, ${1:timeout});
-
- setinterval
- Set Interval Function
- Set Interval Function
-
-
- setInterval(() => {
-
- $0
}, ${1:interval});
-
- import statement
- Import external module.
- Import external module.
-
-
- import { $0 } from "${1:module}";
-
-
- #region
- Region Start
- Folding Region Start
-
-
- //#region $0
-
-
- #endregion
- Region End
- Folding Region End
-
-
- //#endregion
-
-
- log
- Log to the console
- Log to the console
-
-
- console.log($1);
-
-
- warn
- Log warning to console
- Log warning to the console
-
-
- console.warn($1);
-
-
-
- error
- Log error to console
- Log error to the console
-
-
- console.error($1);
-
-
- Markdown
-
-
-
-
-
-
-
-
- Prefix
- Name
- Description
- Body
-
-
- bold
- Insert bold text
- Insert bold text
-
-
- **${1:${TM_SELECTED_TEXT}}**$0
-
-
- italic
- Insert italic text
- Insert italic text
-
-
- *${1:${TM_SELECTED_TEXT}}*$0
-
-
- quote
- Insert quoted text
- Insert quoted text
-
-
- > ${1:${TM_SELECTED_TEXT}}
-
-
- code
- Insert inline code
- Insert inline code
-
-
- `${1:${TM_SELECTED_TEXT}}`$0
-
-
- fenced codeblock
- Insert fenced code block
- Insert fenced code block
-
-
- ```${1:language}
-
${TM_SELECTED_TEXT}$0
```
-
- heading1
- Insert heading level 1
- Insert heading level 1
-
-
- # ${1:${TM_SELECTED_TEXT}}
-
-
- heading2
- Insert heading level 2
- Insert heading level 2
-
-
- ## ${1:${TM_SELECTED_TEXT}}
-
-
- heading3
- Insert heading level 3
- Insert heading level 3
-
-
- ### ${1:${TM_SELECTED_TEXT}}
-
-
- heading4
- Insert heading level 4
- Insert heading level 4
-
-
- #### ${1:${TM_SELECTED_TEXT}}
-
-
- heading5
- Insert heading level 5
- Insert heading level 5
-
-
- ##### ${1:${TM_SELECTED_TEXT}}
-
-
- heading6
- Insert heading level 6
- Insert heading level 6
-
-
- ###### ${1:${TM_SELECTED_TEXT}}
-
-
- unordered list
- Insert unordered list
- Insert unordered list
-
-
- - ${1:first}
-
- ${2:second}
- ${3:third}
$0
-
- ordered list
- Insert ordered list
- Insert ordered list
-
-
- 1. ${1:first}
-
2. ${2:second}
3. ${3:third}
$0
-
- horizontal rule
- Insert horizontal rule
- Insert horizontal rule
-
-
- ----------
-
-
- link
- Insert link
- Insert link
-
-
- [${TM_SELECTED_TEXT:${1:text}}](https://${2:link})$0
-
-
- image
- Insert image
- Insert image
-
-
- $0
-
-
-
- strikethrough
- Insert strikethrough
- Insert strikethrough
-
-
- ~~${1:${TM_SELECTED_TEXT}}~~
-
-
- PHP
-
-
-
-
-
-
-
-
- Prefix
- Name
- Description
- Body
-
-
- class
- class …
- Class definition
-
-
- class ${1:ClassName} ${2:extends ${3:AnotherClass}}
- ${4:implements ${5:Interface}}
-
{
- $0
}
-
- doc_class
- PHPDoc class …
- Documented Class Declaration
-
-
- /**
-
- * ${6:undocumented class}
- */
class ${1:ClassName} ${2:extends ${3:AnotherClass}}
- ${4:implements ${5:Interface}}
{
- $0
}
-
- con
- function __construct
-
-
-
- ${1:public} function __construct(${2:${3:Type} $${4:var}${5:
- = ${6:null}}}) {
-
- \$this->${4:var} = $${4:var};$0
}
-
- doc_v
- PHPDoc property
- Documented Class Variable
-
-
- /** @var ${1:Type} $${2:var} ${3:description} */
-
${4:protected}
- $${2:var}${5: = ${6:null}};$0
-
- doc_f
- PHPDoc function …
- Documented function
-
-
- /**
-
- * ${1:undocumented function summary}
- *
- * ${2:Undocumented function long description}
- *
${3: * @param ${4:Type} $${5:var} ${6:Description}}
${7:
- * @return ${8:type}}
${9: * @throws ${10:conditon}}
- **/
${11:public }function
- ${12:FunctionName}(${13:${14:${4:Type} }$${5:var}${15: =
- ${16:null}}})
{
- ${0:# code...}
}
-
- param
- PHPDoc param …
- Paramater documentation
-
-
- * @param ${1:Type} ${2:var} ${3:Description}$0
-
-
- fun
- function …
- Function
-
-
- ${1:public }function ${2:FunctionName}(${3:${4:${5:Type}
- }$${6:var}${7: = ${8:null}}})
-
{
- ${0:# code...}
}
-
- trait
- trait …
- Trait
-
-
- /**
-
- * $1
- */
trait ${2:TraitName}
{
- $0
}
-
- def
- define(…, …)
- Definition
-
-
- define('$1', ${2:'$3'});
-
$0
-
- do
- do … while …
- Do-While loop
-
-
- do {
-
- ${0:# code...}
} while (${1:$${2:a} <= ${3:10}});
-
- while
- while …
- While-loop
-
-
- while (${1:$${2:a} <= ${3:10}}) {
-
- ${0:# code...}
}
-
- if
- if …
- If block
-
-
- if (${1:condition}) {
-
- ${0:# code...}
}
-
- ifelse
- if … else …
- If Else block
-
-
- if (${1:condition}) {
-
- ${2:# code...}
} else {
- ${3:# code...}
}
$0
-
- if?
- $… = ( … ) ? … : …
- Ternary conditional assignment
-
-
- $${1:retVal} = (${2:condition}) ? ${3:a} : ${4:b} ;
-
-
- else
- else …
- Else block
-
-
- else {
-
- ${0:# code...}
}
-
- elseif
- elseif …
- Elseif block
-
-
- elseif (${1:condition}) {
-
- ${0:# code...}
}
-
- for
- for …
- For-loop
-
-
- for ($${1:i}=${2:0}; $${1:i} < $3; $${1:i}++) {
-
- ${0:# code...}
}
-
- foreach
- foreach …
- Foreach loop
-
-
- foreach ($${1:variable} as $${2:key} ${3:=> $${4:value}})
- {
-
- ${0:# code...}
}
-
- array
- $… = array (…)
- Array initializer
-
-
- $${1:arrayName} = array('$2' => $3${4:,} $0);
-
-
- shorray
- $… = […]
- Array initializer
-
-
- $${1:arrayName} = ['$2' => $3${4:,} $0];
-
-
- keyval
- … => …
- Key-Value initializer
-
-
- '$1' => $2${3:,} $0
-
-
- switch
- switch …
- Switch block
-
-
- switch (\$${1:variable}) {
-
- case '${2:value}':
- ${3:# code...}
- break;
- $0
- default:
- ${4:# code...}
- break;
}
-
- case
- case …
- Case Block
-
-
- case '${1:value}':
-
- ${0:# code...}
- break;
-
- this
- $this->…
- $this->...
-
-
- \$this->$0;
-
-
- ethis
- echo $this->…
- Echo this
-
-
- echo \$this->$0;
-
-
- throw
- Throw Exception
- Throw exception
-
-
- throw new $1Exception(${2:"${3:Error Processing
- Request}"}${4:, ${5:1}});
-
$0
-
- #region
- Region Start
- Folding Region Start
-
-
- #region
-
-
- #endregion
- Region End
- Folding Region End
-
-
- #endregion
-
-
-
- try
- Try Catch Block
- Try catch block
-
-
- try {
-
- ${1://code...}
} catch (${2:\Throwable} ${3:\$th}) {
- ${4://throw \$th;}
}
-
- Powershell
-
-
-
-
-
-
-
-
- Prefix
- Name
- Description
- Body
-
-
- #region
- Region Start
- Folding Region Start
-
-
- #region $0
-
-
-
- #endregion
- Region End
- Folding Region End
-
-
- #endregion
-
-
- Swift
-
-
-
-
-
-
-
-
- Prefix
- Name
- Description
- Body
-
-
- print
- print
- print("...")
-
-
- print("$1") $0
-
-
- printv
- print value
- print("\(...)")
-
-
- print("\($1)") $0
-
-
- while
- while
- while statement
-
-
- while ${1:condition} {
-
- $0
}
-
- repeat
- repeat-while
- repeat-while statement
-
-
- repeat {
-
- $0
} while ${1:condition}
-
- for
- for
- for-in statement
-
-
- for ${1:item} in ${2:collection} {
-
- $0
}
-
- if
- if
- if statement
-
-
- if ${1:condition} {
-
- $0
}
-
- elif
- else if
- else clause with a nested if statement
-
-
- else if ${1:condition} {
-
- $0
}
-
- else
- else
- else clause
-
-
- else {
-
- $0
}
-
- iflet
- if let
- if statement with optional binding
-
-
- if let ${1:value} = ${2:optional} {
-
- $0
}
-
- guard
- guard
- guard statement
-
-
- guard ${1:condition} else {
-
- $0
}
-
- guardlet
- guard let
- guard statement with optional binding
-
-
- guard let ${1:value} = ${2:optional} else {
-
- $0
}
-
- switch
- switch
- switch statement
-
-
- switch ${1:value} {
-
case ${2:pattern}:
- $0
default:
-
}
-
- do
- do
- do statement
-
-
- do {
-
- $0
} catch ${1:error} {
- $2
}
-
- func
- func
- function declaration
-
-
- func ${1:name}(${2:parameters}) -> ${3:Type} {
-
- $0
}
-
- struct
- struct
- struct declaration
-
-
- struct ${1:Name} {
-
- $0
}
-
- enum
- enum
- enum declaration
-
-
- enum ${1:Name} {
-
- case $0
}
-
- class
- class
- class declaration
-
-
- class ${1:Name} {
-
- $0
}
-
- protocol
- protocol
- protocol declaration
-
-
- protocol ${1:Name} {
-
- $0
}
-
-
- extension
- extension
- extension declaration
-
-
- extension ${1:Type} {
-
- $0
}
-
- Typescript
-
-
-
-
-
-
-
-
- Prefix
- Name
- Description
- Body
-
-
- ctor
- Constructor
- Constructor
-
-
- /**
-
- *
- */
constructor() {
- super();
- $0
}
-
- class
- Class Definition
- Class Definition
-
-
- class ${1:name} {
-
- constructor(${2:parameters}) {
- $0
- }
}
-
- public method
- Public Method Definition
- Public Method Definition
-
-
- /**
-
- * ${1:name}
- */
public ${1:name}() {
- $0
}
-
- private method
- Private Method Definition
- Private Method Definition
-
-
- private ${1:name}() {
-
- $0
}
-
- import statement
- Import external module.
- Import external module.
-
-
- import { $0 } from "${1:module}";
-
-
- get
- Property getter
- Property getter
-
-
-
public get ${1:value}() : ${2:string} {
- ${3:return $0}
}
-
- log
- Log to the console
- Log to the console
-
-
- console.log($1);
-
$0
-
- warn
- Log warning to console
- Log warning to the console
-
-
- console.warn($1);
-
$0
-
- error
- Log error to console
- Log error to the console
-
-
- console.error($1);
-
$0
-
- prop
- Define a full property
- Define a full property
-
-
-
private _${1:value} : ${2:string};
public get
- ${1:value}() : ${2:string} {
- return this._${1:value};
}
public set ${1:value}(v :
- ${2:string}) {
- this._${1:value} = v;
}
-
- ref
- Triple-slash reference
- Triple-slash reference
-
-
- /// <reference path="$1" />
-
$0
-
- set
- Property setter
- Property setter
-
-
-
public set ${1:value}(v : ${2:string}) {
- this.$3 = v;
}
-
- throw
- Throw Exception
- Throw Exception
-
-
- throw new Error("$1");
-
$0
-
- for
- For Loop
- For Loop
-
-
- for (let ${1:index} = 0; ${1:index} < ${2:array}.length;
- ${1:index}++) {
-
- const ${3:element} = ${2:array}[${1:index}];
- $0
}
-
- foreach =>
- For-Each Loop using =>
- For-Each Loop using =>
-
-
- ${1:array}.forEach(${2:element} => {
-
- $0
});
-
- forin
- For-In Loop
- For-In Loop
-
-
- for (const ${1:key} in ${2:object}) {
-
- if (Object.prototype.hasOwnProperty.call(${2:object},
- ${1:key})) {
- const ${3:element} = ${2:object}[${1:key}];
- $0
- }
}
-
- forof
- For-Of Loop
- For-Of Loop
-
-
- for (const ${1:iterator} of ${2:object}) {
-
- $0
}
-
- forawaitof
- For-Await-Of Loop
- For-Await-Of Loop
-
-
- for await (const ${1:iterator} of ${2:object}) {
-
- $0
}
-
- function
- Function Statement
- Function Statement
-
-
- function ${1:name}(${2:params}:${3:type}) {
-
- $0
}
-
- if
- If Statement
- If Statement
-
-
- if (${1:condition}) {
-
- $0
}
-
- ifelse
- If-Else Statement
- If-Else Statement
-
-
- if (${1:condition}) {
-
- $0
} else {
-
}
-
- new
- New Statement
- New Statement
-
-
- const ${1:name} = new ${2:type}(${3:arguments});$0
-
-
- switch
- Switch Statement
- Switch Statement
-
-
- switch (${1:key}) {
-
- case ${2:value}:
- $0
- break;
- default:
- break;
}
-
- while
- While Statement
- While Statement
-
-
- while (${1:condition}) {
-
- $0
}
-
- dowhile
- Do-While Statement
- Do-While Statement
-
-
- do {
-
- $0
} while (${1:condition});
-
- trycatch
- Try-Catch Statement
- Try-Catch Statement
-
-
- try {
-
- $0
} catch (${1:error}) {
-
}
-
- settimeout
- Set Timeout Function
- Set Timeout Function
-
-
- setTimeout(() => {
-
- $0
}, ${1:timeout});
-
- #region
- Region Start
- Folding Region Start
-
-
- //#region $0
-
-
- #endregion
- Region End
- Folding Region End
-
-
- //#endregion
-
-
- newpromise
- new Promise
- Create a new Promise
-
-
- new Promise<$1:type>((resolve, reject) => {
-
- $1
})
-
- async function
- Async Function Statement
- Async Function Statement
-
-
- async function ${1:name}(${2:params}:${3:type}) {
-
- $0
}
-
-
- async arrow function
- Async Function Expression
- Async Function Expression
-
-
- async (${1:params}:${2:type}) => {
-
- $0
}
-
- VB
-
-
-
-
-
-
-
-
- Prefix
- Name
- Description
- Body
-
-
- for
- For Next Loop
- For Next Loop
-
-
- For ${1:index} As ${2:ObjectType} = ${3:lower} To
- ${4:Upper}
-
- $0
Next ${1:index}
-
- fore
- For Each...Next
- For Each...Next
-
-
- For Each ${1:Variable} As ${2:ObjectType} In
- ${3:Collection}
-
- $0
Next
-
- fori
- For i...Next i
- For i...Next i
-
-
- For i As ${1:Integer} = ${2:Lower} To ${3:Upper}
-
- $0
Next i
-
- forj
- For j...Next j
- For j...Next j
-
-
- For j As ${1:Integer} = ${2:Lower} To ${3:Upper}
-
- $0
Next j
-
- pf
- Public Function...
- Public Function...
-
-
- Public Function ${1:FunctionName}(${2:ParameterList}) As
- ${3:ReturnType}
-
- Try
- $0
- Catch ex As Exception
- End Try
- Return ${3:ReturnValue}
End Function
-
- ps
- Public Sub ...
- Public Sub ...
-
-
- Public Sub ${1:ProcedureName}(${2:ParameterList})
-
- Try
- $0
- Catch ex As Exception
- End Try
End Sub
-
- while
- While ... End While
- While ... End While
-
-
- While ${1:Boolean}
-
- $0
End While
-
- #Region
- Region Start
- Folding Region Start
-
-
- #Region $0
-
-
-
- #End Region
- Region End
- Folding Region End
-
-
- #End Region
-