From 2a5218e1584fc96049c67912d4ca38bdcd943e4c Mon Sep 17 00:00:00 2001 From: Sarah Date: Sun, 5 Oct 2025 11:13:06 -0300 Subject: [PATCH 1/7] fix: add self-closing tags to elements like input Justification: compatibility with React JSX --- snippets/html.json | 48 +++++++++++++++++++++++----------------------- 1 file changed, 24 insertions(+), 24 deletions(-) diff --git a/snippets/html.json b/snippets/html.json index 02456166..4e2589d0 100644 --- a/snippets/html.json +++ b/snippets/html.json @@ -43,7 +43,7 @@ }, "area": { "prefix": "area", - "body": "\"$4\"$5", + "body": "\"$4\"$5", "description": "HTML - Defines an area inside an image map", "scope": "text.html" }, @@ -73,7 +73,7 @@ }, "base": { "prefix": "base", - "body": "$3", + "body": "$3", "description": "HTML - Defines a base URL for all the links in a page", "scope": "text.html" }, @@ -109,7 +109,7 @@ }, "br": { "prefix": "br", - "body": "
", + "body": "
", "description": "HTML - Inserts a single line break", "scope": "text.html" }, @@ -145,7 +145,7 @@ }, "col": { "prefix": "col", - "body": "$2", + "body": "$2", "description": "HTML - Defines attributes for table columns", "scope": "text.html" }, @@ -223,7 +223,7 @@ }, "embed": { "prefix": "embed", - "body": "$2", + "body": "$2", "description": "HTML - Defines external interactive content ot plugin", "scope": "text.html" }, @@ -313,7 +313,7 @@ }, "hr": { "prefix": "hr", - "body": "
", + "body": "
", "description": "HTML - Defines a horizontal rule", "scope": "text.html" }, @@ -356,13 +356,13 @@ }, "img": { "prefix": "img", - "body": "\"$2\"$3", + "body": "\"$2\"$3", "description": "HTML - Defines an image", "scope": "text.html" }, "input": { "prefix": "input", - "body": "$4", + "body": "$4", "description": "HTML - Defines an input field", "scope": "text.html" }, @@ -374,7 +374,7 @@ }, "keygen": { "prefix": "keygen", - "body": "$2", + "body": "$2", "description": "HTML - Defines a generated key in a form", "scope": "text.html" }, @@ -440,7 +440,7 @@ }, "meta": { "prefix": "meta", - "body": "$3", + "body": "$3", "description": "HTML - Defines meta information", "scope": "text.html" }, @@ -500,7 +500,7 @@ }, "param": { "prefix": "param", - "body": "$3", + "body": "$3", "description": "HTML - Defines a parameter for an object", "scope": "text.html" }, @@ -680,7 +680,7 @@ }, "track": { "prefix": "track", - "body": "$5", + "body": "$5", "description": "HTML - Defines a table row", "scope": "text.html" }, @@ -712,73 +712,73 @@ "description": "HTML - Defines a video", "scope": "text.html" }, -"div.": { + "div.": { "prefix": "div.", "body": ["
", "\t$2", "
"], "description": "HTML - Defines a section in a document", "scope": "text.html" }, -"div#": { + "div#": { "prefix": "div#", "body": ["
", "\t$2", "
"], "description": "HTML - Defines a section in a document", "scope": "text.html" }, -"div.#": { + "div.#": { "prefix": "div.#", "body": ["
", "\t$3", "
"], "description": "HTML - Defines a section in a document", "scope": "text.html" }, -"p.": { + "p.": { "prefix": "p.", "body": ["

$2

"], "description": "HTML - Defines a paragraph", "scope": "text.html" }, -"p#": { + "p#": { "prefix": "p#", "body": ["

$2

"], "description": "HTML - Defines a paragraph", "scope": "text.html" }, -"p.#": { + "p.#": { "prefix": "p.#", "body": ["

$3

"], "description": "HTML - Defines a paragraph", "scope": "text.html" }, -"ul.": { + "ul.": { "prefix": "ul.", "body": [""], "description": "HTML - Defines an unordered list", "scope": "text.html" }, -"ul#": { + "ul#": { "prefix": "ul#", "body": [""], "description": "HTML - Defines an unordered list", "scope": "text.html" }, -"ul.#": { + "ul.#": { "prefix": "ul.#", "body": [""], "description": "HTML - Defines an unordered list", "scope": "text.html" }, -"ol.": { + "ol.": { "prefix": "ol.", "body": ["
    ", "\t$2", "
"], "description": "HTML - Defines an ordered list", "scope": "text.html" }, -"ol#": { + "ol#": { "prefix": "ol#", "body": ["
    ", "\t$2", "
"], "description": "HTML - Defines an ordered list", "scope": "text.html" }, -"ol.#": { + "ol.#": { "prefix": "ol.#", "body": ["
    ", "\t$3", "
"], "description": "HTML - Defines an ordered list", From f3b5ac272541d52d5ec3f43ed90a5e5bc8b2c466 Mon Sep 17 00:00:00 2001 From: Sarah Date: Sun, 5 Oct 2025 11:13:44 -0300 Subject: [PATCH 2/7] add: pure javascript, typescriptreact and pure typescript to html --- package.json | 115 ++++++++++++++++++++++++++++++++++++++------------- 1 file changed, 87 insertions(+), 28 deletions(-) diff --git a/package.json b/package.json index c254ebec..d15b1c62 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,9 @@ "path": "./snippets/global.json" }, { - "language": ["license"], + "language": [ + "license" + ], "path": "./snippets/license.json" }, { @@ -37,7 +39,10 @@ "path": "./snippets/cpp/cppdoc.json" }, { - "language": ["csharp", "cs"], + "language": [ + "csharp", + "cs" + ], "path": "./snippets/csharp/csharp.json" }, { @@ -49,7 +54,10 @@ "path": "./snippets/editorconfig.json" }, { - "language": ["gitcommit", "NeogitCommitMessage"], + "language": [ + "gitcommit", + "NeogitCommitMessage" + ], "path": "./snippets/gitcommit.json" }, { @@ -69,7 +77,10 @@ "path": "./snippets/elixir.json" }, { - "language": ["eelixir", "heex"], + "language": [ + "eelixir", + "heex" + ], "path": "./snippets/eelixir.json" }, { @@ -193,7 +204,12 @@ "path": "./snippets/systemverilog.json" }, { - "language": ["shellscript", "shell", "sh", "zsh"], + "language": [ + "shellscript", + "shell", + "sh", + "zsh" + ], "path": "./snippets/shell/shell.json" }, { @@ -201,11 +217,17 @@ "path": "./snippets/shell/shelldoc.json" }, { - "language": ["markdown", "rmd"], + "language": [ + "markdown", + "rmd" + ], "path": "./snippets/markdown.json" }, { - "language": ["plaintex", "tex"], + "language": [ + "plaintex", + "tex" + ], "path": "./snippets/latex.json" }, { @@ -235,6 +257,9 @@ "pug", "eruby", "javascriptreact", + "javascript", + "typescriptreact", + "typescript", "htmldjango", "astro", "blade" @@ -242,11 +267,22 @@ "path": "./snippets/html.json" }, { - "language": ["css", "scss", "sass", "less", "stylus"], + "language": [ + "css", + "scss", + "sass", + "less", + "stylus" + ], "path": "./snippets/css.json" }, { - "language": ["javascript", "javascriptreact", "vue", "svelte"], + "language": [ + "javascript", + "javascriptreact", + "vue", + "svelte" + ], "path": "./snippets/javascript/javascript.json" }, { @@ -258,7 +294,10 @@ "path": "./snippets/javascript/tsdoc.json" }, { - "language": ["typescript", "typescriptreact"], + "language": [ + "typescript", + "typescriptreact" + ], "path": "./snippets/javascript/typescript.json" }, { @@ -286,7 +325,10 @@ "path": "./snippets/javascript/react-native-ts.json" }, { - "language": ["javascriptreact", "typescriptreact"], + "language": [ + "javascriptreact", + "typescriptreact" + ], "path": "./snippets/javascript/react-es7.json" }, { @@ -382,7 +424,10 @@ "path": "./snippets/frameworks/django/views.json" }, { - "language": ["djangohtml", "htmldjango"], + "language": [ + "djangohtml", + "htmldjango" + ], "path": "./snippets/frameworks/djangohtml.json" }, { @@ -426,15 +471,24 @@ "path": "./snippets/kotlin/kdoc.json" }, { - "language": ["plaintex", "tex"], + "language": [ + "plaintex", + "tex" + ], "path": "./snippets/latex/latex-snippets.json" }, { - "language": ["plaintex", "tex"], + "language": [ + "plaintex", + "tex" + ], "path": "./snippets/latex/vscode-latex-snippets.json" }, { - "language": ["bibtex", "bib"], + "language": [ + "bibtex", + "bib" + ], "path": "./snippets/latex/bibtex.json" }, { @@ -458,7 +512,10 @@ "path": "./snippets/frameworks/blade/snippets.json" }, { - "language": ["r", "rmd"], + "language": [ + "r", + "rmd" + ], "path": "./snippets/r.json" }, { @@ -534,7 +591,10 @@ "path": "./snippets/frameworks/edge.json" }, { - "language": ["powershell", "ps1"], + "language": [ + "powershell", + "ps1" + ], "path": "./snippets/PowerShell.json" }, { @@ -581,22 +641,21 @@ "path": "./snippets/beancount.json" }, { - "language": "rst", - "path": "./snippets/rst.json" + "language": "rst", + "path": "./snippets/rst.json" + }, + { + "language": "loremipsum", + "path": "./snippets/loremipsum.json" }, { - "language": "loremipsum", - "path": "./snippets/loremipsum.json" + "language": "cmake", + "path": "./snippets/cmake.json" }, - { - "language": "cmake", - "path": "./snippets/cmake.json" - }, { - "language": "zig", - "path": "./snippets/zig.json" + "language": "zig", + "path": "./snippets/zig.json" } ] } } - From 182408d069d112082882dd9bb175f5d6b9588fa6 Mon Sep 17 00:00:00 2001 From: Sarah Date: Sun, 5 Oct 2025 12:41:33 -0300 Subject: [PATCH 3/7] add: eadf (export default async function) snippet --- snippets/javascript/javascript.json | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/snippets/javascript/javascript.json b/snippets/javascript/javascript.json index 5500ecc8..6cb978ec 100644 --- a/snippets/javascript/javascript.json +++ b/snippets/javascript/javascript.json @@ -319,6 +319,10 @@ "prefix": "edf", "body": "export default function ${1:name} (${2:arguments}) {\n\t${0}\n}" }, + "module default export async function": { + "prefix": "edaf", + "body": "export default async function ${1:name} (${2:arguments}) {\n\t${0}\n}" + }, "import module": { "prefix": "im", "body": "import ${2:*} from '${1:module}'" From 73077ac71a94368831c1fd7070d156356a6b4be0 Mon Sep 17 00:00:00 2001 From: Sarah Date: Mon, 6 Oct 2025 15:54:48 -0300 Subject: [PATCH 4/7] add: export snippets for ts --- snippets/javascript/typescript.json | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/snippets/javascript/typescript.json b/snippets/javascript/typescript.json index 29b447a8..04fbe16b 100644 --- a/snippets/javascript/typescript.json +++ b/snippets/javascript/typescript.json @@ -168,6 +168,30 @@ "body": ["if (${1:condition}) {", "\t$2", "} else {", "\t$0", "}"], "description": "If-Else Statement" }, + "module export": { + "prefix": "e", + "body": "export ${1:member}" + }, + "module export const": { + "prefix": "ec", + "body": "export const ${1:member}: ${2:Type} = ${3:value}" + }, + "export named function": { + "prefix": "ef", + "body": "export function ${1:member}(${2:arguments}): ${3:ReturnType} {\n\t${0}\n}" + }, + "module default export": { + "prefix": "ed", + "body": "export default ${1:member}" + }, + "module default export function": { + "prefix": "edf", + "body": "export default function ${1:name}(${2:arguments}): ${3:ReturnType} {\n\t${0}\n}" + }, + "module default export async function": { + "prefix": "edaf", + "body": "export default async function ${1:name}(${2:arguments}): Promise<${3:ReturnType}> {\n\t${0}\n}" + }, "New Statement": { "prefix": "new", "body": ["const ${1:name} = new ${2:type}(${3:arguments});$0"], From dae1e0261d9d064a2a4117bcbd046f5b7d8c78e8 Mon Sep 17 00:00:00 2001 From: Sarah Date: Mon, 6 Oct 2025 16:39:04 -0300 Subject: [PATCH 5/7] refactor: remove obsolete React patterns and add modern TypeScript component exports - Remove class component snippets (rcc, rcjc, rccp, rcfc) - deprecated since React 16.8 Hooks introduction - Remove deprecated lifecycle methods (componentWillMount, componentWillReceiveProps, componentWillUpdate) - incompatible with React 18+ Concurrent Mode - Remove all PropTypes snippets - TypeScript provides superior compile-time type checking, making runtime PropTypes validation redundant - Remove class-specific destructuring helpers (this.props/this.state) and setState methods - only relevant for class components - Remove library-specific snippet (rfce with Emotion) - not generic enough for core collection - Keep valid class lifecycle methods (componentDidMount, componentDidUpdate, componentWillUnmount, getDerivedStateFromProps, shouldComponentUpdate) for legacy class components that still exist in codebases - Keep modern hooks (useState, useEffect, useContext, useRef, useCallback, useMemo), generic JSX helpers, and testing blocks - Add modern TypeScript component export patterns (erc, erct, edrc, edrct, edrac, edract) aligned with current React best practices --- snippets/javascript/react-ts.json | 552 ++++++++++-------------------- 1 file changed, 179 insertions(+), 373 deletions(-) diff --git a/snippets/javascript/react-ts.json b/snippets/javascript/react-ts.json index 372eb6d1..62cb9220 100644 --- a/snippets/javascript/react-ts.json +++ b/snippets/javascript/react-ts.json @@ -1,375 +1,181 @@ { - "destructuring of props": { - "prefix": "dp", - "body": ["const { ${1:name} } = this.props"] - }, - "destructuring of state": { - "prefix": "ds", - "body": ["const { ${1:name} } = this.state"] - }, - "reactClassComponent": { - "prefix": "rcc", - "body": "import { Component } from 'react'\n\nclass ${TM_FILENAME_BASE} extends Component {\n\trender () {\n\t\treturn (\n\t\t\t
\n\t\t\t\t$0\n\t\t\t
\n\t\t)\n\t}\n}\n\nexport default ${1}", - "description": "Creates a React component class" - }, - "reactJustClassComponent": { - "prefix": "rcjc", - "body": "class ${TM_FILENAME_BASE} extends Component {\n\trender () {\n\t\treturn (\n\t\t\t
\n\t\t\t\t$0\n\t\t\t
\n\t\t)\n\t}\n}\n", - "description": "Creates a React component class" - }, - "reactClassComponentPropTypes": { - "prefix": "rccp", - "body": "import { Component, PropTypes } from 'react'\n\nclass ${TM_FILENAME_BASE} extends Component {\n\trender () {\n\t\treturn (\n\t\t\t
\n\t\t\t\t$0\n\t\t\t
\n\t\t)\n\t}\n}\n\n${1}.propTypes = {\n\n}\n\nexport default ${1}", - "description": "Creates a React component class with PropTypes" - }, - "reactClassComponentWithMethods": { - "prefix": "rcfc", - "body": "import { Component, PropTypes } from 'react'\n\nclass ${TM_FILENAME_BASE} extends Component {\n\tconstructor(props) {\n\t\tsuper(props)\n\n\t}\n\n\tcomponentWillMount () {\n\n\t}\n\n\tcomponentDidMount () {\n\n\t}\n\n\tcomponentWillReceiveProps (nextProps) {\n\n\t}\n\n\tshouldComponentUpdate (nextProps, nextState) {\n\n\t}\n\n\tcomponentWillUpdate (nextProps, nextState) {\n\n\t}\n\n\tcomponentDidUpdate (prevProps, prevState) {\n\n\t}\n\n\tcomponentWillUnmount () {\n\n\t}\n\n\trender () {\n\t\treturn (\n\t\t\t
\n\n\t\t\t
\n\t\t)\n\t}\n}\n\n${1}.propTypes = {\n\n}\n\nexport default ${1}", - "description": "Creates a React component class with PropTypes and all lifecycle methods" - }, - "reactFunctionComponent": { - "prefix": "rfc", - "body": "export const ${TM_FILENAME_BASE} = (props : {}) => {\n\treturn (\n\t\t
\n\t\t\t$0\n\t\t
\n\t)\n}", - "description": "Creates a React functional component without PropTypes" - }, - "reactFunctionComponentWithEmotion": { - "prefix": "rfce", - "body": "import { css } from '@emotion/core'\nexport const ${TM_FILENAME_BASE} = (props: {}) => {\n\treturn (\n\t\t
\n\t\t\t$0\n\t\t
\n\t)\n}", - "description": "Creates a React functional component with emotion import" - }, - "classConstructor": { - "prefix": "con", - "body": "constructor (props) {\n\tsuper(props)\n\t$0\n}\n", - "description": "Adds a default constructor for the class that contains props as arguments" - }, - "classConstructorContext": { - "prefix": "conc", - "body": "constructor (props, context) {\n\tsuper(props, context)\n\t$0\n}\n", - "description": "Adds a default constructor for the class that contains props and context as arguments" - }, - "componentWillMount": { - "prefix": "cwm", - "body": "\ncomponentWillMount () {\n\t$0\n}\n", - "description": "Invoked once, both on the client and server, immediately before the initial rendering occurs" - }, - "componentDidMount": { - "prefix": "cdm", - "body": "componentDidMount () {\n\t$0\n}\n", - "description": "Invoked once, only on the client (not on the server), immediately after the initial rendering occurs." - }, - "componentWillReceiveProps": { - "prefix": "cwr", - "body": "componentWillReceiveProps (nextProps) {\n\t$0\n}\n", - "description": "Invoked when a component is receiving new props. This method is not called for the initial render." - }, - "componentGetDerivedStateFromProps": { - "prefix": "cgd", - "body": "\nstatic getDerivedStateFromProps(nextProps, prevState) {\n\t$0\n}\n", - "description": "Invoked after a component is instantiated as well as when it receives new props. It should return an object to update state, or null to indicate that the new props do not require any state updates." - }, - "shouldComponentUpdate": { - "prefix": "scu", - "body": "shouldComponentUpdate (nextProps, nextState) {\n\t$0\n}\n", - "description": "Invoked before rendering when new props or state are being received. " - }, - "componentWillUpdate": { - "prefix": "cwup", - "body": "componentWillUpdate (nextProps, nextState) {\n\t$0\n}\n", - "description": "Invoked immediately before rendering when new props or state are being received." - }, - "componentDidUpdate": { - "prefix": "cdup", - "body": "componentDidUpdate (prevProps, prevState) {\n\t$0\n}\n", - "description": "Invoked immediately after the component's updates are flushed to the DOM." - }, - "componentWillUnmount": { - "prefix": "cwun", - "body": "componentWillUnmount () {\n\t$0\n}\n", - "description": "Invoked immediately before a component is unmounted from the DOM." - }, - "componentRender": { - "prefix": "ren", - "body": "render () {\n\treturn (\n\t\t
\n\t\t\t$0\n\t\t
\n\t)\n}", - "description": "When called, it should examine this.props and this.state and return a single child element." - }, - "componentSetStateObject": { - "prefix": "sst", - "body": "this.setState($0)", - "description": "Performs a shallow merge of nextState into current state" - }, - "componentSetStateFunc": { - "prefix": "ssf", - "body": "this.setState((state, props) => { return { $0 }})\n", - "description": "Performs a shallow merge of nextState into current state" - }, - "componentProps": { - "prefix": "tp", - "body": "this.props.$0", - "description": "Access component's props" - }, - "componentState": { - "prefix": "ts", - "body": "this.state.$0", - "description": "Access component's state" - }, - "propTypes": { - "prefix": "rpt", - "body": "$1.propTypes = {\n\t$2\n}", - "description": "Creates empty propTypes declaration" - }, - "propTypeArray": { - "prefix": "pta", - "body": "PropTypes.array,", - "description": "Array prop type" - }, - "propTypeArrayRequired": { - "prefix": "ptar", - "body": "PropTypes.array.isRequired,", - "description": "Array prop type required" - }, - "propTypeBool": { - "prefix": "ptb", - "body": "PropTypes.bool,", - "description": "Bool prop type" - }, - "propTypeBoolRequired": { - "prefix": "ptbr", - "body": "PropTypes.bool.isRequired,", - "description": "Bool prop type required" - }, - "propTypeFunc": { - "prefix": "ptf", - "body": "PropTypes.func,", - "description": "Func prop type" - }, - "propTypeFuncRequired": { - "prefix": "ptfr", - "body": "PropTypes.func.isRequired,", - "description": "Func prop type required" - }, - "propTypeNumber": { - "prefix": "ptn", - "body": "PropTypes.number,", - "description": "Number prop type" - }, - "propTypeNumberRequired": { - "prefix": "ptnr", - "body": "PropTypes.number.isRequired,", - "description": "Number prop type required" - }, - "propTypeObject": { - "prefix": "pto", - "body": "PropTypes.object,", - "description": "Object prop type" - }, - "propTypeObjectRequired": { - "prefix": "ptor", - "body": "PropTypes.object.isRequired,", - "description": "Object prop type required" - }, - "propTypeString": { - "prefix": "pts", - "body": "PropTypes.string,", - "description": "String prop type" - }, - "propTypeStringRequired": { - "prefix": "ptsr", - "body": "PropTypes.string.isRequired,", - "description": "String prop type required" - }, - "propTypeNode": { - "prefix": "ptnd", - "body": "PropTypes.node,", - "description": "Anything that can be rendered: numbers, strings, elements or an array" - }, - "propTypeNodeRequired": { - "prefix": "ptndr", - "body": "PropTypes.node.isRequired,", - "description": "Anything that can be rendered: numbers, strings, elements or an array required" - }, - "propTypeElement": { - "prefix": "ptel", - "body": "PropTypes.element,", - "description": "React element prop type" - }, - "propTypeElementRequired": { - "prefix": "ptelr", - "body": "PropTypes.element.isRequired,", - "description": "React element prop type required" - }, - "propTypeInstanceOf": { - "prefix": "pti", - "body": "PropTypes.instanceOf($0),", - "description": "Is an instance of a class prop type" - }, - "propTypeInstanceOfRequired": { - "prefix": "ptir", - "body": "PropTypes.instanceOf($0).isRequired,", - "description": "Is an instance of a class prop type required" - }, - "propTypeEnum": { - "prefix": "pte", - "body": "PropTypes.oneOf(['$0']),", - "description": "Prop type limited to specific values by treating it as an enum" - }, - "propTypeEnumRequired": { - "prefix": "pter", - "body": "PropTypes.oneOf(['$0']).isRequired,", - "description": "Prop type limited to specific values by treating it as an enum required" - }, - "propTypeOneOfType": { - "prefix": "ptet", - "body": "PropTypes.oneOfType([\n\t$0\n]),", - "description": "An object that could be one of many types" - }, - "propTypeOneOfTypeRequired": { - "prefix": "ptetr", - "body": "PropTypes.oneOfType([\n\t$0\n]).isRequired,", - "description": "An object that could be one of many types required" - }, - "propTypeArrayOf": { - "prefix": "ptao", - "body": "PropTypes.arrayOf($0),", - "description": "An array of a certain type" - }, - "propTypeArrayOfRequired": { - "prefix": "ptaor", - "body": "PropTypes.arrayOf($0).isRequired,", - "description": "An array of a certain type required" - }, - "propTypeObjectOf": { - "prefix": "ptoo", - "body": "PropTypes.objectOf($0),", - "description": "An object with property values of a certain type" - }, - "propTypeObjectOfRequired": { - "prefix": "ptoor", - "body": "PropTypes.objectOf($0).isRequired,", - "description": "An object with property values of a certain type required" - }, - "propTypeShape": { - "prefix": "ptsh", - "body": "PropTypes.shape({\n\t$0\n}),", - "description": "An object taking on a particular shape" - }, - "propTypeShapeRequired": { - "prefix": "ptshr", - "body": "PropTypes.shape({\n\t$0\n}).isRequired,", - "description": "An object taking on a particular shape required" - }, - "jsx element": { - "prefix": "j", - "body": "<${1:elementName}>\n\t$0\n", - "description": "an element" - }, - "jsx element self closed": { - "prefix": "jc", - "body": "<${1:elementName} />", - "description": "an element self closed" - }, - "jsx elements map": { - "prefix": "jm", - "body": "{${1:array}.map((item) => <${2:elementName} key={item.id}>\n\t$0\n)}", - "description": "an element self closed" - }, - "jsx elements map with return": { - "prefix": "jmr", - "body": "{${1:array}.map((item) => {\n\treturn <${2:elementName} key={item.id}>\n\t$0\n\n})}", - "description": "an element self closed" - }, - "jsx element wrap selection": { - "prefix": "jsx wrap selection with element", - "body": "<${1:elementName}>\n\t{$TM_SELECTED_TEXT}\n", - "description": "an element" - }, - "useState": { - "prefix": "us", - "body": "const [${1:state}, set${1/(.*)/${1:/capitalize}/}] = useState(${2:initValue})$0", - "description": "React useState() hook" - }, - "useEffect": { - "prefix": "ue", - "body": ["useEffect(() => {", "\t$1", "}, [${3:dependencies}])$0"], - "description": "React useEffect() hook" - }, - "useEffect with cleanup": { - "prefix": "uec", - "body": [ - "useEffect(() => {", - "\t$1", - "\n\treturn () => {", - "\t\t$2", - "\t}", - "}, [${3:dependencies}])$0" - ], - "description": "React useEffect() hook with a cleanup function" - }, - "createContext": { - "prefix": "cc", - "body": [ - "export const $1 = createContext<$2>(", - "\t(null as any) as $2", - ")" - ], - "description": "creates a react context" - }, - "useContext": { - "prefix": "uc", - "body": ["const $1 = useContext($2)$0"], - "description": "React useContext() hook" - }, - "useRef": { - "prefix": "ur", - "body": ["const ${1:elName}El = useRef(null)$0"], - "description": "React useRef() hook" - }, - "useCallback": { - "prefix": "ucb", - "body": [ - "const ${1:memoizedCallback} = useCallback(", - "\t() => {", - "\t\t${2:doSomething}(${3:a}, ${4:b})", - "\t},", - "\t[${5:a}, ${6:b}],", - ")$0" - ], - "description": "React useCallback() hook" - }, - "useMemo": { - "prefix": "ume", - "body": [ - "const ${1:memoizedValue} = useMemo(() => ${2:computeExpensiveValue}(${3:a}, ${4:b}), [${5:a}, ${6:b}])$0" - ], - "description": "React useMemo() hook" - }, - "createReactHook": { - "prefix": "crh", - "body": ["export const use$0 = () => {", "", "}"], - "description": "Create React Hook" - }, - "createReactHookWithName": { - "prefix": "crhn", - "body": ["export const ${TM_FILENAME_BASE} = () => {", "\t$0", "}"], - "description": "Create React Hook using File name" - }, - "describeBlock": { - "prefix": "desc", - "body": ["describe('$1', () => {", " $0", "})", ""], - "description": "Testing `describe` block" - }, - "testBlock": { - "prefix": "test", - "body": ["test('should $1', () => {", " $0", "})", ""], - "description": "Testing `test` block" - }, - "itBlock": { - "prefix": "tit", - "body": ["it('should $1', () => {", " $0", "})", ""], - "description": "Testing `it` block" - }, - "itAsyncBlock": { - "prefix": "tita", - "body": ["it('should $1', async () => {", " $0", "})", ""], - "description": "Testing async `it` block" - } + "classConstructor": { + "prefix": "con", + "body": "constructor (props) {\n\tsuper(props)\n\t$0\n}\n", + "description": "Adds a default constructor for the class that contains props as arguments" + }, + "classConstructorContext": { + "prefix": "conc", + "body": "constructor (props, context) {\n\tsuper(props, context)\n\t$0\n}\n", + "description": "Adds a default constructor for the class that contains props and context as arguments" + }, + "componentDidMount": { + "prefix": "cdm", + "body": "componentDidMount () {\n\t$0\n}\n", + "description": "Invoked once, only on the client (not on the server), immediately after the initial rendering occurs." + }, + "componentGetDerivedStateFromProps": { + "prefix": "cgd", + "body": "\nstatic getDerivedStateFromProps(nextProps, prevState) {\n\t$0\n}\n", + "description": "Invoked after a component is instantiated as well as when it receives new props. It should return an object to update state, or null to indicate that the new props do not require any state updates." + }, + "shouldComponentUpdate": { + "prefix": "scu", + "body": "shouldComponentUpdate (nextProps, nextState) {\n\t$0\n}\n", + "description": "Invoked before rendering when new props or state are being received. " + }, + "componentDidUpdate": { + "prefix": "cdup", + "body": "componentDidUpdate (prevProps, prevState) {\n\t$0\n}\n", + "description": "Invoked immediately after the component's updates are flushed to the DOM." + }, + "componentWillUnmount": { + "prefix": "cwun", + "body": "componentWillUnmount () {\n\t$0\n}\n", + "description": "Invoked immediately before a component is unmounted from the DOM." + }, + "componentRender": { + "prefix": "ren", + "body": "render () {\n\treturn (\n\t\t
\n\t\t\t$0\n\t\t
\n\t)\n}", + "description": "When called, it should examine this.props and this.state and return a single child element." + }, + "jsx element": { + "prefix": "j", + "body": "<${1:elementName}>\n\t$0\n", + "description": "an element" + }, + "jsx element self closed": { + "prefix": "jc", + "body": "<${1:elementName} />", + "description": "an element self closed" + }, + "jsx elements map": { + "prefix": "jm", + "body": "{${1:array}.map((item) => <${2:elementName} key={item.id}>\n\t$0\n)}", + "description": "an element self closed" + }, + "jsx elements map with return": { + "prefix": "jmr", + "body": "{${1:array}.map((item) => {\n\treturn <${2:elementName} key={item.id}>\n\t$0\n\n})}", + "description": "an element self closed" + }, + "jsx element wrap selection": { + "prefix": "jsx wrap selection with element", + "body": "<${1:elementName}>\n\t{$TM_SELECTED_TEXT}\n", + "description": "an element" + }, + "useState": { + "prefix": "us", + "body": "const [${1:state}, set${1/(.*)/${1:/capitalize}/}] = useState(${2:initValue})$0", + "description": "React useState() hook" + }, + "useEffect": { + "prefix": "ue", + "body": ["useEffect(() => {", "\t$1", "}, [${3:dependencies}])$0"], + "description": "React useEffect() hook" + }, + "useEffect with cleanup": { + "prefix": "uec", + "body": [ + "useEffect(() => {", + "\t$1", + "\n\treturn () => {", + "\t\t$2", + "\t}", + "}, [${3:dependencies}])$0" + ], + "description": "React useEffect() hook with a cleanup function" + }, + "createContext": { + "prefix": "cc", + "body": [ + "export const $1 = createContext<$2>(", + "\t(null as any) as $2", + ")" + ], + "description": "creates a react context" + }, + "useContext": { + "prefix": "uc", + "body": ["const $1 = useContext($2)$0"], + "description": "React useContext() hook" + }, + "useRef": { + "prefix": "ur", + "body": ["const ${1:elName}El = useRef(null)$0"], + "description": "React useRef() hook" + }, + "useCallback": { + "prefix": "ucb", + "body": [ + "const ${1:memoizedCallback} = useCallback(", + "\t() => {", + "\t\t${2:doSomething}(${3:a}, ${4:b})", + "\t},", + "\t[${5:a}, ${6:b}],", + ")$0" + ], + "description": "React useCallback() hook" + }, + "useMemo": { + "prefix": "ume", + "body": [ + "const ${1:memoizedValue} = useMemo(() => ${2:computeExpensiveValue}(${3:a}, ${4:b}), [${5:a}, ${6:b}])$0" + ], + "description": "React useMemo() hook" + }, + "createReactHook": { + "prefix": "crh", + "body": ["export const use$0 = () => {", "", "}"], + "description": "Create React Hook" + }, + "createReactHookWithName": { + "prefix": "crhn", + "body": ["export const ${TM_FILENAME_BASE} = () => {", "\t$0", "}"], + "description": "Create React Hook using File name" + }, + "describeBlock": { + "prefix": "desc", + "body": ["describe('$1', () => {", " $0", "})", ""], + "description": "Testing `describe` block" + }, + "testBlock": { + "prefix": "test", + "body": ["test('should $1', () => {", " $0", "})", ""], + "description": "Testing `test` block" + }, + "itBlock": { + "prefix": "tit", + "body": ["it('should $1', () => {", " $0", "})", ""], + "description": "Testing `it` block" + }, + "itAsyncBlock": { + "prefix": "tita", + "body": ["it('should $1', async () => {", " $0", "})", ""], + "description": "Testing async `it` block" + }, + "export react component": { + "prefix": "erc", + "body": "export const ${1:ComponentName} = (${2:props}) => {\n\t${0}\n}" + }, + "export react component typed": { + "prefix": "erct", + "body": "export const ${1:ComponentName} = (${2:props}: ${3:Props}) => {\n\t${0}\n}" + }, + "export default react component": { + "prefix": "edrc", + "body": "export default function ${1:ComponentName}(${2:props}) {\n\t${0}\n}" + }, + "export default react component typed": { + "prefix": "edrct", + "body": "export default function ${1:ComponentName}(${2:props}: ${3:Props}) {\n\t${0}\n}" + }, + "export default async react component": { + "prefix": "edrac", + "body": "export default async function ${1:ComponentName}(${2:props}) {\n\t${0}\n}" + }, + "export default async react component typed": { + "prefix": "edract", + "body": "export default async function ${1:ComponentName}(${2:props}: ${3:Props}) {\n\t${0}\n}" + } } From 3ecb3fdd8df320d8e3250442404c60fee90a4274 Mon Sep 17 00:00:00 2001 From: Sarah Date: Tue, 7 Oct 2025 12:07:16 -0300 Subject: [PATCH 6/7] add: label html element with htmlFor (compatibility with react) --- snippets/javascript/react-ts.json | 5 + snippets/javascript/react.json | 741 +++++++++++++++--------------- 2 files changed, 378 insertions(+), 368 deletions(-) diff --git a/snippets/javascript/react-ts.json b/snippets/javascript/react-ts.json index 62cb9220..b91ca457 100644 --- a/snippets/javascript/react-ts.json +++ b/snippets/javascript/react-ts.json @@ -1,4 +1,9 @@ { + "label": { + "prefix": "label", + "body": "$3", + "description": "JSX/TSX - label with htmlFor" + }, "classConstructor": { "prefix": "con", "body": "constructor (props) {\n\tsuper(props)\n\t$0\n}\n", diff --git a/snippets/javascript/react.json b/snippets/javascript/react.json index a41e83d9..1cd2f7e8 100644 --- a/snippets/javascript/react.json +++ b/snippets/javascript/react.json @@ -1,370 +1,375 @@ { - "destructuring of props": { - "prefix": "dp", - "body": ["const { ${1:name} } = this.props"] - }, - "destructuring of state": { - "prefix": "ds", - "body": ["const { ${1:name} } = this.state"] - }, - "if falsy return null": { - "prefix": "ifr", - "body": "if (!${1:condition}) {\n\treturn null\n}" - }, - "reactClassComponent": { - "prefix": "rcc", - "body": "import { Component } from 'react'\n\nclass ${TM_FILENAME_BASE} extends Component {\n\trender () {\n\t\treturn (\n\t\t\t
\n\t\t\t\t$0\n\t\t\t
\n\t\t)\n\t}\n}\n\nexport default ${1}", - "description": "Creates a React component class" - }, - "reactJustClassComponent": { - "prefix": "rcjc", - "body": "class ${TM_FILENAME_BASE} extends Component {\n\trender () {\n\t\treturn (\n\t\t\t
\n\t\t\t\t$0\n\t\t\t
\n\t\t)\n\t}\n}\n", - "description": "Creates a React component class" - }, - "reactClassComponentPropTypes": { - "prefix": "rccp", - "body": "import { Component, PropTypes } from 'react'\n\nclass ${TM_FILENAME_BASE} extends Component {\n\trender () {\n\t\treturn (\n\t\t\t
\n\t\t\t\t$0\n\t\t\t
\n\t\t)\n\t}\n}\n\n${1}.propTypes = {\n\n}\n\nexport default ${1}", - "description": "Creates a React component class with PropTypes" - }, - "reactClassComponentWithMethods": { - "prefix": "rcfc", - "body": "import { Component, PropTypes } from 'react'\n\nclass ${TM_FILENAME_BASE} extends Component {\n\tconstructor(props) {\n\t\tsuper(props)\n\n\t}\n\n\tcomponentWillMount () {\n\n\t}\n\n\tcomponentDidMount () {\n\n\t}\n\n\tcomponentWillReceiveProps (nextProps) {\n\n\t}\n\n\tshouldComponentUpdate (nextProps, nextState) {\n\n\t}\n\n\tcomponentWillUpdate (nextProps, nextState) {\n\n\t}\n\n\tcomponentDidUpdate (prevProps, prevState) {\n\n\t}\n\n\tcomponentWillUnmount () {\n\n\t}\n\n\trender () {\n\t\treturn (\n\t\t\t
\n\n\t\t\t
\n\t\t)\n\t}\n}\n\n${1}.propTypes = {\n\n}\n\nexport default ${1}", - "description": "Creates a React component class with PropTypes and all lifecycle methods" - }, - "reactFunctionComponent": { - "prefix": "rfc", - "body": "\nconst ${TM_FILENAME_BASE} = () => {\n\treturn (\n\t\t
\n\t\t\t$0\n\t\t
\n\t)\n}\n\nexport default ${TM_FILENAME_BASE}", - "description": "Creates a React function component without PropTypes" - }, - "reactFunctionComponentWithCustomName": { - "prefix": "rfcn", - "body": "\nconst ${1:functionname} = () => {\n\treturn (\n\t\t
\n\t\t\t$0\n\t\t
\n\t)\n}\n\nexport default ${1:functionname}", - "description": "Creates a React function component with custom name" - }, - "reactFunctionComponentWithEmotion": { - "prefix": "rfce", - "body": "import { css } from '@emotion/core'\n\nexport const ${TM_FILENAME_BASE} = () => {\n\treturn (\n\t\t
\n\t\t\t$0\n\t\t
\n\t)\n}", - "description": "Creates a React functional component with emotion" - }, - "reactStatelessProps": { - "prefix": "rfcp", - "body": "import { PropTypes } from 'react'\n\nconst ${TM_FILENAME_BASE} = props => {\n\treturn (\n\t\t
\n\t\t\t\n\t\t
\n\t)\n}\n\n${1}.propTypes = {\n\t$0\n}\n\nexport default ${1}", - "description": "Creates a React function component with PropTypes" - }, - "classConstructor": { - "prefix": "con", - "body": "constructor (props) {\n\tsuper(props)\n\t$0\n}\n", - "description": "Adds a default constructor for the class that contains props as arguments" - }, - "classConstructorContext": { - "prefix": "conc", - "body": "constructor (props, context) {\n\tsuper(props, context)\n\t$0\n}\n", - "description": "Adds a default constructor for the class that contains props and context as arguments" - }, - "componentWillMount": { - "prefix": "cwm", - "body": "\ncomponentWillMount () {\n\t$0\n}\n", - "description": "Invoked once, both on the client and server, immediately before the initial rendering occurs" - }, - "componentDidMount": { - "prefix": "cdm", - "body": "componentDidMount () {\n\t$0\n}\n", - "description": "Invoked once, only on the client (not on the server), immediately after the initial rendering occurs." - }, - "componentWillReceiveProps": { - "prefix": "cwr", - "body": "componentWillReceiveProps (nextProps) {\n\t$0\n}\n", - "description": "Invoked when a component is receiving new props. This method is not called for the initial render." - }, - "componentGetDerivedStateFromProps": { - "prefix": "cgd", - "body": "\nstatic getDerivedStateFromProps(nextProps, prevState) {\n\t$0\n}\n", - "description": "Invoked after a component is instantiated as well as when it receives new props. It should return an object to update state, or null to indicate that the new props do not require any state updates." - }, - "shouldComponentUpdate": { - "prefix": "scu", - "body": "shouldComponentUpdate (nextProps, nextState) {\n\t$0\n}\n", - "description": "Invoked before rendering when new props or state are being received. " - }, - "componentWillUpdate": { - "prefix": "cwup", - "body": "componentWillUpdate (nextProps, nextState) {\n\t$0\n}\n", - "description": "Invoked immediately before rendering when new props or state are being received." - }, - "componentDidUpdate": { - "prefix": "cdup", - "body": "componentDidUpdate (prevProps, prevState) {\n\t$0\n}\n", - "description": "Invoked immediately after the component's updates are flushed to the DOM." - }, - "componentWillUnmount": { - "prefix": "cwun", - "body": "componentWillUnmount () {\n\t$0\n}\n", - "description": "Invoked immediately before a component is unmounted from the DOM." - }, - "componentRender": { - "prefix": "ren", - "body": "render () {\n\treturn (\n\t\t
\n\t\t\t$0\n\t\t
\n\t)\n}", - "description": "When called, it should examine this.props and this.state and return a single child element." - }, - "componentSetStateObject": { - "prefix": "sst", - "body": "this.setState($0)", - "description": "Performs a shallow merge of nextState into current state" - }, - "componentSetStateFunc": { - "prefix": "ssf", - "body": "this.setState((state, props) => { return { $0 }})\n", - "description": "Performs a shallow merge of nextState into current state" - }, - "componentProps": { - "prefix": "tp", - "body": "this.props.$0", - "description": "Access component's props" - }, - "componentState": { - "prefix": "ts", - "body": "this.state.$0", - "description": "Access component's state" - }, - "propTypes": { - "prefix": "rpt", - "body": "$1.propTypes = {\n\t$2\n}", - "description": "Creates empty propTypes declaration" - }, - "propTypeArray": { - "prefix": "pta", - "body": "PropTypes.array,", - "description": "Array prop type" - }, - "propTypeArrayRequired": { - "prefix": "ptar", - "body": "PropTypes.array.isRequired,", - "description": "Array prop type required" - }, - "propTypeBool": { - "prefix": "ptb", - "body": "PropTypes.bool,", - "description": "Bool prop type" - }, - "propTypeBoolRequired": { - "prefix": "ptbr", - "body": "PropTypes.bool.isRequired,", - "description": "Bool prop type required" - }, - "propTypeFunc": { - "prefix": "ptf", - "body": "PropTypes.func,", - "description": "Func prop type" - }, - "propTypeFuncRequired": { - "prefix": "ptfr", - "body": "PropTypes.func.isRequired,", - "description": "Func prop type required" - }, - "propTypeNumber": { - "prefix": "ptn", - "body": "PropTypes.number,", - "description": "Number prop type" - }, - "propTypeNumberRequired": { - "prefix": "ptnr", - "body": "PropTypes.number.isRequired,", - "description": "Number prop type required" - }, - "propTypeObject": { - "prefix": "pto", - "body": "PropTypes.object,", - "description": "Object prop type" - }, - "propTypeObjectRequired": { - "prefix": "ptor", - "body": "PropTypes.object.isRequired,", - "description": "Object prop type required" - }, - "propTypeString": { - "prefix": "pts", - "body": "PropTypes.string,", - "description": "String prop type" - }, - "propTypeStringRequired": { - "prefix": "ptsr", - "body": "PropTypes.string.isRequired,", - "description": "String prop type required" - }, - "propTypeNode": { - "prefix": "ptnd", - "body": "PropTypes.node,", - "description": "Anything that can be rendered: numbers, strings, elements or an array" - }, - "propTypeNodeRequired": { - "prefix": "ptndr", - "body": "PropTypes.node.isRequired,", - "description": "Anything that can be rendered: numbers, strings, elements or an array required" - }, - "propTypeElement": { - "prefix": "ptel", - "body": "PropTypes.element,", - "description": "React element prop type" - }, - "propTypeElementRequired": { - "prefix": "ptelr", - "body": "PropTypes.element.isRequired,", - "description": "React element prop type required" - }, - "propTypeInstanceOf": { - "prefix": "pti", - "body": "PropTypes.instanceOf($0),", - "description": "Is an instance of a class prop type" - }, - "propTypeInstanceOfRequired": { - "prefix": "ptir", - "body": "PropTypes.instanceOf($0).isRequired,", - "description": "Is an instance of a class prop type required" - }, - "propTypeEnum": { - "prefix": "pte", - "body": "PropTypes.oneOf(['$0']),", - "description": "Prop type limited to specific values by treating it as an enum" - }, - "propTypeEnumRequired": { - "prefix": "pter", - "body": "PropTypes.oneOf(['$0']).isRequired,", - "description": "Prop type limited to specific values by treating it as an enum required" - }, - "propTypeOneOfType": { - "prefix": "ptet", - "body": "PropTypes.oneOfType([\n\t$0\n]),", - "description": "An object that could be one of many types" - }, - "propTypeOneOfTypeRequired": { - "prefix": "ptetr", - "body": "PropTypes.oneOfType([\n\t$0\n]).isRequired,", - "description": "An object that could be one of many types required" - }, - "propTypeArrayOf": { - "prefix": "ptao", - "body": "PropTypes.arrayOf($0),", - "description": "An array of a certain type" - }, - "propTypeArrayOfRequired": { - "prefix": "ptaor", - "body": "PropTypes.arrayOf($0).isRequired,", - "description": "An array of a certain type required" - }, - "propTypeObjectOf": { - "prefix": "ptoo", - "body": "PropTypes.objectOf($0),", - "description": "An object with property values of a certain type" - }, - "propTypeObjectOfRequired": { - "prefix": "ptoor", - "body": "PropTypes.objectOf($0).isRequired,", - "description": "An object with property values of a certain type required" - }, - "propTypeShape": { - "prefix": "ptsh", - "body": "PropTypes.shape({\n\t$0\n}),", - "description": "An object taking on a particular shape" - }, - "propTypeShapeRequired": { - "prefix": "ptshr", - "body": "PropTypes.shape({\n\t$0\n}).isRequired,", - "description": "An object taking on a particular shape required" - }, - "jsx element": { - "prefix": "j", - "body": "<${1:elementName}>\n\t$0\n", - "description": "an element" - }, - "jsx element self closed": { - "prefix": "jc", - "body": "<${1:elementName} />", - "description": "an element self closed" - }, - "jsx elements map": { - "prefix": "jm", - "body": "{${1:array}.map((item) => <${2:elementName} key={item.id}>\n\t$0\n)}", - "description": "an element self closed" - }, - "jsx elements map with return": { - "prefix": "jmr", - "body": "{${1:array}.map((item) => {\n\treturn <${2:elementName} key={item.id}>\n\t$0\n\n})}", - "description": "an element self closed" - }, - "jsx element wrap selection": { - "prefix": "jsx wrap selection with element", - "body": "<${1:elementName}>\n\t{$TM_SELECTED_TEXT}\n", - "description": "an element" - }, - "useState": { - "prefix": "us", - "body": "const [${1:state}, set${1/(.*)/${1:/capitalize}/}] = useState(${2:initValue})$0", - "description": "React useState() hook" - }, - "useEffect": { - "prefix": "ue", - "body": ["useEffect(() => {", "\t$1", "}, [${3:dependencies}])$0"], - "description": "React useEffect() hook" - }, - "useEffect with return": { - "prefix": "uer", - "body": [ - "useEffect(() => {", - "\t$1", - "\n\treturn () => {", - "\t\t$2", - "\t}", - "}, [${3:dependencies}])$0" - ], - "description": "React useEffect() hook with return statement" - }, - "useContext": { - "prefix": "uc", - "body": ["const $1 = useContext($2)$0"], - "description": "React useContext() hook" - }, - "useRef": { - "prefix": "ur", - "body": ["const ${1:elName}El = useRef(null)$0"], - "description": "React useContext() hook" - }, - "useCallback": { - "prefix": "ucb", - "body": [ - "const ${1:memoizedCallback} = useCallback(", - "\t() => {", - "\t\t${2:doSomething}(${3:a}, ${4:b})", - "\t},", - "\t[${5:a}, ${6:b}],", - ")$0" - ], - "description": "React useCallback() hook" - }, - "useMemo": { - "prefix": "ume", - "body": [ - "const ${1:memoizedValue} = useMemo(() => ${2:computeExpensiveValue}(${3:a}, ${4:b}), [${5:a}, ${6:b}])$0" - ], - "description": "React useMemo() hook" - }, - "describeBlock": { - "prefix": "desc", - "body": ["describe('$1', () => {", " $0", "})", ""], - "description": "Testing `describe` block" - }, - "testBlock": { - "prefix": "test", - "body": ["test('should $1', () => {", " $0", "})", ""], - "description": "Testing `test` block" - }, - "itBlock": { - "prefix": "tit", - "body": ["it('should $1', () => {", " $0", "})", ""], - "description": "Testing `it` block" - }, - "itAsyncBlock": { - "prefix": "tita", - "body": ["it('should $1', async () => {", " $0", "})", ""], - "description": "Testing async `it` block" - } + "label": { + "prefix": "label", + "body": "$3", + "description": "JSX/TSX - label with htmlFor" + }, + "destructuring of props": { + "prefix": "dp", + "body": ["const { ${1:name} } = this.props"] + }, + "destructuring of state": { + "prefix": "ds", + "body": ["const { ${1:name} } = this.state"] + }, + "if falsy return null": { + "prefix": "ifr", + "body": "if (!${1:condition}) {\n\treturn null\n}" + }, + "reactClassComponent": { + "prefix": "rcc", + "body": "import { Component } from 'react'\n\nclass ${TM_FILENAME_BASE} extends Component {\n\trender () {\n\t\treturn (\n\t\t\t
\n\t\t\t\t$0\n\t\t\t
\n\t\t)\n\t}\n}\n\nexport default ${1}", + "description": "Creates a React component class" + }, + "reactJustClassComponent": { + "prefix": "rcjc", + "body": "class ${TM_FILENAME_BASE} extends Component {\n\trender () {\n\t\treturn (\n\t\t\t
\n\t\t\t\t$0\n\t\t\t
\n\t\t)\n\t}\n}\n", + "description": "Creates a React component class" + }, + "reactClassComponentPropTypes": { + "prefix": "rccp", + "body": "import { Component, PropTypes } from 'react'\n\nclass ${TM_FILENAME_BASE} extends Component {\n\trender () {\n\t\treturn (\n\t\t\t
\n\t\t\t\t$0\n\t\t\t
\n\t\t)\n\t}\n}\n\n${1}.propTypes = {\n\n}\n\nexport default ${1}", + "description": "Creates a React component class with PropTypes" + }, + "reactClassComponentWithMethods": { + "prefix": "rcfc", + "body": "import { Component, PropTypes } from 'react'\n\nclass ${TM_FILENAME_BASE} extends Component {\n\tconstructor(props) {\n\t\tsuper(props)\n\n\t}\n\n\tcomponentWillMount () {\n\n\t}\n\n\tcomponentDidMount () {\n\n\t}\n\n\tcomponentWillReceiveProps (nextProps) {\n\n\t}\n\n\tshouldComponentUpdate (nextProps, nextState) {\n\n\t}\n\n\tcomponentWillUpdate (nextProps, nextState) {\n\n\t}\n\n\tcomponentDidUpdate (prevProps, prevState) {\n\n\t}\n\n\tcomponentWillUnmount () {\n\n\t}\n\n\trender () {\n\t\treturn (\n\t\t\t
\n\n\t\t\t
\n\t\t)\n\t}\n}\n\n${1}.propTypes = {\n\n}\n\nexport default ${1}", + "description": "Creates a React component class with PropTypes and all lifecycle methods" + }, + "reactFunctionComponent": { + "prefix": "rfc", + "body": "\nconst ${TM_FILENAME_BASE} = () => {\n\treturn (\n\t\t
\n\t\t\t$0\n\t\t
\n\t)\n}\n\nexport default ${TM_FILENAME_BASE}", + "description": "Creates a React function component without PropTypes" + }, + "reactFunctionComponentWithCustomName": { + "prefix": "rfcn", + "body": "\nconst ${1:functionname} = () => {\n\treturn (\n\t\t
\n\t\t\t$0\n\t\t
\n\t)\n}\n\nexport default ${1:functionname}", + "description": "Creates a React function component with custom name" + }, + "reactFunctionComponentWithEmotion": { + "prefix": "rfce", + "body": "import { css } from '@emotion/core'\n\nexport const ${TM_FILENAME_BASE} = () => {\n\treturn (\n\t\t
\n\t\t\t$0\n\t\t
\n\t)\n}", + "description": "Creates a React functional component with emotion" + }, + "reactStatelessProps": { + "prefix": "rfcp", + "body": "import { PropTypes } from 'react'\n\nconst ${TM_FILENAME_BASE} = props => {\n\treturn (\n\t\t
\n\t\t\t\n\t\t
\n\t)\n}\n\n${1}.propTypes = {\n\t$0\n}\n\nexport default ${1}", + "description": "Creates a React function component with PropTypes" + }, + "classConstructor": { + "prefix": "con", + "body": "constructor (props) {\n\tsuper(props)\n\t$0\n}\n", + "description": "Adds a default constructor for the class that contains props as arguments" + }, + "classConstructorContext": { + "prefix": "conc", + "body": "constructor (props, context) {\n\tsuper(props, context)\n\t$0\n}\n", + "description": "Adds a default constructor for the class that contains props and context as arguments" + }, + "componentWillMount": { + "prefix": "cwm", + "body": "\ncomponentWillMount () {\n\t$0\n}\n", + "description": "Invoked once, both on the client and server, immediately before the initial rendering occurs" + }, + "componentDidMount": { + "prefix": "cdm", + "body": "componentDidMount () {\n\t$0\n}\n", + "description": "Invoked once, only on the client (not on the server), immediately after the initial rendering occurs." + }, + "componentWillReceiveProps": { + "prefix": "cwr", + "body": "componentWillReceiveProps (nextProps) {\n\t$0\n}\n", + "description": "Invoked when a component is receiving new props. This method is not called for the initial render." + }, + "componentGetDerivedStateFromProps": { + "prefix": "cgd", + "body": "\nstatic getDerivedStateFromProps(nextProps, prevState) {\n\t$0\n}\n", + "description": "Invoked after a component is instantiated as well as when it receives new props. It should return an object to update state, or null to indicate that the new props do not require any state updates." + }, + "shouldComponentUpdate": { + "prefix": "scu", + "body": "shouldComponentUpdate (nextProps, nextState) {\n\t$0\n}\n", + "description": "Invoked before rendering when new props or state are being received. " + }, + "componentWillUpdate": { + "prefix": "cwup", + "body": "componentWillUpdate (nextProps, nextState) {\n\t$0\n}\n", + "description": "Invoked immediately before rendering when new props or state are being received." + }, + "componentDidUpdate": { + "prefix": "cdup", + "body": "componentDidUpdate (prevProps, prevState) {\n\t$0\n}\n", + "description": "Invoked immediately after the component's updates are flushed to the DOM." + }, + "componentWillUnmount": { + "prefix": "cwun", + "body": "componentWillUnmount () {\n\t$0\n}\n", + "description": "Invoked immediately before a component is unmounted from the DOM." + }, + "componentRender": { + "prefix": "ren", + "body": "render () {\n\treturn (\n\t\t
\n\t\t\t$0\n\t\t
\n\t)\n}", + "description": "When called, it should examine this.props and this.state and return a single child element." + }, + "componentSetStateObject": { + "prefix": "sst", + "body": "this.setState($0)", + "description": "Performs a shallow merge of nextState into current state" + }, + "componentSetStateFunc": { + "prefix": "ssf", + "body": "this.setState((state, props) => { return { $0 }})\n", + "description": "Performs a shallow merge of nextState into current state" + }, + "componentProps": { + "prefix": "tp", + "body": "this.props.$0", + "description": "Access component's props" + }, + "componentState": { + "prefix": "ts", + "body": "this.state.$0", + "description": "Access component's state" + }, + "propTypes": { + "prefix": "rpt", + "body": "$1.propTypes = {\n\t$2\n}", + "description": "Creates empty propTypes declaration" + }, + "propTypeArray": { + "prefix": "pta", + "body": "PropTypes.array,", + "description": "Array prop type" + }, + "propTypeArrayRequired": { + "prefix": "ptar", + "body": "PropTypes.array.isRequired,", + "description": "Array prop type required" + }, + "propTypeBool": { + "prefix": "ptb", + "body": "PropTypes.bool,", + "description": "Bool prop type" + }, + "propTypeBoolRequired": { + "prefix": "ptbr", + "body": "PropTypes.bool.isRequired,", + "description": "Bool prop type required" + }, + "propTypeFunc": { + "prefix": "ptf", + "body": "PropTypes.func,", + "description": "Func prop type" + }, + "propTypeFuncRequired": { + "prefix": "ptfr", + "body": "PropTypes.func.isRequired,", + "description": "Func prop type required" + }, + "propTypeNumber": { + "prefix": "ptn", + "body": "PropTypes.number,", + "description": "Number prop type" + }, + "propTypeNumberRequired": { + "prefix": "ptnr", + "body": "PropTypes.number.isRequired,", + "description": "Number prop type required" + }, + "propTypeObject": { + "prefix": "pto", + "body": "PropTypes.object,", + "description": "Object prop type" + }, + "propTypeObjectRequired": { + "prefix": "ptor", + "body": "PropTypes.object.isRequired,", + "description": "Object prop type required" + }, + "propTypeString": { + "prefix": "pts", + "body": "PropTypes.string,", + "description": "String prop type" + }, + "propTypeStringRequired": { + "prefix": "ptsr", + "body": "PropTypes.string.isRequired,", + "description": "String prop type required" + }, + "propTypeNode": { + "prefix": "ptnd", + "body": "PropTypes.node,", + "description": "Anything that can be rendered: numbers, strings, elements or an array" + }, + "propTypeNodeRequired": { + "prefix": "ptndr", + "body": "PropTypes.node.isRequired,", + "description": "Anything that can be rendered: numbers, strings, elements or an array required" + }, + "propTypeElement": { + "prefix": "ptel", + "body": "PropTypes.element,", + "description": "React element prop type" + }, + "propTypeElementRequired": { + "prefix": "ptelr", + "body": "PropTypes.element.isRequired,", + "description": "React element prop type required" + }, + "propTypeInstanceOf": { + "prefix": "pti", + "body": "PropTypes.instanceOf($0),", + "description": "Is an instance of a class prop type" + }, + "propTypeInstanceOfRequired": { + "prefix": "ptir", + "body": "PropTypes.instanceOf($0).isRequired,", + "description": "Is an instance of a class prop type required" + }, + "propTypeEnum": { + "prefix": "pte", + "body": "PropTypes.oneOf(['$0']),", + "description": "Prop type limited to specific values by treating it as an enum" + }, + "propTypeEnumRequired": { + "prefix": "pter", + "body": "PropTypes.oneOf(['$0']).isRequired,", + "description": "Prop type limited to specific values by treating it as an enum required" + }, + "propTypeOneOfType": { + "prefix": "ptet", + "body": "PropTypes.oneOfType([\n\t$0\n]),", + "description": "An object that could be one of many types" + }, + "propTypeOneOfTypeRequired": { + "prefix": "ptetr", + "body": "PropTypes.oneOfType([\n\t$0\n]).isRequired,", + "description": "An object that could be one of many types required" + }, + "propTypeArrayOf": { + "prefix": "ptao", + "body": "PropTypes.arrayOf($0),", + "description": "An array of a certain type" + }, + "propTypeArrayOfRequired": { + "prefix": "ptaor", + "body": "PropTypes.arrayOf($0).isRequired,", + "description": "An array of a certain type required" + }, + "propTypeObjectOf": { + "prefix": "ptoo", + "body": "PropTypes.objectOf($0),", + "description": "An object with property values of a certain type" + }, + "propTypeObjectOfRequired": { + "prefix": "ptoor", + "body": "PropTypes.objectOf($0).isRequired,", + "description": "An object with property values of a certain type required" + }, + "propTypeShape": { + "prefix": "ptsh", + "body": "PropTypes.shape({\n\t$0\n}),", + "description": "An object taking on a particular shape" + }, + "propTypeShapeRequired": { + "prefix": "ptshr", + "body": "PropTypes.shape({\n\t$0\n}).isRequired,", + "description": "An object taking on a particular shape required" + }, + "jsx element": { + "prefix": "j", + "body": "<${1:elementName}>\n\t$0\n", + "description": "an element" + }, + "jsx element self closed": { + "prefix": "jc", + "body": "<${1:elementName} />", + "description": "an element self closed" + }, + "jsx elements map": { + "prefix": "jm", + "body": "{${1:array}.map((item) => <${2:elementName} key={item.id}>\n\t$0\n)}", + "description": "an element self closed" + }, + "jsx elements map with return": { + "prefix": "jmr", + "body": "{${1:array}.map((item) => {\n\treturn <${2:elementName} key={item.id}>\n\t$0\n\n})}", + "description": "an element self closed" + }, + "jsx element wrap selection": { + "prefix": "jsx wrap selection with element", + "body": "<${1:elementName}>\n\t{$TM_SELECTED_TEXT}\n", + "description": "an element" + }, + "useState": { + "prefix": "us", + "body": "const [${1:state}, set${1/(.*)/${1:/capitalize}/}] = useState(${2:initValue})$0", + "description": "React useState() hook" + }, + "useEffect": { + "prefix": "ue", + "body": ["useEffect(() => {", "\t$1", "}, [${3:dependencies}])$0"], + "description": "React useEffect() hook" + }, + "useEffect with return": { + "prefix": "uer", + "body": [ + "useEffect(() => {", + "\t$1", + "\n\treturn () => {", + "\t\t$2", + "\t}", + "}, [${3:dependencies}])$0" + ], + "description": "React useEffect() hook with return statement" + }, + "useContext": { + "prefix": "uc", + "body": ["const $1 = useContext($2)$0"], + "description": "React useContext() hook" + }, + "useRef": { + "prefix": "ur", + "body": ["const ${1:elName}El = useRef(null)$0"], + "description": "React useContext() hook" + }, + "useCallback": { + "prefix": "ucb", + "body": [ + "const ${1:memoizedCallback} = useCallback(", + "\t() => {", + "\t\t${2:doSomething}(${3:a}, ${4:b})", + "\t},", + "\t[${5:a}, ${6:b}],", + ")$0" + ], + "description": "React useCallback() hook" + }, + "useMemo": { + "prefix": "ume", + "body": [ + "const ${1:memoizedValue} = useMemo(() => ${2:computeExpensiveValue}(${3:a}, ${4:b}), [${5:a}, ${6:b}])$0" + ], + "description": "React useMemo() hook" + }, + "describeBlock": { + "prefix": "desc", + "body": ["describe('$1', () => {", " $0", "})", ""], + "description": "Testing `describe` block" + }, + "testBlock": { + "prefix": "test", + "body": ["test('should $1', () => {", " $0", "})", ""], + "description": "Testing `test` block" + }, + "itBlock": { + "prefix": "tit", + "body": ["it('should $1', () => {", " $0", "})", ""], + "description": "Testing `it` block" + }, + "itAsyncBlock": { + "prefix": "tita", + "body": ["it('should $1', async () => {", " $0", "})", ""], + "description": "Testing async `it` block" + } } From 403836dc379757a5e913bd39584d312c8a483aa1 Mon Sep 17 00:00:00 2001 From: Sarah Date: Tue, 7 Oct 2025 14:51:56 -0300 Subject: [PATCH 7/7] refactor: remove label element from react and remove "for" from html.json --- snippets/html.json | 2 +- snippets/javascript/react-ts.json | 5 ----- snippets/javascript/react.json | 5 ----- 3 files changed, 1 insertion(+), 11 deletions(-) diff --git a/snippets/html.json b/snippets/html.json index 4e2589d0..d5752072 100644 --- a/snippets/html.json +++ b/snippets/html.json @@ -386,7 +386,7 @@ }, "label": { "prefix": "label", - "body": "$3", + "body": "$3", "description": "HTML - Defines an inline window", "scope": "text.html" }, diff --git a/snippets/javascript/react-ts.json b/snippets/javascript/react-ts.json index b91ca457..62cb9220 100644 --- a/snippets/javascript/react-ts.json +++ b/snippets/javascript/react-ts.json @@ -1,9 +1,4 @@ { - "label": { - "prefix": "label", - "body": "$3", - "description": "JSX/TSX - label with htmlFor" - }, "classConstructor": { "prefix": "con", "body": "constructor (props) {\n\tsuper(props)\n\t$0\n}\n", diff --git a/snippets/javascript/react.json b/snippets/javascript/react.json index 1cd2f7e8..0c934e83 100644 --- a/snippets/javascript/react.json +++ b/snippets/javascript/react.json @@ -1,9 +1,4 @@ { - "label": { - "prefix": "label", - "body": "$3", - "description": "JSX/TSX - label with htmlFor" - }, "destructuring of props": { "prefix": "dp", "body": ["const { ${1:name} } = this.props"]