Skip to content

Instantly share code, notes, and snippets.

@ramlmn
Last active March 25, 2018 13:46
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save ramlmn/d347549afc626f3bf733b1809daf568a to your computer and use it in GitHub Desktop.
Save ramlmn/d347549afc626f3bf733b1809daf568a to your computer and use it in GitHub Desktop.
VSCode snippets

VSCode Settings and Snippets

Packages to install

  • Atom One Dark Theme
  • C/C++
  • Color Highlight
  • Document This
  • EditorConfig
  • ESLint
  • HTML CSS support
  • Markdown Preview Github Styling
  • Prettier
  • Sublime Text Keymap
{
"editor.colorDecorators": false,
"editor.tabSize": 2,
"editor.detectIndentation": true,
"editor.dragAndDrop": false,
"editor.emptySelectionClipboard": false,
"editor.fontLigatures": true,
"editor.minimap.enabled": false,
"editor.rulers": [80, 100],
"editor.renderControlCharacters": true,
"editor.renderIndentGuides": true,
"editor.renderLineHighlight": "all",
"editor.renderWhitespace": "all",
"editor.smoothScrolling": true,
"editor.snippetSuggestions": "top",
"eslint.validate": ["javascript", "javascriptreact", "html"],
"files.eol": "\n",
"files.trimTrailingWhitespace": true,
"files.insertFinalNewline": true,
"html.autoClosingTags": false,
"prettier.eslintIntegration": true,
"prettier.singleQuote": true,
"prettier.trailingComma": "es5",
"prettier.bracketSpacing": false,
"prettier.arrowParens": "always",
"terminal.integrated.shell.windows": "C:\\Windows\\System32\\cmd.exe",
"workbench.colorTheme": "Atom One Dark",
"workbench.activityBar.visible": false,
"sublimeTextKeymap.promptV3Features": true,
"editor.multiCursorModifier": "ctrlCmd",
"editor.formatOnPaste": true,
"workbench.startupEditor": "newUntitledFile",
// snazzy theme from https://github.com/Tyriar/vscode-snazzy
"workbench.colorCustomizations": {
"terminal.foreground": "#eff0eb",
"terminal.ansiBlack": "#282a36",
"terminal.ansiRed": "#ff5c57",
"terminal.ansiGreen": "#5af78e",
"terminal.ansiYellow": "#f3f99d",
"terminal.ansiBlue": "#57c7ff",
"terminal.ansiMagenta": "#ff6ac1",
"terminal.ansiCyan": "#9aedfe",
"terminal.ansiWhite": "#f1f1f0",
"terminal.ansiBrightBlack": "#686868",
"terminal.ansiBrightRed": "#ff5c57",
"terminal.ansiBrightGreen": "#5af78e",
"terminal.ansiBrightYellow": "#f3f99d",
"terminal.ansiBrightBlue": "#57c7ff",
"terminal.ansiBrightMagenta": "#ff6ac1",
"terminal.ansiBrightCyan": "#9aedfe",
"terminal.ansiBrightWhite": "#eff0eb"
}
}
{
"CSS": {
"prefix": "css",
"body": [
"* {",
" -webkit-tap-highlight-color: rgba(0, 0, 0, 0);",
"}",
"",
"*, *::before, *::after {",
" box-sizing: border-box;",
"}",
"",
"html,",
"body {",
" margin: 0;",
" font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI',",
" Roboto, 'Helvetica Neue', Arial, sans-serif;",
" color: #212121;",
" font-size: 16px;",
" line-height: 1.5;",
"}",
"",
"${1}"
]
},
"CSS Media Query": {
"prefix": "media",
"body": [
"@media only screen and (${1:max-width}: ${2:420px}) {",
" ${3}",
"}"
]
}
}
{
"HTML boilerplate": {
"prefix": "html",
"body": [
"<!DOCTYPE html>",
"<html lang=\"en\">",
"<head>",
" <meta charset=\"UTF-8\">",
" <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">",
" <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">",
" <meta name=\"author\" content=\"ramlmn\">",
"",
" <title>${1}</title>",
" <meta name=\"description\" content=\"${2:description}\">",
"",
" <link rel=\"stylesheet\" href=\"/stylesheet/style.css\">",
"</head>",
"<body>",
"",
" ${3}",
"",
" ${4:<script src=\"${5:/javascript/script}.js\"></script>}",
"</body>",
"</html>"
]
},
"HTML manifest and icons": {
"prefix": "manifest",
"body": [
"<link rel=\"manifest\" href=\"/manifest.json\">",
"<link rel=\"icon\" href=\"${1:/img/touch/logo.png}\">",
"<link rel=\"apple-touch-icon\" ${2:sizes=\"any\"} href=\"${1:/img/touch/logo.png}\">"
]
},
"Meta tag for theming": {
"prefix": "theme",
"body": [
"<meta name=\"theme-color\" content=\"#${1:F44336}\">"
]
},
"Favicons and Touch icons": {
"prefix": "icons",
"body": [
"<link rel=\"icon\" href=\"${1:/img/touch/logo.png}\">",
"<link rel=\"apple-touch-icon\" ${2:sizes=\"any\"} href=\"${1:/img/touch/logo.png}\">"
]
},
"Open Graph and Titter card meta tags": {
"prefix": "share",
"body": [
"<meta property=\"og:title\" content=\"${1:Title}\">",
"<meta property=\"og:type\" content=\"website\">",
"<meta property=\"og:url\" content=\"${2:https://example.com}/\">",
"<meta property=\"og:image\" content=\"${2:https://example.com}{3:/img/touch/logo_256.png}\">",
"<meta property=\"og:description\" content=\"${3:A little description}\">",
"",
"<meta name=\"twitter:title\" content=\"${1:Title}\">",
"<meta name=\"twitter:card\" content=\"summary\">",
"<meta name=\"twitter:url\" content=\"${2:https://example.com}/\">",
"<meta name=\"twitter:image\" content=\"${2:https://example.com}{3:/img/touch/logo_256.png}\">",
"<meta name=\"twitter:description\" content=\"${4:A little description}\">",
"<meta name=\"twitter:creator\" content=\"@ramlmn\">"
]
},
"Style tag": {
"prefix": "style",
"body": [
"<style>",
" ${1}",
"</style>"
]
},
"Link tag": {
"prefix": "link",
"body": "<link rel=\"${2:stylesheet}\" href=\"${1}\">"
},
"HTML template tag": {
"prefix": "template",
"body": [
"<template id=\"${1}\">",
" ${2}",
"</template>"
]
},
"Script tag": {
"prefix": "script",
"body": [
"<script>",
" ${1}",
"</script>"
]
},
"External script tag": {
"prefix": "scriptsrc",
"body": "<script src=\"${1:/script}.js\"></script>"
}
}
{
"JavaScript IIFE": {
"prefix": "js",
"body": [
"(_ => {",
" ${1}",
"})();"
]
},
"JavaScript Class": {
"prefix": "jsc",
"body": [
"class ${1} {",
" constructor() {",
" ${2}",
" }",
"}"
]
},
"Custom Elements v1": {
"prefix": "jsce",
"body": [
"class ${1} extends ${3:HTMLElement} {",
" static get is() {",
" return '${2}';",
" }",
"",
" constructor() {",
" super();",
" ${4}",
" }",
"",
" connectedCallback() {",
" ${5}",
" }",
"}",
"",
"window.customElements.define('${1}'.is, ${1});"
]
}
}
{
"Web App Manifest": {
"prefix": "manifest",
"body": [
"{",
" \"name\": \"${1:Title}\",",
" \"short_name\": \"${2:Short Name}\",",
" \"scope\": \"/\",",
" \"icons\": [{",
" \"src\": \"/images/touch/logo@256.svg\",",
" \"sizes\": \"256x256\"",
" }],",
" \"start_url\": \"/\",",
" \"display\": \"standalone\",",
" \"orientation\": \"portrait\",",
" \"background_color\": \"#${3:F44336}\",",
" \"theme_color\": \"#${3:F44336}\"",
"}"
]
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment