{
/*** HTML ***/
"HTML Boilerplate": {
"scope": "html",
"prefix": "html-boilerplate",
"body": [
"",
"",
"",
"",
"${1:Document}",
"",
"",
"",
"",
"",
""
]
},
"Class Attribute": {
"scope": "html",
"prefix": "class",
"body": "class=\"$0\""
},
"Id Attribute": {
"scope": "html",
"prefix": "id",
"body": "id=\"$0\""
},
/*** CSS ***/
"Basic Reset": {
"scope": "css,scss",
"prefix": "basic-reset",
"body": [
":where(*, *::before, *::after) {",
"margin: 0;",
"padding: 0;",
"box-sizing: border-box;",
"-webkit-font-smoothing: antialiased;",
"}",
"html {",
"/* By default, “1rem == 16px” and “1rem == 10px” is preferred => “10px / 16px === 0.625 === 62.5%” */",
"/* font-size: 62.5%; */",
"/* font-size: calc(15px + 0.390625vw); reference: https://matthewjamestaylor.com/responsive-font-size",
"} */",
"font-size: calc(1.0625rem + 0.2604vw); /* reference: https://jameshfisher.com/2024/03/12/a-formula-for-responsive-font-size/ */",
"}",
"body {",
"font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, 'Helvetica Neue', sans-serif;",
"padding: calc(8px + 1.5625vw); /* reference: https://matthewjamestaylor.com/responsive-padding */",
"min-height: 100vh;",
"display: flex;",
"align-items: center;",
"justify-content: center;",
"/* color: #353535; */",
"/* background-color: #f5f5f5; */",
"}",
"img { vertical-align: middle; }",
""
]
},
"Media query": {
"scope": "css,scss,vue",
"prefix": "media query min",
"body": ["@media screen and (min-width: $1em) {", " $0", "}"]
},
"Variable": {
"scope": "css,scss,vue",
"prefix": "var",
"body": "var(--$0)"
},
/*** JavaScript & TypeScript ***/
"Get Element By ID": {
"scope": "javascript,typescript",
"prefix": "getId",
"body": "document.getElementById('$1')$0"
},
"Get The First Element By CSS Selector": {
"scope": "javascript,typescript",
"prefix": "query",
"body": "document.querySelector('$1')$0"
},
"Get All Elements By CSS Selector": {
"scope": "javascript,typescript",
"prefix": "queryAll",
"body": "document.querySelectorAll('$1')$0"
},
"Add Class": {
"scope": "javascript,typescript",
"prefix": ".addClass",
"body": [".classList.add('$0')"]
},
"Remove Class": {
"scope": "javascript,typescript",
"prefix": ".removeClass",
"body": [".classList.remove('$0')"]
},
"Arrow Function": {
"scope": "javascript,typescript",
"prefix": "arrowFunc",
"body": "(${1:event}) => {$0}"
},
"Anonymous Function": {
"scope": "javascript,typescript",
"prefix": "anonymousFunc",
"body": ["(${1:event}) => {", " $0", "}"]
},
"IIFE (Immediately-Invoked Function Expression)": {
"scope": "javascript,typescript",
"prefix": "iife",
"body": ["(function ${1:name}(${2:event}) {", " $0", "})()"]
},
"Promise": {
"scope": "javascript,typescript",
"prefix": "promise",
"body": ["new Promise((resolve, reject) => {", " $0", "})"]
},
"Then": {
"scope": "javascript,typescript",
"prefix": ".then",
"body": [".then(response => {$0}).catch(error => {})"]
},
"Pinia Options Store Boilerplate": {
"scope": "javascript,typescript",
"prefix": "pinia-options",
"body": [
"import { defineStore, acceptHMRUpdate } from 'pinia'",
"",
"export const use${TM_FILENAME_BASE/^(.*)$/${1:/pascalcase}/}Store = defineStore('$TM_FILENAME_BASE', {",
" state: () => ({",
" $0",
" }),",
" getters: {},",
" actions: {},",
"})",
"",
"const HMR = import.meta.hot",
"if (HMR) HMR.accept(acceptHMRUpdate(use${TM_FILENAME_BASE/^(.*)$/${1:/pascalcase}/}Store, HMR))"
]
},
"Pinia Setup Store Boilerplate": {
"scope": "javascript,typescript",
"prefix": "pinia-setup",
"body": [
"import { defineStore, acceptHMRUpdate } from 'pinia'",
"",
"export const use${TM_FILENAME_BASE/^(.*)$/${1:/pascalcase}/}Store = defineStore('$TM_FILENAME_BASE', () => {",
" $0",
" return {}",
"})",
"",
"const HMR = import.meta.hot",
"if (HMR) HMR.accept(acceptHMRUpdate(use${TM_FILENAME_BASE/^(.*)$/${1:/pascalcase}/}Store, HMR))"
]
},
/*** Vue ***/
"Vue SFC Boilerplate": {
"scope": "vue",
"prefix": "vue-sfc",
"body": [
"",
"",
"",
"$0",
"",
"",
""
]
}
}