People should have their own snippet.
https://github.com/abusaidm/html-snippets
https://github.com/xabikos/vscode-javascript ⭐️
https://github.com/DonJayamanne/jquerysnippets
https://github.com/johnpapa/vscode-angular-snippets
https://github.com/burkeholland/simple-react-snippets
https://github.com/chillios-ts/vscode-react-javascript-snippets
https://github.com/hollowtree/vscode-vue-snippets
{
// cmmb
"commentBigBlock": {
"prefix": "cmmb",
"body": ["/**", " * ${1:first}", " */"],
"scope": "typescript,typescriptreact,javascript,javascriptreact"
},
// cgr cge clg clo cls
"consoleClear": {
"prefix": "cls",
"body": ["console.clear();", "$0"],
"description": "Clears the console"
},
"consoleGroup": {
"prefix": "cgr",
"body": ["console.group('log group');", "$0", "console.groupEnd();"],
"description": "Groups and indents all following output by an additional level, until console.groupEnd() is called."
},
"consoleLog": {
"prefix": "clg",
"body": ["console.log(${1:object});", "$0"],
"description": "Displays a message in the console"
},
"consoleLogObject": {
"prefix": "clo",
"body": ["console.log('${1:object} :>> ', ${1:object});", "$0"],
"description": "Displays an object in the console with its name"
},
// imp imn imd
"import": {
"prefix": "imp",
"body": "import ${2:moduleName} from '${1:module}';$0",
"description": "Imports entire module statement in ES6 syntax"
},
"importNoModuleName": {
"prefix": "imn",
"body": "import '${1:module}';$0",
"description": "Imports entire module in ES6 syntax without module name"
},
"importDestructing": {
"prefix": "imd",
"body": "import { $2 } from '${1:module}';$0",
"description": "Imports only a portion of the module in ES6 syntax"
},
"exportEverything": {
"prefix": "ex-router",
"body": [
"export * from '${1:module}';",
"export { default } from '${1:module}';$0"
],
"description": "Exports everything from a module, so that the module doesn't need to be named 'index.tsx'"
},
// edf
"exportDefaultFunction": {
"prefix": "edf",
"body": "export default function ${1:${TM_FILENAME_BASE}}(${2:params}) {\n\t$0\n};\n",
"description": "Export default function in ES6 syntax"
},
// fre
"forEach": {
"prefix": "fre",
"body": "${1:array}.forEach(${2:currentItem} => {\n\t${0}\n});",
"description": "Creates a forEach statement in ES6 syntax"
},
// nfn anfn
"namedFunction": {
"prefix": "nfn",
"body": "const ${1:name} = (${2:params}) => {\n\t${3}\n}",
"description": "Creates a named function in ES6 syntax"
},
"anonymousFunction": {
"prefix": "anfn",
"body": "(${1:params}) => {\n\t${2}\n}",
"description": "Creates an anonymous function in ES6 syntax"
},
// dob dar
"destructingObject": {
"prefix": "dob",
"body": "const {${2:propertyName}} = ${1:objectToDestruct};",
"description": "Creates and assigns a local variable using object destructing"
},
"destructingArray": {
"prefix": "dar",
"body": "const [${2:propertyName}] = ${1:arrayToDestruct};",
"description": "Creates and assigns a local variable using array destructing"
},
/**
* React
*/
// fc
"Function Syntax Component": {
"prefix": "fc",
"body": [
"export default function $1($2) {",
"$0",
"\treturn ( <>I am $1</> );",
"}"
],
"description": "Function Syntax Component"
},
// uef ust
"useEffect": {
"prefix": "uef",
"body": ["useEffect(() => {", "\t$1", "}, []);"],
"description": "useEffect Hook"
},
"Declare a new state variable using State Hook": {
"prefix": "ust",
"body": ["const [${1}, set${1/(.*)/${1:/capitalize}/}] = useState($2);"],
"description": "Declare a new state Variable using the State Hook. Hit Tab to apply CamelCase to function"
}
}