Skip to content

Instantly share code, notes, and snippets.

@maranomynet

maranomynet/snippets.code-snippets

Created September 5, 2022 15:52
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save maranomynet/2276c11646b19bd4617cc3b0ce3eec81 to your computer and use it in GitHub Desktop.
Save maranomynet/2276c11646b19bd4617cc3b0ce3eec81 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
snippets.code-snippets
{
// Place your global snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and
// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope
// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is
// used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders.
// Placeholders with the same ids are connected.
// Example:
// "Print to console": {
// "scope": "javascript,typescript,typescriptreact",
// "prefix": "log",
// "body": [
// "console.log('$1');",
// "$2"
// ],
// "description": "Log output to console"
// }
// See more: https://code.visualstudio.com/docs/editor/userdefinedsnippets
// CSS:
// --------------------------------------------------------------------------------
"Flex-item properties": {
"scope": "css,scss",
"prefix": "flexitem",
"body": [
"// flex-grow: 0",
"// flex-shrink: 1",
"// flex-basis: auto // auto uses css width/height",
"// order: 0",
"// // Override align-items (like vertical-align) on the parent",
"// align-self: auto // auto | flex-start | flex-end | center | baseline | stretch"
]
},
"Flex-box properties": {
"scope": "css,scss",
"prefix": "flexbox",
"body": [
"display: flex // flex | inline-flex",
"// flex-flow: row nowrap",
"// // Distribution along the flex-direction",
"// justify-content: flex-start // flex-start | flex-end | center | space-between | space-around",
"// // Similar to vertical-align",
"// align-items: stretch // stretch | flex-start | flex-end | center | baseline",
"// // Line-distribution for wrapped items (multi-line flex-box) - similar to line-height",
"// align-content: stretch // stretch | flex-start | flex-end | center | space-between | space-around"
]
},
"/*!@deps ... */": {
"scope": "css,scss",
"prefix": "deps",
"body": "/*!@deps\n\t$1\n*/\n"
},
"width": {
"scope": "css,scss",
"prefix": "w",
"body": "width: $1"
},
"height": {
"scope": "css,scss",
"prefix": "h",
"body": "height: $1"
},
"!important": {
"scope": "css,scss",
"prefix": "!important",
"body": "!important"
},
"remove underline": {
"scope": "css,scss",
"prefix": "noul",
"body": "text-decoration: none"
},
"float": {
"scope": "css,scss",
"prefix": "fl",
"body": "float: ${1|left,right,none|}"
},
"float: right": {
"scope": "css,scss",
"prefix": "flr",
"body": "float: right"
},
"display: none": {
"scope": "css,scss",
"prefix": "none",
"body": "display: none"
},
"display: block": {
"scope": "css,scss",
"prefix": "block",
"body": "display: block"
},
"display: inline": {
"scope": "css,scss",
"prefix": "inl",
"body": "display: inline"
},
"display: inline-block": {
"scope": "css,scss",
"prefix": "inlbl",
"body": "display: inline-block"
},
"position": {
"scope": "css,scss",
"prefix": "position",
"body": "position: ${1|absolute,relative,fixed,static|}"
},
"position: absolute": {
"scope": "css,scss",
"prefix": ["absolute", "abs"],
"body": "position: absolute"
},
"position: relative": {
"scope": "css,scss",
"prefix": "relative",
"body": "position: relative"
},
"position: fixed": {
"scope": "css,scss",
"prefix": "fixed",
"body": "position: fixed"
},
"linear gradient": {
"scope": "css,scss",
"prefix": "gradient",
"body": "background-image: linear-gradient( ${1:180}deg, ${2:#fff} 0%, ${2:#000} 100% )"
},
"transition properties": {
"scope": "css,scss",
"prefix": "transition full props",
"body": [
"transition: color .08s ease-in-out",
"transition-property: a,b",
"transition-duration: a,b",
"transition-delay: a,b",
"transition-timing-function: a,b"
]
},
"animation properties": {
"scope": "css,scss",
"prefix": "animation full props",
"body": [
"animation-name: none",
"animation-duration: 0ms",
"// animation-timing-function: ease // https://developer.mozilla.org/en-US/docs/Web/CSS/single-transition-timing-function",
"// animation-delay: 0ms",
"// animation-iteration-count: 1 // <float> | infinite",
"// animation-direction: normal // normal | reverse | alternate | alternate-reverse",
"// animation-fill-mode: none // none | forwards | backwards | both",
"// animation-play-state: running // running | paused",
""
]
},
"Prettier ignore line (css)": {
"scope": "css",
"prefix": "prettier-ignore-line",
"body": "/* prettier-ignore */"
},
"---- Divider (css)": {
"scope": "css",
"prefix": ["divider"],
"body": "/* ------------------------------------------------------------------------ */"
},
"=== Divider (css)": {
"scope": "css",
"prefix": ["divider"],
"body": "/* ======================================================================== */"
},
// SCSS / SASS:
// --------------------------------------------------------------------------------
"prem() helper": {
"scope": "scss",
"prefix": ["prem", " px", "rem"],
"body": "prem($1)"
},
"#{$variable}": {
"scope": "scss",
"prefix": "#",
"body": "#{${1:variable}}"
},
"@function definition": {
"scope": "scss",
"prefix": "function",
"body": "@function ${1:functionName}($2) {$0\n}"
},
"@mixin definition": {
"scope": "scss",
"prefix": "mixin",
"body": "@mixin ${1:mixinName}($2) {$0\n}"
},
"@include mixin": {
"scope": "scss",
"prefix": ["mix", "include"],
"body": "@include ${1:mixinName};$0"
},
"buttonReset()": {
"scope": "scss",
"prefix": ["buttonreset", "resetbutton"],
"body": "@include buttonReset();\n"
},
"@include media($mq-) {}": {
"scope": "scss",
"prefix": ["media", "@media"],
"body": "@include media(\\$mq-$1) {$0\n}"
},
"@media #{$mq-} {}": {
"scope": "scss",
"prefix": ["media", "@media"],
"body": "@media ${2:#{\\$mq-$1\\}} {$0\n}"
},
"@if cond {}": {
"scope": "scss",
"prefix": "if",
"body": "@if $1 {$0\n}"
},
"@else {}": {
"scope": "scss",
"prefix": "elseif",
"body": "@else {$0\n}"
},
"@else if cond {}": {
"scope": "scss",
"prefix": "elseif",
"body": "@else if $1 {$0\n}"
},
"empty scss module": {
"scope": "scss",
"prefix": ["module", "component"],
"body": "@use '_globals' as *;\n\n@media screen {\n\n\t.$1 {$0\n\t}\n\n}\n"
},
"@use ... as *": {
"scope": "scss",
"prefix": ["use", "@use"],
"body": "@use '$1' ${2:as *};"
},
"Prettier ignore line (scss)": {
"scope": "scss",
"prefix": "prettier-ignore-line",
"body": "// prettier-ignore"
},
"@keyframe and mixin": {
"scope": "scss",
"prefix": "keyframes mixin",
"body": [
"@keyframes ${1:identifier} {",
"\t0% {",
"\t}",
"\t100% {",
"\t}",
"}",
"@mixin _${1:identifier}-animation() {",
"\tanimation-name: ${1:identifier};",
"\tanimation-duration: 0ms;",
"\t// animation-timing-function: ease; // https://developer.mozilla.org/en-US/docs/Web/CSS/single-transition-timing-function",
"\t// animation-delay: 0ms;",
"\t// animation-iteration-count: 1; // <float> | infinite",
"\t// animation-direction: normal; // normal | reverse | alternate | alternate-reverse",
"\t// animation-fill-mode: none; // none | forwards | backwards | both",
"\t// animation-play-state: running; // running | paused",
"}"
]
},
"&:hover, &:active, &:focus-visible": {
"scope": "scss",
"prefix": "hover-active-focus-visible",
"body": "@include hoverActiveKeyboardFocus-selector${1| ,($active: false) ,($focus: false) |}{\n\t$0\n}"
},
"&:hover, &:active": {
"scope": "scss",
"prefix": "hover-active ",
"body": "${1:&}:hover,\n${1:&}:active {\n\t$0\n}"
},
"&:focus-visible": {
"scope": "scss",
"prefix": "focus-visible",
"body": "@include keyboardFocus-selector {\n\t$0\n}"
},
"&:focus:not(:focus-visible)": {
"scope": "scss",
"prefix": "focus-non-keyboard",
"body": "@include nonKeyboardFocus-selector {\n\t$0\n}"
},
"rgba() helper": {
"scope": "scss",
"prefix": "rgba",
"body": "rgba(${1:#000}, .${2:35})"
},
"&::before": {
"scope": "scss",
"prefix": "before",
"body": "&::before {\n\t$0\n}"
},
"&::after": {
"scope": "scss",
"prefix": "after",
"body": "&::after {\n\t$0\n}"
},
// javascript,typescript,typescriptreact:
// --------------------------------------------------------------------------------
"Branded type": {
"scope": "typescript,typescriptreact",
"prefix": "branded-type",
"body": [
"declare const _$1__Brand: unique symbol;",
"/** $3 */",
"export type $1 = $2 & { [_$1__Brand]: true };"
]
},
"Console Log": {
"scope": "javascript,typescript,typescriptreact",
"prefix": "log",
"body": "console.log($0);"
},
"Class": {
"scope": "javascript,typescript,typescriptreact",
"prefix": "class",
"body": "class ${1:MyComponent} extends ${2:React.Component} {\n\n\t$0\n\n}"
},
"Constructor": {
"scope": "javascript,typescript,typescriptreact",
"prefix": "constr",
"body": "constructor(props) {\n\tsuper(props);\n\t$0\n}"
},
"Arrow function": {
"scope": "javascript,typescript,typescriptreact",
"prefix": "fn",
"body": "(${1:param}) => ${2:{${3}\\}}"
},
"Identity function": {
"scope": "javascript,typescript,typescriptreact",
"prefix": "fni",
"body": "(${1:x}) => ${1:x}$0"
},
"Function": {
"scope": "javascript,typescript,typescriptreact",
"prefix": "func",
"body": "function (${1:param}) {$0}"
},
"Destructure Object": {
"scope": "javascript,typescript,typescriptreact",
"prefix": "destructure",
"body": "const { ${0} } = ${1:obj}"
},
"Destructure Array": {
"scope": "javascript,typescript,typescriptreact",
"prefix": "destructure array",
"body": "const [ ${0} ] = ${1:arr}"
},
"Required children prop": {
"scope": "typescript,typescriptreact",
"prefix": "children-required",
"body": "children: NonNullable<ReactNode$1>;"
},
"useState()": {
"scope": "javascript,typescript,typescriptreact",
"prefix": "usestate",
"body": "const [ ${2:name}, set${2/(.*)/${1:/capitalize}/} ] = useState$1(${3:initial})"
},
"React effect hook pattern": {
"scope": "javascript,typescript,typescriptreact",
"prefix": ["hook", "effect"],
"body": "${1:useEffect}(${2:() => {${3}\\}}, [])"
},
"Ospec Test File": {
"scope": "javascript,typescript,typescriptreact",
"prefix": "ospec",
"body": [
"import o from 'ospec';",
"import ${2:{ ${3} \\}} from '${1}';",
"",
"o.spec('$4', () => {",
" o('${5:works}', () => {",
" $0o(false).equals(true);",
" });",
"});"
]
},
"Ospec Spec": {
"scope": "javascript,typescript,typescriptreact",
"prefix": "ospec-spec",
"body": [
"o.spec('${1:thing}', () => {",
" o('${2:works}', () => {",
" $0",
" });",
"});"
]
},
"Ospec Test": {
"scope": "javascript,typescript,typescriptreact",
"prefix": "ospec-test",
"body": ["o('${1:works}', () => {", " $0", "});"]
},
"Ospec Assert": {
"scope": "javascript,typescript,typescriptreact",
"prefix": ["o", "ospec-assert"],
"body": "o(${1:input}).${2:equals}(${3:expected});"
},
"Import": {
"scope": "javascript,typescript,typescriptreact",
"prefix": ["imp", "import"],
"body": "import ${2:{ ${3} \\}} from '${1}';$0"
},
"Preact import (js)": {
"scope": "javascript,typescript,typescriptreact",
"prefix": "preact",
"body": "/** @jsx h */\nimport { h } from 'preact';$0"
},
"React import": {
"scope": "javascript,typescript,typescriptreact",
"prefix": "react",
"body": "import React from 'react';$0"
},
"Function Component (tsx)": {
"scope": "typescript,typescriptreact",
"prefix": "component",
"body": [
"import React from 'react';",
"",
"export type ${1}Props = {",
" $2",
"}",
"",
"export const $1 = (props: ${1}Props) => {",
" const { $3 } = props;",
" return (",
" $0",
" );",
"};"
]
},
"Function Component (js)": {
"scope": "javascript",
"prefix": "component",
"body": [
"import React from 'react';",
"",
"/*",
"type ${1}Props = {",
" $2",
"}",
"*/",
"export const $1 = (props/*: ${1}Props */) => {",
" const { $3 } = props;",
" return (",
" $0",
" );",
"};"
]
},
"Export from": {
"scope": "javascript,typescript,typescriptreact",
"prefix": "export-from",
"body": "export { ${2:default} } from '${1}';$0"
},
"Bind Instance Method": {
"scope": "javascript,typescript,typescriptreact",
"prefix": "thisbind",
"body": "this.${1:method} = this.${1:method}.bind(this);$0"
},
"React Key Props": {
"scope": "javascript,typescript,typescriptreact",
"prefix": "key",
"body": "key={i}"
},
"Disable ESLint rule(s)": {
"scope": "javascript,typescript,typescriptreact",
"prefix": "eslint-disable",
"body": "/* eslint-disable ${1:rule-name1, rule-name2} */\n$0/* eslint-enable */"
},
"Disable ESLint rule(s) on current line": {
"scope": "javascript,typescript,typescriptreact",
"prefix": "eslint-disable-line",
"body": "// eslint-disable-line ${1:rule-name1, rule-name2}"
},
"Disable ESLint rule(s) on next line": {
"scope": "javascript,typescript,typescriptreact",
"prefix": "eslint-disable-next-line",
"body": "// eslint-disable-next-line ${1:class-methods-use-this}"
},
"@jsx directive": {
"scope": "javascript,typescript,typescriptreact",
"prefix": "jsx",
"body": "/** @jsx ${1:E} */"
},
"#__PURE__ directive": {
"scope": "javascript,typescript,typescriptreact",
"prefix": "#__PURE__",
"body": "/*#__PURE__*/"
},
"Prettier ignore line (js)": {
"scope": "javascript,typescript,typescriptreact",
"prefix": "prettier-ignore-line",
"body": "/* prettier-ignore */"
},
"Prettier ignore line (jsx)": {
"scope": "jsx",
"prefix": "prettier-ignore-line",
"body": "{/* prettier-ignore */}"
},
"TS testing $ExpectError": {
"scope": "typescript,typescriptreact",
"prefix": ["ExpectError"],
"body": "// $ExpectError"
},
"TS testing $ExpectType": {
"scope": "typescript,typescriptreact",
"prefix": ["ExpectType"],
"body": "// $ExpectType ${1:XXX}"
},
"TypeScript ignore next line": {
"scope": "typescript,typescriptreact",
"prefix": ["ts-ignore", "typscript-ignore"],
"body": "// @ts-ignore (${1:reason})"
},
"TypeScript expect error in next line": {
"scope": "typescript,typescriptreact",
"prefix": ["ts-expect-error", "typscript-expect-error"],
"body": "// @ts-expect-error (${1:reason})"
},
"Mock method without `this`": {
"scope": "javascript,typescript,typescriptreact",
"prefix": "mock-method",
"body": "// eslint-disable-next-line class-methods-use-this\n${1:render}() {\n return$0;\n}"
},
"css`` tagged template literal": {
"scope": "javascript,typescript,typescriptreact",
"prefix": "css",
"body": "css`\n\t$0\n`"
},
// HTML:
// --------------------------------------------------------------------------------
"Prettier ignore line": {
"scope": "html,markdown",
"prefix": "prettier-ignore-line",
"body": "<!-- prettier-ignore -->"
},
"Prettier ignore attribute": {
"scope": "html",
"prefix": "prettier-ignore-attribute",
"body": "<!-- prettier-ignore-attribute (${1:attr}) -->"
},
"rel=\"_blank\" rel=...": {
"scope": "html,javascript,typescript,typescriptreact",
"prefix": "target-blank",
"body": "target=\"_blank\" rel=\"noopener noreferrer\""
},
"rel=\"_blank\"": {
"scope": "html,javascript,typescript,typescriptreact",
"prefix": "rel-noopener-noreferrer",
"body": "rel=\"noopener noreferrer\""
},
// Markdown:
// --------------------------------------------------------------------------------
"Prettier ignore block": {
"scope": "markdown",
"prefix": "prettier-ignore-block",
"body": "<!-- prettier-ignore-start -->\n<!-- prettier-ignore-end -->"
},
// Multi-lang:
// --------------------------------------------------------------------------------
"---- Divider": {
"scope": "javascript,typescript,typescriptreact,scss,jsonc",
"prefix": ["divider"],
"body": "// ---------------------------------------------------------------------------"
},
"=== Divider": {
"scope": "javascript,typescript,typescriptreact,scss,jsonc",
"prefix": ["divider"],
"body": "// ==========================================================================="
},
"Insert ${} variable print block": {
"scope": "javascript,typescript,typescriptreact,css",
"prefix": ["$", "v"],
"body": "\\${$0}"
},
"Insert template string": {
"scope": "javascript,typescript,typescriptreact,css,markdown",
"prefix": "t",
"body": "`$0`"
},
// Global:
// --------------------------------------------------------------------------------
"Insert curly braces": {
"scope": "javascript,typescript,typescriptreact,css,scss,json,text,markdown",
"prefix": "x",
"body": "{$0}"
},
"Insert square brackets": {
"scope": "javascript,typescript,typescriptreact,css,scss,json,text,markdown",
"prefix": "z",
"body": "[$0]"
},
"Lorem ipsum medium": {
"prefix": "lorem-m",
"body": "Vender gests kämmen vewänthärdis wehrdsen onderpasje moose. Ut enim ad minim veniam, letsi ifder svensk og latin makinen dehr graek. Yöva gäta stahrt sömwaer. Nawei raitinen de wehbsyte."
},
"Lorem ipsum long": {
"prefix": "lorem-l",
"body": "Lörem ipsum dolor sit amet, dedeeshka duu. Leebur deroor iehroom, bork bork Björk! Ut enim ad minim veniam, letsi ifder svensk og latin makinen dehr graek. Ut enim ad minim veniam, letsi ifder svensk og latin makinen dehr graek. Nawei raitinen de wehbsyte. Ut enim ad minim veniam, letsi ifder svensk og latin makinen dehr graek. Ut enim ad minim veniam, letsi ifder svensk og latin makinen dehr graek."
},
"Lorem ipsum short": {
"prefix": "lorem-s",
"body": "Yöva gäta stahrt sömwaer. Ut enim ad minim veniam, letsi Björk ifder svensk og latin makinen dehr graek."
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment