├── .vscodeignore ├── images └── javascript.png ├── .prettierrc ├── .vscode └── settings.json ├── CHANGELOG.md ├── .gitignore ├── snippets ├── apollo.json ├── react.json ├── react-ts.json └── javascript.json ├── LICENSE ├── package.json └── README.md /.vscodeignore: -------------------------------------------------------------------------------- 1 | .gitignore 2 | LICENSE 3 | CHANGELOG.md 4 | -------------------------------------------------------------------------------- /images/javascript.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/capaj/vscode-standardjs-snippets/HEAD/images/javascript.png -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "semi": false, 3 | "arrowParens": "always", 4 | "singleQuote": true, 5 | "trailingComma": "none" 6 | } 7 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "workbench.colorCustomizations": {}, 3 | "cSpell.words": [ 4 | "desctructured" 5 | ] 6 | } -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | This project tries to adhere to [Semantic Versioning](http://semver.org/). 4 | Every release, along with the migration instructions, is documented on the Github [Releases](https://github.com/xabikos/vscode-javascript/releases) page. -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | 6 | # Runtime data 7 | pids 8 | *.pid 9 | *.seed 10 | 11 | # Directory for instrumented libs generated by jscoverage/JSCover 12 | lib-cov 13 | 14 | # Coverage directory used by tools like istanbul 15 | coverage 16 | 17 | # nyc test coverage 18 | .nyc_output 19 | 20 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 21 | .grunt 22 | 23 | # node-waf configuration 24 | .lock-wscript 25 | 26 | # Compiled binary addons (http://nodejs.org/api/addons.html) 27 | build/Release 28 | 29 | # Dependency directories 30 | node_modules 31 | jspm_packages 32 | 33 | # Optional npm cache directory 34 | .npm 35 | 36 | # Optional REPL history 37 | .node_repl_history 38 | -------------------------------------------------------------------------------- /snippets/apollo.json: -------------------------------------------------------------------------------- 1 | { 2 | "useQuery": { 3 | "prefix": "uq", 4 | "body": ["const { data, loading } = use${1:query}Query()"], 5 | "description": "useQuery" 6 | }, 7 | "useQuery for component": { 8 | "prefix": "uqc", 9 | "body": ["const { data, loading } = use${TM_FILENAME_BASE}Query()"], 10 | "description": "useQuery that loads up data for current component" 11 | }, 12 | "useMutation": { 13 | "prefix": "um", 14 | "body": [ 15 | "const [${1:mutationName}, {loading}] = use${1:/upcase}Mutation()" 16 | ], 17 | "description": "useMutation" 18 | }, 19 | "useQuery with gql": { 20 | "prefix": "uqg", 21 | "body": ["const { data, loading } = useQuery(gql`${1:query}`)"], 22 | "description": "useQuery with raw mutation" 23 | }, 24 | "useMutation with gql": { 25 | "prefix": "umg", 26 | "body": [ 27 | "const ${1:mutationName} = useMutation(gql`${1:query}`, {", 28 | " variables: ${1:vars},", 29 | "});" 30 | ], 31 | "description": "useMutation with raw query" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2016-present Jiri Spac 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vscode-standardjs-snippets", 3 | "displayName": "JavaScript standardjs styled snippets", 4 | "publisher": "capaj", 5 | "icon": "images/javascript.png", 6 | "version": "0.9.0", 7 | "description": "standardjs styled javascript snippets for visual studio code", 8 | "repository": { 9 | "type": "git", 10 | "url": "git+https://github.com/capaj/vscode-standardjs-snippets.git" 11 | }, 12 | "engines": { 13 | "vscode": "0.10.x" 14 | }, 15 | "scripts": { 16 | "pub": "vsce publish" 17 | }, 18 | "author": "capajj@gmail.com", 19 | "license": "MIT", 20 | "bugs": { 21 | "url": "https://github.com/capaj/vscode-standardjs-snippets/issues" 22 | }, 23 | "homepage": "https://github.com/capaj/vscode-standardjs-snippets#readme", 24 | "categories": [ 25 | "Snippets" 26 | ], 27 | "contributes": { 28 | "snippets": [ 29 | { 30 | "language": "javascript", 31 | "path": "./snippets/javascript.json" 32 | }, 33 | { 34 | "language": "typescript", 35 | "path": "./snippets/javascript.json" 36 | }, 37 | { 38 | "language": "javascriptreact", 39 | "path": "./snippets/javascript.json" 40 | }, 41 | { 42 | "language": "typescriptreact", 43 | "path": "./snippets/javascript.json" 44 | }, 45 | { 46 | "language": "javascriptreact", 47 | "path": "./snippets/react.json" 48 | }, 49 | { 50 | "language": "typescriptreact", 51 | "path": "./snippets/react-ts.json" 52 | }, 53 | { 54 | "language": "javascriptreact", 55 | "path": "./snippets/apollo.json" 56 | }, 57 | { 58 | "language": "typescriptreact", 59 | "path": "./snippets/apollo.json" 60 | } 61 | ] 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /snippets/react.json: -------------------------------------------------------------------------------- 1 | { 2 | "destructuring of props": { 3 | "prefix": "dp", 4 | "body": ["const { ${1:name} } = this.props"] 5 | }, 6 | "destructuring of state": { 7 | "prefix": "ds", 8 | "body": ["const { ${1:name} } = this.state"] 9 | }, 10 | "if falsy return null": { 11 | "prefix": "ifr", 12 | "body": "if (!${1:condition}) {\n\treturn null\n}" 13 | }, 14 | "reactClassCompoment": { 15 | "prefix": "rcc", 16 | "body": "import React, { 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}", 17 | "description": "Creates a React component class" 18 | }, 19 | "reactJustClassCompoment": { 20 | "prefix": "rcjc", 21 | "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", 22 | "description": "Creates a React component class" 23 | }, 24 | "reactClassCompomentPropTypes": { 25 | "prefix": "rccp", 26 | "body": "import React, { 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}", 27 | "description": "Creates a React component class with PropTypes" 28 | }, 29 | "reactClassCompomentWithMethods": { 30 | "prefix": "rcfc", 31 | "body": "import React, { 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}", 32 | "description": "Creates a React component class with PropTypes and all lifecycle methods" 33 | }, 34 | "reactFunctionComponent": { 35 | "prefix": "rfc", 36 | "body": "import React from 'react'\n\nconst ${TM_FILENAME_BASE} = () => {\n\treturn (\n\t\t
\n\t\t\t$0\n\t\t
\n\t)\n}\n\nexport default ${1}", 37 | "description": "Creates a React function component without PropTypes" 38 | }, 39 | "reactFunctionComponentWithEmotion": { 40 | "prefix": "rfce", 41 | "body": "import { css } from '@emotion/core'\nimport React from 'react'\n\nexport const ${TM_FILENAME_BASE} = () => {\n\treturn (\n\t\t
\n\t\t\t$0\n\t\t
\n\t)\n}", 42 | "description": "Creates a React functional component with emotion" 43 | }, 44 | "reactStatelessProps": { 45 | "prefix": "rfcp", 46 | "body": "import React, { 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}", 47 | "description": "Creates a React function component with PropTypes" 48 | }, 49 | "classConstructor": { 50 | "prefix": "con", 51 | "body": "constructor (props) {\n\tsuper(props)\n\t$0\n}\n", 52 | "description": "Adds a default constructor for the class that contains props as arguments" 53 | }, 54 | "classConstructorContext": { 55 | "prefix": "conc", 56 | "body": "constructor (props, context) {\n\tsuper(props, context)\n\t$0\n}\n", 57 | "description": "Adds a default constructor for the class that contains props and context as arguments" 58 | }, 59 | "componentWillMount": { 60 | "prefix": "cwm", 61 | "body": "\ncomponentWillMount () {\n\t$0\n}\n", 62 | "description": "Invoked once, both on the client and server, immediately before the initial rendering occurs" 63 | }, 64 | "componentDidMount": { 65 | "prefix": "cdm", 66 | "body": "componentDidMount () {\n\t$0\n}\n", 67 | "description": "Invoked once, only on the client (not on the server), immediately after the initial rendering occurs." 68 | }, 69 | "componentWillReceiveProps": { 70 | "prefix": "cwr", 71 | "body": "componentWillReceiveProps (nextProps) {\n\t$0\n}\n", 72 | "description": "Invoked when a component is receiving new props. This method is not called for the initial render." 73 | }, 74 | "componentGetDerivedStateFromProps": { 75 | "prefix": "cgd", 76 | "body": "\nstatic getDerivedStateFromProps(nextProps, prevState) {\n\t$0\n}\n", 77 | "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." 78 | }, 79 | "shouldComponentUpdate": { 80 | "prefix": "scu", 81 | "body": "shouldComponentUpdate (nextProps, nextState) {\n\t$0\n}\n", 82 | "description": "Invoked before rendering when new props or state are being received. " 83 | }, 84 | "componentWillUpdate": { 85 | "prefix": "cwup", 86 | "body": "componentWillUpdate (nextProps, nextState) {\n\t$0\n}\n", 87 | "description": "Invoked immediately before rendering when new props or state are being received." 88 | }, 89 | "componentDidUpdate": { 90 | "prefix": "cdup", 91 | "body": "componentDidUpdate (prevProps, prevState) {\n\t$0\n}\n", 92 | "description": "Invoked immediately after the component's updates are flushed to the DOM." 93 | }, 94 | "componentWillUnmount": { 95 | "prefix": "cwun", 96 | "body": "componentWillUnmount () {\n\t$0\n}\n", 97 | "description": "Invoked immediately before a component is unmounted from the DOM." 98 | }, 99 | "componentRender": { 100 | "prefix": "ren", 101 | "body": "render () {\n\treturn (\n\t\t
\n\t\t\t$0\n\t\t
\n\t)\n}", 102 | "description": "When called, it should examine this.props and this.state and return a single child element." 103 | }, 104 | "componentSetStateObject": { 105 | "prefix": "sst", 106 | "body": "this.setState($0)", 107 | "description": "Performs a shallow merge of nextState into current state" 108 | }, 109 | "componentSetStateFunc": { 110 | "prefix": "ssf", 111 | "body": "this.setState((state, props) => { return { $0 }})\n", 112 | "description": "Performs a shallow merge of nextState into current state" 113 | }, 114 | "componentProps": { 115 | "prefix": "tp", 116 | "body": "this.props.$0", 117 | "description": "Access component's props" 118 | }, 119 | "componentState": { 120 | "prefix": "ts", 121 | "body": "this.state.$0", 122 | "description": "Access component's state" 123 | }, 124 | "jsx element": { 125 | "prefix": "j", 126 | "body": "<${1:elementName}>\n\t$0\n", 127 | "description": "an element" 128 | }, 129 | "jsx element self closed": { 130 | "prefix": "jc", 131 | "body": "<${1:elementName} />", 132 | "description": "an element self closed" 133 | }, 134 | "jsx elements map": { 135 | "prefix": "jm", 136 | "body": "{${1:array}.map((item) => <${2:elementName} key={item.id}>\n\t$0\n)}", 137 | "description": "an element self closed" 138 | }, 139 | "jsx elements map with return": { 140 | "prefix": "jmr", 141 | "body": "{${1:array}.map((item) => {\n\treturn <${2:elementName} key={item.id}>\n\t$0\n\n})}", 142 | "description": "an element self closed" 143 | }, 144 | "jsx element wrap selection": { 145 | "prefix": "jsx wrap selection with element", 146 | "body": "<${1:elementName}>\n\t{$TM_SELECTED_TEXT}\n", 147 | "description": "an element" 148 | }, 149 | "useState": { 150 | "prefix": "us", 151 | "body": "const [${1}, set${1/(^[a-zA-Z])(.*)/${1:/upcase}${2}/}] = useState(${2:default${1/(^[a-zA-Z])(.*)/${1:/upcase}${2}/}});", 152 | "description": "use state hook" 153 | }, 154 | "useEffect": { 155 | "prefix": "ue", 156 | "body": [ 157 | "useEffect(() => {", 158 | "\t$1", 159 | "\n\treturn () => {", 160 | "\t\t$2", 161 | "\t}", 162 | "}, [${3:dependencies}])$0" 163 | ], 164 | "description": "React useEffect() hook" 165 | }, 166 | "useContext": { 167 | "prefix": "uc", 168 | "body": ["const $1 = useContext($2)$0"], 169 | "description": "React useContext() hook" 170 | }, 171 | "useRef": { 172 | "prefix": "ur", 173 | "body": ["const ${1:elName}El = useRef(null)$0"], 174 | "description": "React useContext() hook" 175 | }, 176 | "useCallback": { 177 | "prefix": "ucb", 178 | "body": [ 179 | "const ${1:memoizedCallback} = useCallback(", 180 | "\t() => {", 181 | "\t\t${2:doSomething}(${3:a}, ${4:b})", 182 | "\t},", 183 | "\t[${5:a}, ${6:b}],", 184 | ")$0" 185 | ], 186 | "description": "React useCallback() hook" 187 | }, 188 | "useMemo": { 189 | "prefix": "ume", 190 | "body": [ 191 | "const ${1:memoizedValue} = useMemo(() => ${2:computeExpensiveValue}(${3:a}, ${4:b}), [${5:a}, ${6:b}])$0" 192 | ], 193 | "description": "React useMemo() hook" 194 | } 195 | } 196 | -------------------------------------------------------------------------------- /snippets/react-ts.json: -------------------------------------------------------------------------------- 1 | { 2 | "destructuring of props": { 3 | "prefix": "dp", 4 | "body": ["const { ${1:name} } = this.props"] 5 | }, 6 | "destructuring of state": { 7 | "prefix": "ds", 8 | "body": ["const { ${1:name} } = this.state"] 9 | }, 10 | "reactClassCompoment": { 11 | "prefix": "rcc", 12 | "body": "import React, { 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}", 13 | "description": "Creates a React component class" 14 | }, 15 | "reactJustClassCompoment": { 16 | "prefix": "rcjc", 17 | "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", 18 | "description": "Creates a React component class" 19 | }, 20 | "reactClassCompomentPropTypes": { 21 | "prefix": "rccp", 22 | "body": "import React, { 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}", 23 | "description": "Creates a React component class with PropTypes" 24 | }, 25 | "reactClassCompomentWithMethods": { 26 | "prefix": "rcfc", 27 | "body": "import React, { 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}", 28 | "description": "Creates a React component class with PropTypes and all lifecycle methods" 29 | }, 30 | "reactFunctionComponent": { 31 | "prefix": "rfc", 32 | "body": "import React from 'react'\n\nexport const ${TM_FILENAME_BASE}: React.FC<{}> = () => {\n\treturn (\n\t\t
\n\t\t\t$0\n\t\t
\n\t)\n}", 33 | "description": "Creates a React functional component without PropTypes" 34 | }, 35 | "reactFunctionComponentWithEmotion": { 36 | "prefix": "rfce", 37 | "body": "import { css } from '@emotion/core'\nimport React from 'react'\n\nexport const ${TM_FILENAME_BASE}: React.FC<{}> = () => {\n\treturn (\n\t\t
\n\t\t\t$0\n\t\t
\n\t)\n}", 38 | "description": "Creates a React functional component with emotion import" 39 | }, 40 | "classConstructor": { 41 | "prefix": "con", 42 | "body": "constructor (props) {\n\tsuper(props)\n\t$0\n}\n", 43 | "description": "Adds a default constructor for the class that contains props as arguments" 44 | }, 45 | "classConstructorContext": { 46 | "prefix": "conc", 47 | "body": "constructor (props, context) {\n\tsuper(props, context)\n\t$0\n}\n", 48 | "description": "Adds a default constructor for the class that contains props and context as arguments" 49 | }, 50 | "componentWillMount": { 51 | "prefix": "cwm", 52 | "body": "\ncomponentWillMount () {\n\t$0\n}\n", 53 | "description": "Invoked once, both on the client and server, immediately before the initial rendering occurs" 54 | }, 55 | "componentDidMount": { 56 | "prefix": "cdm", 57 | "body": "componentDidMount () {\n\t$0\n}\n", 58 | "description": "Invoked once, only on the client (not on the server), immediately after the initial rendering occurs." 59 | }, 60 | "componentWillReceiveProps": { 61 | "prefix": "cwr", 62 | "body": "componentWillReceiveProps (nextProps) {\n\t$0\n}\n", 63 | "description": "Invoked when a component is receiving new props. This method is not called for the initial render." 64 | }, 65 | "componentGetDerivedStateFromProps": { 66 | "prefix": "cgd", 67 | "body": "\nstatic getDerivedStateFromProps(nextProps, prevState) {\n\t$0\n}\n", 68 | "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." 69 | }, 70 | "shouldComponentUpdate": { 71 | "prefix": "scu", 72 | "body": "shouldComponentUpdate (nextProps, nextState) {\n\t$0\n}\n", 73 | "description": "Invoked before rendering when new props or state are being received. " 74 | }, 75 | "componentWillUpdate": { 76 | "prefix": "cwup", 77 | "body": "componentWillUpdate (nextProps, nextState) {\n\t$0\n}\n", 78 | "description": "Invoked immediately before rendering when new props or state are being received." 79 | }, 80 | "componentDidUpdate": { 81 | "prefix": "cdup", 82 | "body": "componentDidUpdate (prevProps, prevState) {\n\t$0\n}\n", 83 | "description": "Invoked immediately after the component's updates are flushed to the DOM." 84 | }, 85 | "componentWillUnmount": { 86 | "prefix": "cwun", 87 | "body": "componentWillUnmount () {\n\t$0\n}\n", 88 | "description": "Invoked immediately before a component is unmounted from the DOM." 89 | }, 90 | "componentRender": { 91 | "prefix": "ren", 92 | "body": "render () {\n\treturn (\n\t\t
\n\t\t\t$0\n\t\t
\n\t)\n}", 93 | "description": "When called, it should examine this.props and this.state and return a single child element." 94 | }, 95 | "componentSetStateObject": { 96 | "prefix": "sst", 97 | "body": "this.setState($0)", 98 | "description": "Performs a shallow merge of nextState into current state" 99 | }, 100 | "componentSetStateFunc": { 101 | "prefix": "ssf", 102 | "body": "this.setState((state, props) => { return { $0 }})\n", 103 | "description": "Performs a shallow merge of nextState into current state" 104 | }, 105 | "componentProps": { 106 | "prefix": "tp", 107 | "body": "this.props.$0", 108 | "description": "Access component's props" 109 | }, 110 | "componentState": { 111 | "prefix": "ts", 112 | "body": "this.state.$0", 113 | "description": "Access component's state" 114 | }, 115 | "jsx element": { 116 | "prefix": "j", 117 | "body": "<${1:elementName}>\n\t$0\n", 118 | "description": "an element" 119 | }, 120 | "jsx element self closed": { 121 | "prefix": "jc", 122 | "body": "<${1:elementName} />", 123 | "description": "an element self closed" 124 | }, 125 | "jsx elements map": { 126 | "prefix": "jm", 127 | "body": "{${1:array}.map((item) => <${2:elementName} key={item.id}>\n\t$0\n)}", 128 | "description": "an element self closed" 129 | }, 130 | "jsx elements map with return": { 131 | "prefix": "jmr", 132 | "body": "{${1:array}.map((item) => {\n\treturn <${2:elementName} key={item.id}>\n\t$0\n\n})}", 133 | "description": "an element self closed" 134 | }, 135 | "jsx element wrap selection": { 136 | "prefix": "jsx wrap selection with element", 137 | "body": "<${1:elementName}>\n\t{$TM_SELECTED_TEXT}\n", 138 | "description": "an element" 139 | }, 140 | "useState": { 141 | "prefix": "us", 142 | "body": "const [${1}, set${1/(^[a-zA-Z])(.*)/${1:/upcase}${2}/}] = useState(${2:default${1/(^[a-zA-Z])(.*)/${1:/upcase}${2}/}});", 143 | "description": "use state hook" 144 | }, 145 | "useEffect": { 146 | "prefix": "ue", 147 | "body": ["useEffect(() => {", "\t$1", "}, [${3:dependencies}])$0"], 148 | "description": "React useEffect() hook" 149 | }, 150 | "useEffect with cleanup": { 151 | "prefix": "uec", 152 | "body": [ 153 | "useEffect(() => {", 154 | "\t$1", 155 | "\n\treturn () => {", 156 | "\t\t$2", 157 | "\t}", 158 | "}, [${3:dependencies}])$0" 159 | ], 160 | "description": "React useEffect() hook with a cleanup function" 161 | }, 162 | "createContext": { 163 | "prefix": "cc", 164 | "body": [ 165 | "export const $1 = createContext<$2>(", 166 | "\t(null as any) as $2", 167 | ")" 168 | ], 169 | "description": "creates a react context" 170 | }, 171 | "useContext": { 172 | "prefix": "uc", 173 | "body": ["const $1 = useContext($2)$0"], 174 | "description": "React useContext() hook" 175 | }, 176 | "useRef": { 177 | "prefix": "ur", 178 | "body": ["const ${1:elName}El = useRef(null)$0"], 179 | "description": "React useContext() hook" 180 | }, 181 | "useCallback": { 182 | "prefix": "ucb", 183 | "body": [ 184 | "const ${1:memoizedCallback} = useCallback(", 185 | "\t() => {", 186 | "\t\t${2:doSomething}(${3:a}, ${4:b})", 187 | "\t},", 188 | "\t[${5:a}, ${6:b}],", 189 | ")$0" 190 | ], 191 | "description": "React useCallback() hook" 192 | }, 193 | "useMemo": { 194 | "prefix": "ume", 195 | "body": [ 196 | "const ${1:memoizedValue} = useMemo(() => ${2:computeExpensiveValue}(${3:a}, ${4:b}), [${5:a}, ${6:b}])$0" 197 | ], 198 | "description": "React useMemo() hook" 199 | } 200 | } 201 | -------------------------------------------------------------------------------- /snippets/javascript.json: -------------------------------------------------------------------------------- 1 | { 2 | "setTimeout": { 3 | "prefix": "st", 4 | "body": "setTimeout(() => {\n\t${0}\n}, ${1:delay})" 5 | }, 6 | "setInterval": { 7 | "prefix": "si", 8 | "body": "setInterval(() => {\n\t${0}\n}, ${1:delay})" 9 | }, 10 | "setImmediate": { 11 | "prefix": "sim", 12 | "body": "setImmediate(() => {\n\t${0}\n})" 13 | }, 14 | "await": { 15 | "prefix": "a", 16 | "body": "await ${0}" 17 | }, 18 | "await Promise.all": { 19 | "prefix": "apa", 20 | "body": "await Promise.all(${1:value})" 21 | }, 22 | "await Promise.all with destructuring": { 23 | "prefix": "apad", 24 | "body": "const [${0}] = await Promise.all(${1:value})" 25 | }, 26 | "await Promise.all map": { 27 | "prefix": "apm", 28 | "body": "await Promise.all(${1:array}.map(async (${2:value}) => {\n\t${0}\n}))" 29 | }, 30 | "await sleep": { 31 | "prefix": "ast", 32 | "body": "await new Promise((r) => setTimeout(r, ${0}))" 33 | }, 34 | "Node callback": { 35 | "prefix": "cb", 36 | "body": "function (err, ${1:value}) {\n\tif (err) throw err\n\t${0}\n}" 37 | }, 38 | "process.env": { 39 | "prefix": "pe", 40 | "body": "process.env" 41 | }, 42 | "Promise.all": { 43 | "prefix": "pa", 44 | "body": "Promise.all(${1:value})" 45 | }, 46 | "Promise.resolve": { 47 | "prefix": "prs", 48 | "body": "Promise.resolve(${1:value})" 49 | }, 50 | "Promise.reject": { 51 | "prefix": "prj", 52 | "body": "Promise.reject(${1:value})" 53 | }, 54 | "Promise": { 55 | "prefix": "p", 56 | "body": "Promise" 57 | }, 58 | "new Promise": { 59 | "prefix": "np", 60 | "body": "new Promise((resolve, reject) => {\n\t${0}\n})" 61 | }, 62 | "Promise.then": { 63 | "prefix": "pt", 64 | "body": "${1:promise}.then((${2:value}) => {\n\t${0}\n})" 65 | }, 66 | "Promise.catch": { 67 | "prefix": "pc", 68 | "body": "${1:promise}.catch(error => {\n\t${0}\n})" 69 | }, 70 | "describe": { 71 | "prefix": "desc", 72 | "body": "describe('${1:description}', () => {\n\t${0}\n})" 73 | }, 74 | "describe top level": { 75 | "prefix": "dt", 76 | "body": "describe('${TM_FILENAME_BASE}', () => {\n\t${0}\n})" 77 | }, 78 | "it asynchronous": { 79 | "prefix": "it", 80 | "body": "it('${1:description}', async () => {\n\t${0}\n})" 81 | }, 82 | "it.todo": { 83 | "prefix": "itt", 84 | "body": "it.todo('${1:description}')" 85 | }, 86 | "it with a callback": { 87 | "prefix": "itd", 88 | "body": "it('${1:description}', (done) => {\n\t${0}\n})" 89 | }, 90 | "it synchronous": { 91 | "prefix": "its", 92 | "body": "it('${1:description}', () => {\n\t${0}\n})" 93 | }, 94 | "before": { 95 | "prefix": "bf", 96 | "body": "before(async () => {\n\t${0}\n})" 97 | }, 98 | "beforeAll": { 99 | "prefix": "ba", 100 | "body": "beforeAll(async () => {\n\t${0}\n})" 101 | }, 102 | "beforeEach": { 103 | "prefix": "bfe", 104 | "body": "beforeEach(async () => {\n\t${0}\n})" 105 | }, 106 | "after": { 107 | "prefix": "aft", 108 | "body": "after(() => {\n\t${0}\n})" 109 | }, 110 | "afterEach": { 111 | "prefix": "afe", 112 | "body": "afterEach(() => {\n\t${0}\n})" 113 | }, 114 | "require": { 115 | "prefix": "rq", 116 | "body": "require('${1:module}')" 117 | }, 118 | "const module = require('module')": { 119 | "prefix": "cr", 120 | "body": "const ${1:module} = require('${1:module}')" 121 | }, 122 | "exports.member": { 123 | "prefix": "em", 124 | "body": "exports.${1:member} = ${2:value}" 125 | }, 126 | "module.exports": { 127 | "prefix": "me", 128 | "body": "module.exports = ${1:name}" 129 | }, 130 | "module as class": { 131 | "prefix": "mec", 132 | "body": "class ${1:name} {\n\tconstructor (${2:arguments}) {\n\t\t${0}\n\t}\n}\n\nmodule.exports = ${1:name}\n" 133 | }, 134 | "event handler": { 135 | "prefix": "on", 136 | "body": "${1:emitter}.on('${2:event}', (${3:arguments}) => {\n\t${0}\n})" 137 | }, 138 | "dom event cancel default and propagation": { 139 | "prefix": "evc", 140 | "body": "ev.preventDefault()\nev.stopPropagation()\nreturn false" 141 | }, 142 | "addEventListener": { 143 | "prefix": "ae", 144 | "body": "${1:document}.addEventListener('${2:event}', ${3:ev} => {\n\t${0}\n})" 145 | }, 146 | "removeEventListener": { 147 | "prefix": "rel", 148 | "body": "${1:document}.removeEventListener('${2:event}', ${3:listener})" 149 | }, 150 | "getElementById": { 151 | "prefix": "gi", 152 | "body": "${1:document}.getElementById('${2:id}')" 153 | }, 154 | "getElementsByClassName": { 155 | "prefix": "gc", 156 | "body": "Array.from(${1:document}.getElementsByClassName('${2:class}'))" 157 | }, 158 | "getElementsByTagName": { 159 | "prefix": "gt", 160 | "body": "Array.from(${1:document}.getElementsByTagName('${2:tag}'))" 161 | }, 162 | "querySelector": { 163 | "prefix": "qs", 164 | "body": "${1:document}.querySelector('${2:selector}')" 165 | }, 166 | "querySelectorAll": { 167 | "prefix": "qsa", 168 | "body": "Array.from(${1:document}.querySelectorAll('${2:selector}'))" 169 | }, 170 | "createDocumentFragment": { 171 | "prefix": "cdf", 172 | "body": "${1:document}.createDocumentFragment(${2:elem})" 173 | }, 174 | "createElement": { 175 | "prefix": "cel", 176 | "body": "${1:document}.createElement(${2:elem})" 177 | }, 178 | "classList.add": { 179 | "prefix": "hecla", 180 | "body": "${1:el}.classList.add('${2:class}')" 181 | }, 182 | "classList.remove": { 183 | "prefix": "heclr", 184 | "body": "${1:el}.classList.remove('${2:class}')" 185 | }, 186 | "classList.toggle": { 187 | "prefix": "hect", 188 | "body": "${1:el}.classList.toggle('${2:class}')" 189 | }, 190 | "getAttribute": { 191 | "prefix": "hega", 192 | "body": "${1:el}.getAttribute('${2:attr}')" 193 | }, 194 | "removeAttribute": { 195 | "prefix": "hera", 196 | "body": "${1:el}.removeAttribute('${2:attr}')" 197 | }, 198 | "setAttribute": { 199 | "prefix": "hesa", 200 | "body": "${1:el}.setAttribute('${2:attr}', ${3:value})" 201 | }, 202 | "appendChild": { 203 | "prefix": "heac", 204 | "body": "${1:el}.appendChild(${2:elem})" 205 | }, 206 | "removeChild": { 207 | "prefix": "herc", 208 | "body": "${1:el}.removeChild(${2:elem})" 209 | }, 210 | "forEach loop": { 211 | "prefix": "fe", 212 | "body": "${1:iterable}.forEach((${2:item}) => {\n\t${0}\n})" 213 | }, 214 | "map": { 215 | "prefix": "map", 216 | "body": "${1:iterable}.map((${2:item}) => {\n\t${0}\n})" 217 | }, 218 | "map single desctructured argument": { 219 | "prefix": "mapsd", 220 | "body": "${1:iterable}.map(({${2:item}}) => ${2:item})" 221 | }, 222 | "reduce": { 223 | "prefix": "reduce", 224 | "body": "${1:iterable}.reduce((${2:previous}, ${3:current}) => {\n\t${0}\n}${4:, initial})" 225 | }, 226 | "filter": { 227 | "prefix": "filter", 228 | "body": "${1:iterable}.filter((${2:item}) => {\n\t${0}\n})" 229 | }, 230 | "find": { 231 | "prefix": "find", 232 | "body": "${1:iterable}.find((${2:item}) => {\n\t${0}\n})" 233 | }, 234 | "every": { 235 | "prefix": "every", 236 | "body": "${1:iterable}.every((${2:item}) => {\n\t${0}\n})" 237 | }, 238 | "some": { 239 | "prefix": "some", 240 | "body": "${1:iterable}.some((${2:item}) => {\n\t${0}\n})" 241 | }, 242 | "var statement": { 243 | "prefix": "v", 244 | "body": "var ${1:name}" 245 | }, 246 | "var assignment": { 247 | "prefix": "va", 248 | "body": "var ${1:name} = ${2:value}" 249 | }, 250 | "let statement": { 251 | "prefix": "l", 252 | "body": "let ${1:name}" 253 | }, 254 | "const statement": { 255 | "prefix": "c", 256 | "body": "const ${1:name}" 257 | }, 258 | "const statement from destructuring": { 259 | "prefix": "cd", 260 | "body": "const { ${2:prop} } = ${1:value}" 261 | }, 262 | "const statement from array destructuring": { 263 | "prefix": "cad", 264 | "body": "const [ ${2:prop} ] = ${1:value}" 265 | }, 266 | "const assignment awaited": { 267 | "prefix": "ca", 268 | "body": "const ${1:name} = await ${2:value}" 269 | }, 270 | "const destructuring assignment awaited": { 271 | "prefix": "cda", 272 | "body": "const { ${1:name} } = await ${2:value}" 273 | }, 274 | "const arrow function assignment": { 275 | "prefix": "cf", 276 | "body": "const ${1:name} = (${2:arguments}) => {\n\treturn ${0}\n}" 277 | }, 278 | "let assignment awaited": { 279 | "prefix": "la", 280 | "body": "let ${1:name} = await ${2:value}" 281 | }, 282 | "const assignment yielded": { 283 | "prefix": "cy", 284 | "body": "const ${1:name} = yield ${2:value}" 285 | }, 286 | "let assignment yielded": { 287 | "prefix": "ly", 288 | "body": "let ${1:name} = yield ${2:value}" 289 | }, 290 | "const object": { 291 | "prefix": "co", 292 | "body": "const ${1:name} = {\n\t${0}\n}" 293 | }, 294 | "const array": { 295 | "prefix": "car", 296 | "body": "const ${1:name} = [\n\t${0}\n]" 297 | }, 298 | "generate array of integers starting with 1": { 299 | "prefix": "gari", 300 | "body": "Array.from({ length: ${1:length} }, (v, k) => k + 1)" 301 | }, 302 | "generate array of integers starting with 0": { 303 | "prefix": "gari0", 304 | "body": "[...Array(${1:length}).keys()]" 305 | }, 306 | "class": { 307 | "prefix": "cs", 308 | "body": "class ${1:name} {\n\tconstructor (${2:arguments}) {\n\t\t${0}\n\t}\n}" 309 | }, 310 | "class extends": { 311 | "prefix": "csx", 312 | "body": "class ${1:name} extends ${2:base} {\n\tconstructor (${3:arguments}) {\n\t\tsuper(${3:arguments})\n\t\t${0}\n\t}\n}" 313 | }, 314 | "module export": { 315 | "prefix": "e", 316 | "body": "export ${1:member}" 317 | }, 318 | "module export const": { 319 | "prefix": "ec", 320 | "body": "export const ${1:member} = ${2:value}" 321 | }, 322 | "export named function": { 323 | "prefix": "ef", 324 | "body": "export function ${1:member} (${2:arguments}) {\n\t${0}\n}" 325 | }, 326 | "module default export": { 327 | "prefix": "ed", 328 | "body": "export default ${1:member}" 329 | }, 330 | "module default export function": { 331 | "prefix": "edf", 332 | "body": "export default function ${1:name} (${2:arguments}) {\n\t${0}\n}" 333 | }, 334 | "import module": { 335 | "prefix": "im", 336 | "body": "import ${2:*} from '${1:module}'" 337 | }, 338 | "import module as": { 339 | "prefix": "ia", 340 | "body": "import ${2:*} as ${3:name} from '${1:module}'" 341 | }, 342 | "import module destructured": { 343 | "prefix": "imd", 344 | "body": "import {$2} from '${1:module}'" 345 | }, 346 | "typeof": { 347 | "prefix": "to", 348 | "body": "typeof ${1:source} === '${2:undefined}'" 349 | }, 350 | "this": { 351 | "prefix": "t", 352 | "body": "this." 353 | }, 354 | "instanceof": { 355 | "prefix": "iof", 356 | "body": "${1:source} instanceof ${2:Object}" 357 | }, 358 | "Array.isArray()": { 359 | "prefix": "ia", 360 | "body": "Array.isArray(${1:source})" 361 | }, 362 | "let and if statement": { 363 | "prefix": "lif", 364 | "body": "let ${0} \n if (${2:condition}) {\n\t${1}\n}" 365 | }, 366 | "if statement": { 367 | "prefix": "i", 368 | "body": "if (${1:condition}) {\n\t${0}\n}" 369 | }, 370 | "else statement": { 371 | "prefix": "el", 372 | "body": "else {\n\t${0}\n}" 373 | }, 374 | "if/else statement": { 375 | "prefix": "ife", 376 | "body": "if (${1:condition}) {\n\t${0}\n} else {\n\t\n}" 377 | }, 378 | "else if statement": { 379 | "prefix": "ei", 380 | "body": "else if (${1:condition}) {\n\t${0}\n}" 381 | }, 382 | "for loop": { 383 | "prefix": "fl", 384 | "body": "for (let ${1:i} = 0, ${2:len} = ${3:iterable}.length; ${1:i} < ${2:len}; ${1:i}++) {\n\t${0}\n}" 385 | }, 386 | "for in loop": { 387 | "prefix": "fi", 388 | "body": "for (let ${1:key} in ${2:source}) {\n\tif (${2:source}.hasOwnProperty(${1:key})) {\n\t\t${0}\n\t}\n}" 389 | }, 390 | "for of loop": { 391 | "prefix": "fo", 392 | "body": "for (const ${1:key} of ${2:source}) {\n\t${0}\n}" 393 | }, 394 | "while iteration decrementing": { 395 | "prefix": "wid", 396 | "body": "let ${1:array}Index = ${1:array}.length\nwhile (${1:array}Index--) {\n\t${0}\n}" 397 | }, 398 | "while loop": { 399 | "prefix": "wl", 400 | "body": "while (${1:condition}) {\n\t${0}\n}" 401 | }, 402 | "throw new Error": { 403 | "prefix": "tn", 404 | "body": "throw new ${0:error}" 405 | }, 406 | "try/catch": { 407 | "prefix": "tc", 408 | "body": "try {\n\t${0}\n} catch (${1:err}) {\n\t\n}" 409 | }, 410 | "try/finally": { 411 | "prefix": "tf", 412 | "body": "try {\n\t${0}\n} finally {\n\t\n}" 413 | }, 414 | "try/catch/finally": { 415 | "prefix": "tcf", 416 | "body": "try {\n\t${0}\n} catch (${1:err}) {\n\t\n} finally {\n\t\n}" 417 | }, 418 | "anonymous function": { 419 | "prefix": "fan", 420 | "body": "function (${1:arguments}) {${0}}" 421 | }, 422 | "named function": { 423 | "prefix": "fn", 424 | "body": "function ${1:name} (${2:arguments}) {\n\t${0}\n}" 425 | }, 426 | "async function": { 427 | "prefix": "asf", 428 | "body": "async function (${1:arguments}) {\n\t${0}\n}" 429 | }, 430 | "async arrow function": { 431 | "prefix": "aa", 432 | "body": "async (${1:arguments}) => {\n\t${0}\n}" 433 | }, 434 | "immediately-invoked function expression": { 435 | "prefix": "iife", 436 | "body": ";(function (${1:arguments}) {\n\t${0}\n})(${2})" 437 | }, 438 | "async immediately-invoked function expression": { 439 | "prefix": "aiife", 440 | "body": ";(async (${1:arguments}) => {\n\t${0}\n})(${2})" 441 | }, 442 | "arrow function": { 443 | "prefix": "af", 444 | "body": "(${1:arguments}) => ${2:statement}" 445 | }, 446 | "identity arrow function": { 447 | "prefix": "afi", 448 | "body": "(v) => v" 449 | }, 450 | "arrow function with destructuring": { 451 | "prefix": "fd", 452 | "body": "({${1:arguments}}) => ${2:statement}" 453 | }, 454 | "arrow function with destructuring returning destructured": { 455 | "prefix": "fdr", 456 | "body": "({${1:arguments}}) => ${1:arguments}" 457 | }, 458 | "arrow function with body": { 459 | "prefix": "f", 460 | "body": "(${1:arguments}) => {\n\t${0}\n}" 461 | }, 462 | "arrow function returning single object": { 463 | "prefix": "fro", 464 | "body": "(${1:arguments}) => ({\n\t${0}\n})" 465 | }, 466 | "arrow function with return": { 467 | "prefix": "fr", 468 | "body": "(${1:arguments}) => {\n\treturn ${0}\n}" 469 | }, 470 | "generator function": { 471 | "prefix": "gf", 472 | "body": "function* (${1:arguments}) {\n\t${0}\n}" 473 | }, 474 | "named generator": { 475 | "prefix": "gfn", 476 | "body": "function* ${1:name}(${2:arguments}) {\n\t${0}\n}" 477 | }, 478 | "console.log": { 479 | "prefix": "cl", 480 | "body": "console.log(${0})" 481 | }, 482 | "console.log a variable": { 483 | "prefix": "cv", 484 | "body": "console.log('${0}:', ${0})" 485 | }, 486 | "console.error": { 487 | "prefix": "ce", 488 | "body": "console.error(${0})" 489 | }, 490 | "console.warn": { 491 | "prefix": "cw", 492 | "body": "console.warn(${0})" 493 | }, 494 | "console.dir": { 495 | "prefix": "cod", 496 | "body": "console.dir('${0}:', ${0})" 497 | }, 498 | "constructor": { 499 | "prefix": "cn", 500 | "body": "constructor () {\n\t${0}\n}" 501 | }, 502 | "use strict": { 503 | "prefix": "uss", 504 | "body": "'use strict'" 505 | }, 506 | "JSON.stringify()": { 507 | "prefix": "js", 508 | "body": "JSON.stringify($0)" 509 | }, 510 | "JSON.parse()": { 511 | "prefix": "jp", 512 | "body": "JSON.parse($0)" 513 | }, 514 | "method": { 515 | "prefix": "m", 516 | "body": "${1:method} (${2:arguments}) {\n\t${0}\n}" 517 | }, 518 | "getter": { 519 | "prefix": "get", 520 | "body": "get ${1:property} () {\n\t${0}\n}" 521 | }, 522 | "setter": { 523 | "prefix": "set", 524 | "body": "set ${1:property} (${2:value}) {\n\t${0}\n}" 525 | }, 526 | "getter + setter": { 527 | "prefix": "gs", 528 | "body": "get ${1:property} () {\n\t${0}\n}\nset ${1:property} (${2:value}) {\n\t\n}" 529 | }, 530 | "prototype method": { 531 | "prefix": "proto", 532 | "body": "${1:Class}.prototype.${2:method} = function (${3:arguments}) {\n\t${0}\n}" 533 | }, 534 | "Object.assign": { 535 | "prefix": "oa", 536 | "body": "Object.assign(${1:dest}, ${2:source})" 537 | }, 538 | "Object.create": { 539 | "prefix": "oc", 540 | "body": "Object.create(${1:obj})" 541 | }, 542 | "Object.getOwnPropertyDescriptor": { 543 | "prefix": "og", 544 | "body": "Object.getOwnPropertyDescriptor(${1:obj}, '${2:prop}')" 545 | }, 546 | "ternary": { 547 | "prefix": "te", 548 | "body": "${1:cond} ? ${2:true} : ${3:false}" 549 | }, 550 | "ternary assignment": { 551 | "prefix": "ta", 552 | "body": "const ${0} = ${1:cond} ? ${2:true} : ${3:false}" 553 | }, 554 | "Object.defineProperty": { 555 | "prefix": "od", 556 | "body": "Object.defineProperty(${1:dest}, '${2:prop}', {\n\t${0}\n})" 557 | }, 558 | "Object.keys": { 559 | "prefix": "ok", 560 | "body": "Object.keys(${1:obj})" 561 | }, 562 | "Object.values": { 563 | "prefix": "ov", 564 | "body": "Object.values(${1:obj})" 565 | }, 566 | "Object.entries": { 567 | "prefix": "oe", 568 | "body": "Object.entries(${1:obj})" 569 | }, 570 | "return": { 571 | "prefix": "r", 572 | "body": "return ${0}" 573 | }, 574 | "return arrow function": { 575 | "prefix": "rf", 576 | "body": "return (${1:arguments}) => ${2:statement}" 577 | }, 578 | "yield": { 579 | "prefix": "y", 580 | "body": "yield ${0}" 581 | }, 582 | "return this": { 583 | "prefix": "rt", 584 | "body": "return this" 585 | }, 586 | "return null": { 587 | "prefix": "rn", 588 | "body": "return null" 589 | }, 590 | "return new object": { 591 | "prefix": "ro", 592 | "body": "return {\n\t${0}\n}" 593 | }, 594 | "return new array": { 595 | "prefix": "ra", 596 | "body": "return [\n\t${0}\n]" 597 | }, 598 | "return promise": { 599 | "prefix": "rp", 600 | "body": "return new Promise((resolve, reject) => {\n\t${0}\n})" 601 | }, 602 | "wrap selection in arrow function": { 603 | "prefix": "wrap selection in arrow function", 604 | "body": "() => {\n\t{$TM_SELECTED_TEXT}\n}", 605 | "description": "wraps text in arrow function" 606 | }, 607 | "wrap selection in async arrow function": { 608 | "prefix": "wrap selection in async arrow function", 609 | "body": "async () => {\n\t{$TM_SELECTED_TEXT}\n}", 610 | "description": "wraps text in arrow function" 611 | } 612 | } 613 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vscode-standardjs-snippets 2 | 3 | Optinionated set of JS snippets. Originally forked from https://github.com/gaboesquivel/atom-standardjs-snippets, but we've added couple more. Also these are not using special characters because vscode doesn't accept them in the snippets. 4 | 5 | ## Standard JavaScript Snippets for Visual studio code 6 | 7 | A collection of javascript and react snippets for faster JavaScript development in [Visual studio Code](https://code.visualstudio.com/). 8 | 9 | This collection is complementary to [atom/language-javascript](https://github.com/atom/language-javascript). It's based on [extrabacon/atom-turbo-javascript](https://github.com/extrabacon/atom-turbo-javascript). 10 | 11 | ## Code style 12 | 13 | **Yes!, no semicolons:** 14 | 15 | - [Are Semicolons Necessary in JavaScript?](https://www.youtube.com/watch?v=gsfbh17Ax9I) 16 | - [An Open Letter to JavaScript Leaders Regarding Semicolons](http://blog.izs.me/post/2353458699/an-open-letter-to-javascript-leaders-regarding) 17 | - [JavaScript Semicolon Insertion - Everything You Need to Know](http://inimino.org/~inimino/blog/javascript_semicolons) 18 | 19 | ## Snippets 20 | 21 | Snippets are optimized to be short and easy to remember. Shortest are the ones you should be using most often. Note that these links work only on github, not on VSCode marketplace: 22 | 23 | - [declarations](#declarations) 24 | - [flow control](#flow-control) 25 | - [functions](#functions) 26 | - [iterables](#iterables) 27 | - [objects and classes](#objects-and-classes) 28 | - [returning values](#returning-values) 29 | - [types](#types) 30 | - [promises](#promises) 31 | - [ES6 modules](#es6-modules) 32 | - [testing](#testing) 33 | - [console](#console) 34 | - [timers](#timers) 35 | - [DOM](#dom) 36 | - [Node.js](#nodejs) 37 | - [miscellaneous](#miscellaneous) 38 | 39 | ### Declarations 40 | 41 | #### `v⇥` var statement 42 | 43 | ```js 44 | var ${1:name} 45 | ``` 46 | 47 | #### `va⇥` var assignment 48 | 49 | ```js 50 | var ${1:name} = ${2:value} 51 | ``` 52 | 53 | #### `l⇥` let statement 54 | 55 | ```js 56 | let ${1:name} 57 | ``` 58 | 59 | #### `la⇥` let assignment awaited 60 | 61 | ```js 62 | let ${1:name} = await ${2:value} 63 | ``` 64 | 65 | #### `ly⇥` let yielded assignment 66 | 67 | ```js 68 | let ${1:name} = yield ${2:value} 69 | ``` 70 | 71 | #### `c⇥` const statement 72 | 73 | ```js 74 | const ${1:name} 75 | ``` 76 | 77 | #### `cd⇥` const from destructuring 78 | 79 | ```js 80 | const { ${1:name} } = ${2:value} 81 | ``` 82 | 83 | #### `ca⇥` const assignment awaited 84 | 85 | ```js 86 | const ${1:name} = await ${2:value} 87 | ``` 88 | 89 | #### `cd⇥` const from destructuring awaited 90 | 91 | ```js 92 | const { ${1:name} } = await ${2:value} 93 | 94 | ``` 95 | 96 | #### `cf⇥` const arrow function assignment 97 | 98 | ```js 99 | const ${1:name} = (${2:arguments}) => {\n\treturn ${0}\n} 100 | ``` 101 | 102 | #### `cy⇥` const yielded assignment 103 | 104 | ```js 105 | const ${1:name} = yield ${2:value} 106 | ``` 107 | 108 | ### Flow Control 109 | 110 | #### `i⇥` if statement 111 | 112 | ```js 113 | if (${1:condition}) { 114 | ${0} 115 | } 116 | ``` 117 | 118 | #### `te⇥` ternary statement 119 | 120 | ```js 121 | ${1:cond} ? ${2:true} : ${3: false} 122 | ``` 123 | 124 | #### `ta⇥` ternary assignment 125 | 126 | ```js 127 | const ${0} = ${1:cond} ? ${2:true} : ${3: false} 128 | ``` 129 | 130 | #### `el⇥` else statement 131 | 132 | ```js 133 | else { 134 | ${0} 135 | } 136 | ``` 137 | 138 | #### `ife⇥` else statement 139 | 140 | ```js 141 | if (${1:condition}) { 142 | ${0} 143 | } else { 144 | 145 | } 146 | ``` 147 | 148 | #### `ei⇥` else if statement 149 | 150 | ```js 151 | else if (${1:condition}) { 152 | ${0} 153 | } 154 | ``` 155 | 156 | #### `fl⇥` for loop (ES6) 157 | 158 | ```js 159 | for (let ${1:i} = 0, ${2:len} = ${3:iterable}.length ${1:i} < ${2:len}; ${1:i}++) { 160 | ${0} 161 | } 162 | ``` 163 | 164 | #### `fi⇥` for in loop (ES6) 165 | 166 | ```js 167 | for (let ${1:key} in ${2:source}) { 168 | if (${2:source}.hasOwnProperty(${1:key})) { 169 | ${0} 170 | } 171 | } 172 | ``` 173 | 174 | #### `fo⇥` for of loop (ES6) 175 | 176 | ```js 177 | for (const ${1:key} of ${2:source}) { 178 | ${0} 179 | } 180 | ``` 181 | 182 | #### `wl⇥` while loop 183 | 184 | ```js 185 | while (${1:condition}) { 186 | ${0} 187 | } 188 | ``` 189 | 190 | #### `wid⇥` while iteration decrementing 191 | 192 | ```js 193 | let ${1:array}Index = ${1:array}.length 194 | while (${1:array}Index--) { 195 | ${0} 196 | } 197 | ``` 198 | 199 | #### `tc⇥` try/catch 200 | 201 | ```js 202 | try { 203 | ${0} 204 | } catch (${1:err}) { 205 | 206 | } 207 | ``` 208 | 209 | #### `tf⇥` try/finally 210 | 211 | ```js 212 | try { 213 | ${0} 214 | } finally { 215 | 216 | } 217 | ``` 218 | 219 | #### `tcf⇥` try/catch/finally 220 | 221 | ```js 222 | try { 223 | ${0} 224 | } catch (${1:err}) { 225 | 226 | } finally { 227 | 228 | } 229 | ``` 230 | 231 | ### Functions 232 | 233 | #### `fan⇥` anonymous function 234 | 235 | ```js 236 | function (${1:arguments}) {${0}} 237 | ``` 238 | 239 | #### `fn⇥` named function 240 | 241 | ```js 242 | function ${1:name}(${2:arguments}) { 243 | ${0} 244 | } 245 | ``` 246 | 247 | #### `asf⇥` async function 248 | 249 | ```js 250 | async function (${1:arguments}) { 251 | ${0} 252 | } 253 | ``` 254 | 255 | #### `aa⇥` async arrow function with 256 | 257 | ```js 258 | async (${1:arguments}) => { 259 | ${0} 260 | } 261 | ``` 262 | 263 | #### `iife⇥` immediately-invoked function expression (IIFE) 264 | 265 | ```js 266 | ;(function (${1:arguments}) { 267 | ${0} 268 | })(${2}) 269 | ``` 270 | 271 | #### `aiife⇥` async immediately-invoked function expression 272 | 273 | very useful when you don't have top level await(node 16 and lower) 274 | 275 | ```js 276 | ;(async (${1:arguments}) => { 277 | ${0} 278 | })(${2}) 279 | ``` 280 | 281 | #### `af⇥` arrow function (ES6) 282 | 283 | ```js 284 | (${1:arguments}) => ${2:statement} 285 | ``` 286 | 287 | #### `afi⇥` arrow function identity 288 | 289 | ```js 290 | ;(v) => v 291 | ``` 292 | 293 | #### `fd⇥` arrow function with destructuring 294 | 295 | ```js 296 | ({${1:arguments}}) => ${2:statement} 297 | ``` 298 | 299 | #### `fdr⇥` arrow function with destructuring returning destructured 300 | 301 | ```js 302 | ({${1:arguments}}) => ${1:arguments} 303 | ``` 304 | 305 | #### `f⇥` arrow function with body (ES6) 306 | 307 | ```js 308 | (${1:arguments}) => { 309 | ${0} 310 | } 311 | ``` 312 | 313 | #### `fr⇥` arrow function with return (ES6) 314 | 315 | ```js 316 | (${1:arguments}) => { 317 | return ${0} 318 | } 319 | ``` 320 | 321 | #### `fro⇥` arrow function with single returned object 322 | 323 | ```js 324 | (${1:arguments}) => ({ 325 | ${0} 326 | }) 327 | ``` 328 | 329 | #### `gf⇥` generator function (ES6) 330 | 331 | ```js 332 | function* (${1:arguments}) { 333 | ${0} 334 | } 335 | ``` 336 | 337 | #### `gfn⇥` named generator function (ES6) 338 | 339 | ```js 340 | function* ${1:name}(${1:arguments}) { 341 | ${0} 342 | } 343 | ``` 344 | 345 | ### Iterables 346 | 347 | #### `fe⇥` forEach loop 348 | 349 | ```js 350 | ${1:iterable}.forEach((${2:item}) => { 351 | ${0} 352 | }) 353 | ``` 354 | 355 | #### `map⇥` map function 356 | 357 | ```js 358 | ${1:iterable}.map((${2:item}) => { 359 | ${0} 360 | }) 361 | ``` 362 | 363 | #### `mapsd⇥` map single desctructured argument 364 | 365 | ```js 366 | ${1:iterable}.map((${2:item}) => ${2:item}) 367 | ``` 368 | 369 | #### `reduce⇥` reduce function 370 | 371 | ```js 372 | ${1:iterable}.reduce((${2:previous}, ${3:current}) => { 373 | ${0} 374 | }${4:, initial}) 375 | ``` 376 | 377 | #### `filter⇥` filter function 378 | 379 | ```js 380 | ${1:iterable}.filter((${2:item}) => { 381 | ${0} 382 | }) 383 | ``` 384 | 385 | #### `find⇥` ES6 find function 386 | 387 | ```js 388 | ${1:iterable}.find((${2:item}) => { 389 | ${0} 390 | }) 391 | ``` 392 | 393 | #### `every⇥` every function 394 | 395 | ```js 396 | ${1:iterable}.every((${2:item}) => { 397 | ${0} 398 | }) 399 | ``` 400 | 401 | #### `some⇥` some function 402 | 403 | ```js 404 | ${1:iterable}.some((${2:item}) => { 405 | ${0} 406 | }) 407 | ``` 408 | 409 | ### Objects and classes 410 | 411 | #### `cs⇥` class (ES6) 412 | 413 | ```js 414 | class ${1:name} { 415 | constructor(${2:arguments}) { 416 | ${0} 417 | } 418 | } 419 | ``` 420 | 421 | #### `csx⇥` extend a class (ES6) 422 | 423 | ```js 424 | class ${1:name} extends ${2:base} { 425 | constructor(${2:arguments}) { 426 | super(${2:arguments}) 427 | ${0} 428 | } 429 | } 430 | ``` 431 | 432 | #### `m⇥` method (ES6 syntax) 433 | 434 | ```js 435 | ${1:method} (${2:arguments}) { 436 | ${0} 437 | } 438 | ``` 439 | 440 | #### `get⇥` getter (ES6 syntax) 441 | 442 | ```js 443 | get ${1:property} () { 444 | ${0} 445 | } 446 | ``` 447 | 448 | #### `set⇥` setter (ES6 syntax) 449 | 450 | ```js 451 | set ${1:property} (${2:value}) { 452 | ${0} 453 | } 454 | ``` 455 | 456 | #### `gs⇥` getter and setter (ES6 syntax) 457 | 458 | ```js 459 | get ${1:property} () { 460 | ${0} 461 | } 462 | set ${1:property} (${2:value}) { 463 | 464 | } 465 | ``` 466 | 467 | #### `proto⇥` prototype method 468 | 469 | ```js 470 | ${1:Class}.prototype.${2:methodName} = function (${3:arguments}) { 471 | ${0} 472 | } 473 | ``` 474 | 475 | #### `ok` Object.keys 476 | 477 | ```js 478 | Object.keys(${1:obj}) 479 | ``` 480 | 481 | #### `ov` Object.values 482 | 483 | ```js 484 | Object.values(${1:obj}) 485 | ``` 486 | 487 | #### `oe` Object.entries 488 | 489 | ```js 490 | Object.entries(${1:obj}) 491 | ``` 492 | 493 | #### `oc` Object.create 494 | 495 | ```js 496 | Object.create(${1:obj}) 497 | ``` 498 | 499 | #### `oa` Object.assign 500 | 501 | ```js 502 | Object.assign(${1:dest}, ${2:source}) 503 | ``` 504 | 505 | #### `og` Object.getOwnPropertyDescriptor 506 | 507 | ```js 508 | Object.getOwnPropertyDescriptor(${1:dest}, '${2:prop}') 509 | ``` 510 | 511 | #### `od` Object.defineProperty 512 | 513 | ```js 514 | Object.defineProperty(${1:dest}, '${2:prop}', { 515 | ${0} 516 | }) 517 | ``` 518 | 519 | ### Returning values 520 | 521 | #### `r⇥` return 522 | 523 | ```js 524 | return ${0} 525 | ``` 526 | 527 | #### `rt⇥` return this 528 | 529 | ```js 530 | return this 531 | ``` 532 | 533 | #### `rn⇥` return null 534 | 535 | ```js 536 | return null 537 | ``` 538 | 539 | #### `rf⇥` return arrow function 540 | 541 | ```js 542 | return (${1:arguments}) => ${2:statement} 543 | ``` 544 | 545 | #### `ro⇥` return new object 546 | 547 | ```js 548 | return { 549 | ${0} 550 | } 551 | ``` 552 | 553 | #### `ra⇥` return new array 554 | 555 | ```js 556 | return [ 557 | ${0} 558 | ] 559 | ``` 560 | 561 | #### `rp⇥` return Promise (ES6) 562 | 563 | ```js 564 | return new Promise((resolve, reject) => { 565 | ${0} 566 | }) 567 | ``` 568 | 569 | #### `tof⇥` typeof comparison 570 | 571 | ```js 572 | typeof ${1:source} === '${2:undefined}' 573 | ``` 574 | 575 | #### `tf⇥` this 576 | 577 | ```js 578 | this. 579 | ``` 580 | 581 | #### `iof⇥` instanceof comparison 582 | 583 | ```js 584 | ${1:source} instanceof ${2:Object} 585 | ``` 586 | 587 | #### `ia⇥` isArray 588 | 589 | ```js 590 | Array.isArray(${1:source}) 591 | ``` 592 | 593 | ### Promises 594 | 595 | #### `pa⇥` Promise.all 596 | 597 | ```js 598 | Promise.all(${1:value}) 599 | ``` 600 | 601 | #### `p⇥` new Promise (ES6) 602 | 603 | ```js 604 | new Promise((resolve, reject) => { 605 | ${0} 606 | }) 607 | ``` 608 | 609 | #### `pt⇥` Promise.then 610 | 611 | ```js 612 | ${1:promise}.then((${2:value}) => { 613 | ${0} 614 | }) 615 | ``` 616 | 617 | #### `pc⇥` Promise.catch 618 | 619 | ```js 620 | ${1:promise}.catch(error => { 621 | ${0} 622 | }) 623 | ``` 624 | 625 | ### ES6 modules 626 | 627 | #### `e⇥` module export 628 | 629 | ```js 630 | export ${1:member} 631 | ``` 632 | 633 | #### `ed⇥` module default export 634 | 635 | ```js 636 | export default ${1:member} 637 | ``` 638 | 639 | #### `edf⇥` module default export function 640 | 641 | ```js 642 | export default function ${1:name} (${2:arguments}) {\n\t${0}\n} 643 | ``` 644 | 645 | #### `ec⇥` module export const 646 | 647 | ```js 648 | export const ${1:member} = ${2:value} 649 | ``` 650 | 651 | #### `ef⇥` module export const 652 | 653 | ```js 654 | export function ${1:member} (${2:arguments}) {\n\t${0}\n} 655 | ``` 656 | 657 | #### `im⇥` module import 658 | 659 | ```js 660 | import ${1:*} from '${2:module}' 661 | ``` 662 | 663 | #### `ia⇥` module import as 664 | 665 | ```js 666 | import ${1:*} as ${2:name} from '${3:module}' 667 | ``` 668 | 669 | #### `id⇥` module import destructuring 670 | 671 | ```js 672 | import { $1 } from '${2:module}' 673 | ``` 674 | 675 | ### BDD testing (Mocha, Jasmine, etc.) 676 | 677 | #### `desc⇥` describe 678 | 679 | ```js 680 | describe('${1:description}', function () { 681 | ${0} 682 | }) 683 | ``` 684 | 685 | #### `dt` describe top level 686 | 687 | ```js 688 | describe('${TM_FILENAME_BASE}', function () { 689 | ${0} 690 | }) 691 | ``` 692 | 693 | #### `it⇥` asynchronous "it" 694 | 695 | ```js 696 | it('${1:description}', async () => { 697 | ${0} 698 | }) 699 | ``` 700 | 701 | #### `itd⇥` "it" with callback 702 | 703 | ```js 704 | it('${1:description}', (done) => { 705 | ${0} 706 | }) 707 | ``` 708 | 709 | #### `its⇥` "it" synchronous 710 | 711 | ```js 712 | it('${1:description}', () => { 713 | ${0} 714 | }) 715 | ``` 716 | 717 | #### `bf⇥` before test suite 718 | 719 | ```js 720 | before(function () { 721 | ${0} 722 | }) 723 | ``` 724 | 725 | #### `bfe⇥` before each test 726 | 727 | ```js 728 | beforeEach(function () { 729 | ${0} 730 | }) 731 | ``` 732 | 733 | #### `aft⇥` after test suite 734 | 735 | ```js 736 | after(function () { 737 | ${0} 738 | }) 739 | ``` 740 | 741 | #### `afe⇥` after each test 742 | 743 | ```js 744 | afterEach(function () { 745 | ${0} 746 | }) 747 | ``` 748 | 749 | ### Timers 750 | 751 | #### `st⇥` setTimeout 752 | 753 | ```js 754 | setTimeout(() => { 755 | ${0} 756 | }, ${1:delay}) 757 | ``` 758 | 759 | #### `si⇥` setInterval 760 | 761 | ```js 762 | setTimeout(() => { 763 | ${0} 764 | }, ${1:delay}) 765 | ``` 766 | 767 | #### `sim⇥` setImmediate 768 | 769 | ```js 770 | setImmediate(() => { 771 | ${0} 772 | }) 773 | ``` 774 | 775 | ### DOM 776 | 777 | #### `ae⇥` addEventListener 778 | 779 | ```js 780 | ${1:document}.addEventListener('${2:event}', ${3:ev} => { 781 | ${0} 782 | }) 783 | ``` 784 | 785 | #### `rel⇥` removeEventListener 786 | 787 | ```js 788 | ${1:document}.removeEventListener('${2:event}', ${3:listener}) 789 | ``` 790 | 791 | #### `evc` dom event cancel default and propagation 792 | 793 | ```js 794 | ev.preventDefault() 795 | ev.stopPropagation() 796 | return false 797 | ``` 798 | 799 | #### `gi⇥` getElementById 800 | 801 | ```js 802 | ${1:document}.getElementById('${2:id}') 803 | ``` 804 | 805 | #### `gc⇥` getElementsByClassName 806 | 807 | ```js 808 | Array.from(${1:document}.getElementsByClassName('${2:class}')) 809 | ``` 810 | 811 | #### `gt⇥` getElementsByTagName 812 | 813 | ```js 814 | Array.from(${1:document}.getElementsByTagName('${2:tag}')) 815 | ``` 816 | 817 | #### `qs⇥` querySelector 818 | 819 | ```js 820 | ${1:document}.querySelector('${2:selector}') 821 | ``` 822 | 823 | #### `qsa⇥` querySelectorAll 824 | 825 | ```js 826 | Array.from(${1:document}.querySelectorAll('${2:selector}')) 827 | ``` 828 | 829 | #### `cdf⇥` createDocumentFragment 830 | 831 | ```js 832 | ${1:document}.createDocumentFragment(${2:elem}); 833 | ``` 834 | 835 | #### `cel⇥` createElement 836 | 837 | ```js 838 | ${1:document}.createElement(${2:elem}); 839 | ``` 840 | 841 | #### `heac⇥` appendChild 842 | 843 | ```js 844 | ${1:document}.appendChild(${2:elem}); 845 | ``` 846 | 847 | #### `herc⇥` removeChild 848 | 849 | ```js 850 | ${1:document}.removeChild(${2:elem}); 851 | ``` 852 | 853 | #### `hecla⇥` classList.add 854 | 855 | ```js 856 | ${1:document}.classList.add('${2:class}'); 857 | ``` 858 | 859 | #### `hect⇥` classList.toggle 860 | 861 | ```js 862 | ${1:document}.classList.toggle('${2:class}'); 863 | ``` 864 | 865 | #### `heclr⇥` classList.remove 866 | 867 | ```js 868 | ${1:document}.classList.remove('${2:class}'); 869 | ``` 870 | 871 | #### `hega⇥` getAttribute 872 | 873 | ```js 874 | ${1:document}.getAttribute('${2:attr}'); 875 | ``` 876 | 877 | #### `hesa⇥` setAttribute 878 | 879 | ```js 880 | ${1:document}.setAttribute('${2:attr}', ${3:value}); 881 | ``` 882 | 883 | #### `hera⇥` removeAttribute 884 | 885 | ```js 886 | ${1:document}.removeAttribute('${2:attr}'); 887 | ``` 888 | 889 | ### Node.js 890 | 891 | #### `cb⇥` Node.js style callback 892 | 893 | ```js 894 | function (err, ${1:value}) { 895 | if (err) throw err 896 | t${0} 897 | } 898 | ``` 899 | 900 | #### `rq⇥` require a module 901 | 902 | ```js 903 | require('${1:module}') 904 | ``` 905 | 906 | #### `cr⇥` require and assign a module 907 | 908 | ```js 909 | const ${1:module} = require('${1:module}') 910 | ``` 911 | 912 | #### `em⇥` export member 913 | 914 | ```js 915 | exports.${1:name} = ${2:value} 916 | ``` 917 | 918 | #### `me⇥` module.exports 919 | 920 | ```js 921 | module.exports = ${1:name} 922 | ``` 923 | 924 | #### `on⇥` attach an event handler 925 | 926 | ```js 927 | ${1:emitter}.on('${2:event}', (${3:arguments}) => { 928 | ${0} 929 | }) 930 | ``` 931 | 932 | ### Miscellaneous 933 | 934 | #### `uss⇥` use strict 935 | 936 | ```js 937 | 'use strict' 938 | ``` 939 | 940 | #### `js⇥` JSON Stringify 941 | 942 | ```js 943 | JSON.stringify($0) 944 | ``` 945 | 946 | #### `jp⇥` JSON Parse 947 | 948 | ```js 949 | JSON.parse($0) 950 | ``` 951 | 952 | #### `a⇥` await 953 | 954 | ```js 955 | await ${0} 956 | ``` 957 | 958 | #### `apa⇥` Promise.all 959 | 960 | ```js 961 | await Promise.all(${1:value}) 962 | ``` 963 | 964 | #### `apm⇥` Promise.all map 965 | 966 | ```js 967 | await Promise.all(${1:array}.map((async ${2:value}) => {\n\t${0}\n})) 968 | ``` 969 | 970 | #### `ast⇥` Promise sleep 971 | 972 | ```js 973 | await new Promise((r) => setTimeout(r, ${0})) 974 | ``` 975 | 976 | ### Console 977 | 978 | #### `cl⇥` console.log 979 | 980 | ```js 981 | console.log(${0}) 982 | ``` 983 | 984 | #### `cv⇥` console.log 985 | 986 | ```js 987 | console.log('${0}:', ${0}) 988 | ``` 989 | 990 | #### `ce⇥` console.error 991 | 992 | ```js 993 | console.error(${0}) 994 | ``` 995 | 996 | #### `cw⇥` console.warn 997 | 998 | ```js 999 | console.warn(${0}) 1000 | ``` 1001 | 1002 | #### `cod⇥` console.dir 1003 | 1004 | ```js 1005 | console.dir(${0}) 1006 | ``` 1007 | 1008 | ## React snippets 1009 | 1010 | Are only enabled in `jsx` or `tsx` files. If you write your jsx in `js` files, you need to copy the `react.json` files manually and add it to your custom snippets. 1011 | 1012 | ### Why do we include them here? 1013 | 1014 | If you're not writing react, including them should not really bother you because they are not short as the regular JS snippets. Also IMHO react is the leading solution for FE apps deserves to be included by default, because any JS dev will have to write some react eventually over the course of his/her careeer. By having them in a single package we can easily make sure --there aren't any conflicts in the trigger prefixes. 1015 | 1016 | ### Supported languages (file extensions) 1017 | 1018 | - JavaScript (.js) 1019 | - TypeScript (.ts) 1020 | - JavaScript React (.jsx) 1021 | - TypeScript React (.tsx) 1022 | 1023 | These were originally taken from https://github.com/TimonVS/vscode-react-standard because the maintainer wasn't able to publish a new version for months even when there was a considerable flaw in the released version. 1024 | Below is a list of all available snippets and the triggers of each one. 1025 | 1026 | | Trigger | Content | 1027 | | ------- | ------------------------------------------------------------------------------------ | 1028 | | `j` | jsx element | 1029 | | `dp` | destructuring of props | 1030 | | `ds` | destructuring of props | 1031 | | `jc` | jsx self-closed element | 1032 | | `jm` | `jsx elements map` | 1033 | | `jmr` | `jsx elements map with return` | 1034 | | `rfc` | functional component. Prefer for 99% of new react component | 1035 | | `rfce` | functional component with emotion css import | 1036 | | `rcc` | class component skeleton | 1037 | | `rccp` | class component skeleton with prop types after the class | 1038 | | `rcjc` | class component skeleton without import and default export lines | 1039 | | `rcfc` | class component skeleton that contains all the lifecycle methods | 1040 | | `rfcp` | stateless component with prop types skeleton | 1041 | | `rpt` | empty propTypes declaration | 1042 | | `con` | class default constructor with props | 1043 | | `conc` | class default constructor with props and context | 1044 | | `est` | empty state object | 1045 | | `cwm` | `componentWillMount method` | 1046 | | `cdm` | `componentDidMount method` | 1047 | | `cwr` | `componentWillReceiveProps method` | 1048 | | `cgd` | `componentGetDerivedStateFromProps method` | 1049 | | `scu` | `shouldComponentUpdate method` | 1050 | | `cwup` | `componentWillUpdate method` | 1051 | | `cdup` | `componentDidUpdate method` | 1052 | | `cwun` | `componentWillUnmount method` | 1053 | | `ren` | `render method` | 1054 | | `sst` | `this.setState with object as parameter` | 1055 | | `ssf` | `this.setState with function as parameter` | 1056 | | `tp` | `this.props` | 1057 | | `ts` | `this.state` | 1058 | | `us` | `useState` | 1059 | | `ue` | `useEffect` | 1060 | | `uec` | `useEffect` with a cleanup function | 1061 | | `ur` | `useRef` | 1062 | | `cc` | `createContext` | 1063 | | `uc` | `useContext` | 1064 | | `ume` | `useMemo` | 1065 | | ------- | ---------------------------------------------------------------- | 1066 | | `uq` | `useQuery` to be used with graphql-codegen | 1067 | | `uqc` | `useQuery` that loads up data for current component, to be used with graphql-codegen | 1068 | | `um` | `useMutation` to be used with graphql-codegen | 1069 | | `uqg` | `useQuery with raw gql` | 1070 | | `umg` | `useMutation with raw gql` | 1071 | 1072 | There are also snippets to be triggered with a text selection(trigger via insert snippet command): 1073 | 1074 | ``` 1075 | jsx element wrap selection 1076 | ``` 1077 | --------------------------------------------------------------------------------