Skip to content

Instantly share code, notes, and snippets.

@mikoloism

mikoloism/0-vscode.md

Last active July 9, 2021 19:56
Show Gist options
  • Save mikoloism/f27e4fd7b84de5fafa591d67643a797f to your computer and use it in GitHub Desktop.
Save mikoloism/f27e4fd7b84de5fafa591d67643a797f to your computer and use it in GitHub Desktop.
Download ZIP
useful vscode snippets (autocomplete)
Raw
0-vscode.md

VSCode Snippet 🌟

Raw
[custom]-extensions.yml
# list of installed extensions
---
key: null
Raw
[global]-settings.json
{
//#region Comment's
"better-comments.tags": [
{
"tag": "#region",
"color": "#966F6F",
"strikethrough": false,
"underline": true,
"backgroundColor": "transparent",
"bold": false,
"italic": false
},
{
"tag": "#endregion",
"color": "#966F6F",
"strikethrough": false,
"underline": true,
"backgroundColor": "transparent",
"bold": false,
"italic": false
},
{
"tag": "#",
"color": "#CF6F6F",
"strikethrough": false,
"underline": false,
"backgroundColor": "transparent",
"bold": false,
"italic": false
},
{
"tag": "$",
"color": "#6FCF9F",
"strikethrough": false,
"underline": false,
"backgroundColor": "transparent",
"bold": false,
"italic": false
},
{
"tag": "@",
"color": "#6699CC",
"strikethrough": false,
"underline": false,
"backgroundColor": "transparent",
"bold": false,
"italic": false
},
{
"tag": "return",
"color": "#CC9933",
"strikethrough": false,
"underline": true,
"backgroundColor": "#3333",
"bold": false,
"italic": false
},
{
"tag": "=>",
"color": "#449999",
"strikethrough": false,
"underline": false,
"backgroundColor": "transparent",
"bold": false,
"italic": false
},
{
"tag": ">",
"color": "#996600",
"strikethrough": false,
"underline": true,
"backgroundColor": "#3333",
"bold": false,
"italic": true
},
{
"tag": "->->-",
"color": "#449999",
"strikethrough": false,
"underline": false,
"backgroundColor": "#6664",
"bold": false,
"italic": false
},
{
"tag": "!!",
"color": "#CF6F3F",
"strikethrough": false,
"underline": true,
"backgroundColor": "transparent",
"bold": true,
"italic": false
},
{
"tag": "!",
"color": "#CF6F6F",
"strikethrough": false,
"underline": false,
"backgroundColor": "transparent",
"bold": false,
"italic": false
},
{
"tag": "?",
"color": "#3498DB",
"strikethrough": false,
"underline": false,
"backgroundColor": "transparent",
"bold": false,
"italic": false
},
{
"tag": "//",
"color": "#474747",
"strikethrough": true,
"underline": false,
"backgroundColor": "transparent",
"bold": false,
"italic": false
},
{
"tag": "todo",
"color": "#FF8C00",
"strikethrough": false,
"underline": false,
"backgroundColor": "transparent",
"bold": false,
"italic": false
},
{
"tag": "fixme",
"color": "#c55",
"strikethrough": false,
"underline": false,
"backgroundColor": "transparent",
"bold": true,
"italic": false
},
{
"tag": "*",
"color": "#98C379",
"strikethrough": false,
"underline": false,
"backgroundColor": "transparent",
"bold": false,
"italic": false
}
],
"commentAnchors.tags.separators": [" - ", ": ", " : ", " ", " -> ", " => "],
//#endregion Comment's
//#region Preittier
"prettier.jsxSingleQuote": true,
"prettier.jsxBracketSameLine": true,
"prettier.useTabs": true,
"prettier.tabWidth": 4,
"prettier.singleQuote": true,
"prettier.trailingComma": "all",
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
//#endregion Preittier
//#region OTHER
//#region FOLDING
"editor.folding": true,
"editor.showFoldingControls": "mouseover",
"editor.foldingHighlight": true,
"editor.foldingStrategy": "auto",
//#endregion FOLDING
"material-ui-snippets.showNotesOnStartup": false,
"gitlens.views.search.files.layout": "list",
"javascript.updateImportsOnFileMove.enabled": "always",
"diffEditor.ignoreTrimWhitespace": false,
"breadcrumbs.enabled": false,
"cSpell.enableFiletypes": ["javascript"],
"editor.suggestSelection": "first",
"vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
"files.exclude": {
"**/.classpath": true,
"**/.project": true,
"**/.settings": true,
"**/.factorypath": true
},
"java.semanticHighlighting.enabled": true,
"python.languageServer": "Microsoft",
"chronicler.ffmpeg-binary": "/home/admin/.vscode/Chronicler/ffmpeg",
"liveshare.presence": false,
"search.searchOnType": true,
"enableTelemetry": true,
"python.defaultInterpreterPath": "/usr/bin/python3",
"banner-comments.favorites": [],
"banner-comments.h2": "1Row",
"files.autoSave": "off",
"workbench.statusBar.visible": true,
"editor.renderFinalNewline": false,
"liveSassCompile.settings.generateMap": false,
"screencastMode.fontSize": 50,
"git.autofetch": true,
"liveServer.settings.donotShowInfoMsg": true,
"auto.languages": {
"shellscript": {
"symbol": "$",
"stringWrapper": "\""
},
"shell": {
"symbol": "$",
"stringWrapper": "\""
},
"bash": {
"symbol": "$",
"stringWrapper": "\""
},
"ruby": {
"symbol": "#",
"stringWrapper": "\""
},
"elixir": {
"symbol": "#",
"stringWrapper": "\""
},
"javascript": {
"symbol": "$",
"stringWrapper": "`"
},
"vue": {
"symbol": "$",
"stringWrapper": "`"
},
"javascriptreact": {
"symbol": "$",
"stringWrapper": "`"
},
"typescript": {
"symbol": "$",
"stringWrapper": "`"
},
"typescriptreact": {
"symbol": "$",
"stringWrapper": "`"
},
"coffeescript": {
"symbol": "#",
"stringWrapper": "\""
},
"erb": {
"symbol": "#",
"stringWrapper": "\""
},
"haml": {
"symbol": "#",
"stringWrapper": "\""
},
"slim": {
"symbol": "#",
"stringWrapper": "\""
},
"groovy": {
"symbol": "$",
"stringWrapper": "\""
},
"crystal": {
"symbol": "#",
"stringWrapper": "\""
},
"ecr": {
"symbol": "#",
"stringWrapper": "\""
}
},
"node_require.exclude": [
"node_modules",
"typings",
"dist",
"bin",
"build",
"tmp"
],
"explorer.compactFolders": false,
"bookmarks.saveBookmarksInProject": true,
"dashboard.projectData": null,
"liveServer.settings.donotVerifyTags": true,
"editor.fontLigatures": true,
"editor.lineHeight": 33,
"editor.lineNumbers": "off",
"editor.renderWhitespace": "none",
"editor.insertSpaces": false,
//#endregion THEME
//#region Icons
"workbench.colorCustomizations": {
"activityBar.background": "#272e35",
"titleBar.activeBackground": "#ffffff",
"titleBar.activeForeground": "#000000"
},
"editor.minimap.enabled": false,
//#endregion THEME
//#region Todo
"todo.statistics.project.text": "[[finished]/[all]] [[percentage]%]",
"todo.statistics.statusbar.text": "$(clock) [finished] / [all]\t([percentage]%) [lasted]",
//#endregion Todo
//#region ErrorLens
"errorLens.annotationPrefix": ["ERROR: ", "WARNING: ", "HINT:", "INFO: "],
"errorLens.enabledDiagnosticLevels": ["error", "warning", "info"],
//#endregion ErrorLens
//#region Project's
"projectManager.groupList": true,
"projectManager.any.baseFolders": [],
"projectManager.vscode.baseFolders": [],
"projectManager.vscode.ignoredFolders": [
"node_modules",
"out",
"typings",
"test"
],
"projectManager.vscode.maxDepthRecursion": 4,
"projectManager.sortList": "Recent",
"projectManager.projectsLocation": "",
//#endregion Project's
//#region Language's
"[markdown]": {
"editor.wordWrap": "on",
"editor.quickSuggestions": false,
"editor.tabSize": 2
},
"[sql]": {
"editor.formatOnSave": true
// "editor.defaultFormatter": "mtxr.sqltools"
},
"[mongodb]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
},
"[scss]": {
"editor.suggest.insertMode": "replace",
"editor.lineHeight": 35
},
"gitlens.currentLine.enabled": false,
"json.schemas": [
{
"name": "vscode-expo-manifest",
"url": "file:///home/admin/.config/Code/User/globalStorage/bycedric.vscode-expo/manifest-39.0.0.json",
"fileMatch": ["app.json", "app.config.json"]
}
],
"editor.cursorSmoothCaretAnimation": true,
//#endregion Cursors
"workbench.colorTheme": "Ra Focus",
"editor.fontSize": 16,
"terminal.integrated.fontSize": 16,
"terminal.integrated.lineHeight": 1.5,
"tabnine.experimentalAutoImports": true,
"editor.fontFamily": "'Fira Code Retina', 'Operator mono Medium','Droid Sans Mono', 'monospace', monospace, 'Droid Sans Fallback'",
"workbench.iconTheme": "helium-icon-theme",
"editor.quickSuggestions": {
"strings": true
},
"prettier.vueIndentScriptAndStyle": true,
"eslint.run": "onSave",
"workbench.startupEditor": "none",
"C_Cpp.updateChannel": "Insiders",
"redhat.telemetry.enabled": true,
"typescript.updateImportsOnFileMove.enabled": "always",
"window.menuBarVisibility": "toggle"
}
Raw
keybindings.json
{
// run simplePreview + termianl-in-tab-area with `ctrl+k ctrl+f5` shortcut
"key": "ctrl+k ctrl+f5",
"command": "extension.multiCommand.execute",
"args": {
"sequence": [
"workbench.action.splitEditorRight",
"workbench.action.createTerminalEditor",
// "terminal.focus",
{
"command": "workbench.action.terminal.sendSequence",
"args": { "text": "BROWSER=none npm start \u000d" },
"when": "terminalTabsFocus"
},
{
"command": "simpleBrowser.show",
"args": "http://localhost:3000"
}
]
}
}
Raw
scss.json
{
"at-sign-1": {
"prefix": "@",
"body": [
"@${1|include,mixin,function,import,each,if,else,return,content,at-root|} $0;"
],
"description": "all sass/scss/css rule which start with @ symbol"
},
"region-comment-3": {
"prefix": "#",
"body": [
"//#region ${1:REGION}",
"${0:// code ...}",
"//#endregion ${1:REGION}"
],
"description": "collapsable region section!"
},
"region-comment-2": {
"prefix": "region",
"body": [
"//#region ${1:REGION}",
"${0:// code ...}",
"//#endregion ${1:REGION}"
],
"description": "collapsable region section!"
},
"region-comment-1": {
"prefix": "#region",
"body": [
"//#region ${1:REGION}",
"${0:// code ...}",
"//#endregion ${1:REGION}"
],
"description": "collapsable region section!"
},
"banner-comment": {
"prefix": "banner",
"body": [
"/* ${1:comment}",
"------------------------- */",
"$0"
],
"description": "#banner : comment banner"
},
"comment-todo-2": {
"prefix": "todo",
"body": "/* TODO : ${1:comment} */",
"description": "create sass/scss/scc todo comment"
},
"comment-todo-1": {
"prefix": "todo",
"body": "// TODO : ${1:comment}",
"description": "create sass/scss todo comment"
},
"declare-mixin-4": {
"prefix": "@",
"body": [
"@mixin ${1:name}${2:($param: 'value')} {",
" ${3:// stuff code}",
" ${0:@content};",
"}"
],
"description": "create new sass/scss mixin"
},
"declare-mixin-3": {
"prefix": "mix",
"body": [
"@mixin ${1:name}${2:($param: 'value')} {",
" ${3:// stuff code}",
" ${0:@content};",
"}"
],
"description": "create new sass/scss mixin"
},
"declare-mixin-2": {
"prefix": "mixin",
"body": [
"@mixin ${1:name}${2:($param: 'value')} {",
" ${3:// stuff code}",
" ${0:@content};",
"}"
],
"description": "create new sass/scss mixin"
},
"declare-mixin-1": {
"prefix": "@mixin",
"body": [
"@mixin ${1:name}${2:($param: 'value')} {",
" ${3:// stuff code}",
" ${0:@content};",
"}"
],
"description": "create new sass/scss mixin"
},
"declare-function-4": {
"prefix": "@",
"body": [
"@function ${1:func-name}($${2:param}) {",
" ${3:// code stuff}",
" @return ${0:null}",
"}"
],
"description": "create new sass/scss function"
},
"declare-function-3": {
"prefix": "func",
"body": [
"@function ${1:func-name}($${2:param}) {",
" ${3:// code stuff}",
" @return ${0:null}",
"}"
],
"description": "create new sass/scss function"
},
"declare-function-2": {
"prefix": "function",
"body": [
"@function ${1:func-name}($${2:param}) {",
" ${3:// code stuff}",
" @return ${0:null}",
"}"
],
"description": "create new sass/scss function"
},
"declare-function-1": {
"prefix": "@function",
"body": [
"@function ${1:func-name}($${2:param}) {",
" ${3:// code stuff}",
" @return ${0:null}",
"}"
],
"description": "create new sass/scss function"
},
"declare-key-value-2": {
"prefix": ":",
"body": [
"'${1:key}': ${2:'value'},\n$0",
],
"description": "add map (key: value) sass/scss statement"
},
"declare-map-1": {
"prefix": "map",
"body": [
"(",
" '${1:key}': ${2:'value'},$0",
")",
],
"description": "declare sass/scss map statement"
},
"declare-key-value-1": {
"prefix": ":",
"body": [
"${1:'key'}: ${2:'value'};\n$0",
],
"description": "add property (key: value) sass/scss statement"
},
"declare-variable-2": {
"prefix": "$",
"body": "$${1:variable-name}: ${2:'value'};\n$0",
"description": "declare new sass/scss variable"
},
"declare-variable-1": {
"prefix": "var",
"body": "$${1:variable-name}: ${2:'value'};\n$0",
"description": "declare new sass/scss variable"
},
"access-variable-1": {
"prefix": "$",
"body": "$${1:var-name};\n$0",
"description": "access to sass/scss variable"
},
"bem-element-3": {
"prefix": "_",
"body": [
"&__${1:element} {",
" $0",
"}"
],
"description": "insert nesting sass/scss bem element"
},
"bem-element-2": {
"prefix": "__",
"body": [
"&__${1:element} {",
" $0",
"}"
],
"description": "insert nesting sass/scss bem element"
},
"bem-element-1": {
"prefix": "&",
"body": [
"&__${1:element} {",
" $0",
"}"
],
"description": "insert nesting sass/scss bem element"
},
"bem-modifier-3": {
"prefix": "-",
"body": [
"&--${1:modifier} {",
" $0",
"}"
],
"description": "insert nesting sass/scss bem modifier"
},
"bem-modifier-2": {
"prefix": "--",
"body": [
"&--${1:modifier} {",
" $0",
"}"
],
"description": "insert nesting sass/scss bem modifier"
},
"bem-modifier-1": {
"prefix": "&",
"body": [
"&--${1:modifier} {",
" $0",
"}"
],
"description": "insert nesting sass/scss bem modifier"
},
"selector-id-1":{
"prefix": "#",
"body": [
"#${1:id} {",
" $0",
"}"
],
"description": "insert a id selector"
},
"selector-class-1":{
"prefix": ".",
"body": [
".${1:class} {",
" $0",
"}"
],
"description": "insert a class selector"
},
"bem-block-statement-2": {
"prefix": "bem",
"body": [
".${1:block} {",
" &__${2:element} {",
" $0",
" &--${3:modifier} {}",
" }",
" &--${4:modifier} {}",
"}"
],
"description": "insert a bem structure"
},
"bem-block-statement-1": {
"prefix": ".",
"body": [
".${1:block} {",
" &__${2:element} {",
" $0",
" &--${3:modifier} {}",
" }",
" &--${4:modifier} {}",
"}"
],
"description": "insert a bem structure"
},
"pseudo-class-2": {
"prefix": "&",
"body": [
"&:${1:element} {",
" $0",
"}"
],
"description": "insert sass/scss/css pseudo-class"
},
"pseudo-class-1": {
"prefix": ":",
"body": [
"&:${1:element} {",
" $0",
"}"
],
"description": "insert sass/scss/css pseudo-class"
},
"pseudo-element-4": {
"prefix": "&",
"body": [
"&::${1:element} {",
" $0",
"}"
],
"description": "insert sass/scss/css pseudo-element"
},
"pseudo-element-3": {
"prefix": ":",
"body": [
"&::${1:element} {",
" $0",
"}"
],
"description": "insert sass/scss/css pseudo-element"
},
"pseudo-element-2": {
"prefix": "::",
"body": [
"&::${1:element} {",
" $0",
"}"
],
"description": "insert sass/scss/css pseudo-element"
},
"pseudo-element-1": {
"prefix": "&::",
"body": [
"&::${1:element} {",
" $0",
"}"
],
"description": "insert sass/scss/css pseudo-element"
},
"import-4": {
"prefix": "@",
"body": "@import '${1:../path/_file.scss}';\n$0",
"description": "import sass/scss module/file"
},
"import-3": {
"prefix": "imp",
"body": "@import '${1:../path/_file.scss}';\n$0",
"description": "import sass/scss module/file"
},
"import-2": {
"prefix": "import",
"body": "@import '${1:../path/_file.scss}';\n$0",
"description": "import sass/scss module/file"
},
"import-1": {
"prefix": "@import",
"body": "@import '${1:../path/_file.scss}';\n$0",
"description": "import sass/scss module/file"
},
"include-mixin-4": {
"prefix": "@",
"body": "@include ${1:mixin-name${2:('value')}};\n$0",
"description": "include sass/scss mixin"
},
"include-mixin-3": {
"prefix": "inc",
"body": "@include ${1:mixin-name${2:('value')}};\n$0",
"description": "include sass/scss mixin"
},
"include-mixin-2": {
"prefix": "include",
"body": "@include ${1:mixin-name${2:('value')}};\n$0",
"description": "include sass/scss mixin"
},
"include-mixin-1": {
"prefix": "@include",
"body": "@include ${1:mixin-name${2:('value')}};\n$0",
"description": "include sass/scss mixin"
},
"extend-placeholder-5": {
"prefix": "@",
"body": "@extend %${1:extendable-name};\n$0",
"description": "extend sass/scss placeholder"
},
"extend-placeholder-4": {
"prefix": "%",
"body": "@extend %${1:extendable-name};\n$0",
"description": "extend sass/scss placeholder"
},
"extend-placeholder-3": {
"prefix": "ext",
"body": "@extend %${1:extendable-name};\n$0",
"description": "extend sass/scss placeholder"
},
"extend-placeholder-2": {
"prefix": "extend",
"body": "@extend %${1:extendable-name};\n$0",
"description": "extend sass/scss placeholder"
},
"extend-placeholder-1": {
"prefix": "@extend",
"body": "@extend %${1:extendable-name};\n$0",
"description": "extend sass/scss placeholder"
},
"declare-placeholder-3":{
"prefix": "place",
"body": [
"%${1:placeholder-name}: {",
" ${0: // code stuff}",
"}"
],
"description": "declare sass/scss placeholder"
},
"declare-placeholder-2":{
"prefix": "holder",
"body": [
"%${1:placeholder-name}: {",
" ${0: // code stuff}",
"}"
],
"description": "declare sass/scss placeholder"
},
"declare-placeholder-1":{
"prefix": "%",
"body": [
"%${1:placeholder-name}: {",
" ${0: // code stuff}",
"}"
],
"description": "declare sass/scss placeholder"
},
"each-statement-2": {
"prefix": "!-not-now",
"body": ""
},
"each-statement-1": {
"prefix": "!-not-now",
"body": ""
},
"if-statement-2": {
"prefix": "!-not-now",
"body": ""
},
"if-statement-1": {
"prefix": "!-not-now",
"body": ""
},
"elif-statement-2":{
"prefix": "!-not-now",
"body": ""
},
"elif-statement-1": {
"prefix": "!-not-now",
"body": ""
},
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment