VS Code settings, keyboard shortcuts, snippets, and extensions.

.editorconfig

root = true

[*]
charset = utf-8
indent_size = 3
indent_style = tab
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

extensions.json

{
	"recommendations": [
		"astro-build.astro-vscode",
		"naumovs.color-highlight",
		"pucelle.vscode-css-navigation",
		"rexebin.dracula",
		"usernamehw.errorlens",
		"dbaeumer.vscode-eslint",
		"github.copilot",
		"gitHub.copilot-chat",
		"eamodio.gitlens",
		"ritwickdey.liveserver",
		"nuxtr.nuxtr-vscode",
		"ms-playwright.playwright",
		"csstools.postcss",
		"esbenp.prettier-vscode",
		"bradlc.vscode-tailwindcss",
		"rangav.vscode-thunder-client",
		"jgclark.vscode-todo-highlight",
		"chakrounanas.turbo-console-log",
		"vitest.explorer",
		"vscode-icons-team.vscode-icons",
		"vue.volar",
		"wakatime.vscode-wakatime"
	]
}

keybindings.json

[
	/*** Format The Document ***/
	{
		"key": "shift+capslock",
		"command": "editor.action.formatDocument",
		"when": "editorTextFocus && !editorReadonly"
	},
	{
		"key": "shift+capslock",
		"command": "editor.action.formatDocument.none",
		"when": "editorTextFocus && !editorReadonly && !editorHasDocumentFormattingProvider"
	},

	/*** Toggle Comment ***/
	{
		"key": "ctrl+shift+/",
		"command": "editor.action.commentLine",
		"when": "editorTextFocus && !editorReadonly"
	},
	{
		"key": "ctrl+/",
		"command": "editor.action.blockComment",
		"when": "editorTextFocus && !editorReadonly"
	},

	/*** Delete Current Line ***/
	{
		"key": "ctrl+delete",
		"command": "editor.action.deleteLines",
		"when": "textInputFocus && !editorReadonly"
	},

	/*** Duplicate Current Line ***/
	{
		"key": "ctrl+d",
		"command": "editor.action.copyLinesUpAction",
		"when": "editorTextFocus && !editorReadonly"
	},

	/*** Redo Previous Action ***/
	{
		"key": "ctrl+r",
		"command": "redo",
		"when": "editorTextFocus && !editorReadonly"
	},

	/*** `console.log()` Shortcut ***/
	{
		"key": "ctrl+shift+l",
		"command": "turboConsoleLog.displayLogMessage",
		"when": "editorTextFocus && !editorReadonly"
	},

	/*** Insert Single Backtick ***/
	{
		"key": "`",
		"args": { "snippet": "`" },
		"command": "editor.action.insertSnippet",
		"when": "editorTextFocus && !editorReadonly && !editorHasSelection"
	},

	/*** Add Selection To Next/Previous Match ***/
	{
		"key": "ctrl+shift+n",
		"command": "editor.action.addSelectionToNextFindMatch",
		"when": "editorTextFocus && !editorReadonly && editorHasSelection"
	},
	{
		"key": "ctrl+shift+p",
		"command": "editor.action.addSelectionToPreviousFindMatch",
		"when": "editorTextFocus && !editorReadonly && editorHasSelection"
	},

	/*** Toggle Quick Access To Files ***/
	{
		"key": "ctrl+shift+f",
		"command": "workbench.action.quickOpen",
		"when": "!inQuickOpen"
	},
	{
		"key": "ctrl+shift+f",
		"command": "workbench.action.closeQuickOpen",
		"when": "inQuickOpen"
	},

	/*** Disable Default Shortcuts ***/
	{
		"key": "ctrl+shift+d",
		"command": "-workbench.view.debug"
	},
	{
		"key": "ctrl+e",
		"command": "-workbench.action.quickOpen"
	},
	{
		"key": "ctrl+p",
		"command": "-workbench.action.quickOpen"
	},
	{
		"key": "ctrl+shift+.",
		"command": "-breadcrumbs.toggleToOn"
	},
	{
		"key": "ctrl+shift+.",
		"command": "-breadcrumbs.focusAndSelect"
	},
	{
		"key": "ctrl+shift+n",
		"command": "-workbench.action.newWindow"
	},
	{
		"key": "ctrl+shift+l",
		"command": "-editor.action.selectHighlights"
	},
	{
		"key": "ctrl+shift+l",
		"command": "-selectAllSearchEditorMatches"
	},
	{
		"key": "ctrl+shift+l",
		"command": "-addCursorsAtSearchResults"
	},
	{
		"key": "ctrl+,",
		"command": "-workbench.action.openSettings"
	},
	{
		"key": "ctrl+shift+m",
		"command": "-workbench.actions.view.problems"
	},
	{
		"key": "ctrl+n",
		"command": "-workbench.action.files.newUntitledFile"
	},
	{
		"key": "ctrl+shift+c",
		"command": "-workbench.action.terminal.openNativeConsole"
	},
	{
		"key": "ctrl+r",
		"command": "-workbench.action.openRecent"
	},
	{
		"key": "ctrl+r",
		"command": "-workbench.action.quickOpenNavigateNextInRecentFilesPicker"
	}
]

settings.json

{
	/*** EDITOR ***/
	/* Typography */
	"editor.tabSize": 3,
	"editor.fontSize": 15,
	"editor.lineHeight": 27,
	"editor.letterSpacing": 1,
	"editor.fontLigatures": true,
	"editor.wordWrap": "bounded",
	"editor.wordWrapColumn": 120,
	"editor.wrappingIndent": "indent",
	"editor.detectIndentation": false,
	"editor.renderWhitespace": "none",
	"editor.wrappingStrategy": "advanced",
	"editor.defaultFormatter": "esbenp.prettier-vscode",
	"editor.unicodeHighlight.ambiguousCharacters": false,
	"editor.wordSeparators": "`~!@#$%^&*()-=+[{]}\\|;:'\",.<>/?“”«»",
	"editor.fontFamily": "Comic Sans MS, Consolas, 'Courier New', monospace",

	/* Smart Suggestion */
	"editor.quickSuggestionsDelay": 0,
	"editor.snippetSuggestions": "inline",
	"editor.tabCompletion": "onlySnippets",
	"editor.acceptSuggestionOnEnter": "smart",
	"emmet.excludeLanguages": [],
	"emmet.includeLanguages": {
		"md": "html",
		"markdown": "html"
	},
	"editor.quickSuggestions": {
		"other": true,
		"strings": true,
		"comments": true
	},

	/* Formatting */
	"editor.formatOnSave": true,

	/* Miscellaneous */
	"editor.linkedEditing": true,
	"diffEditor.maxFileSize": 0,
	"breadcrumbs.enabled": false,
	"editor.minimap.enabled": false,
	"editor.cursorBlinking": "expand",
	"explorer.compactFolders": false,
	"editor.stickyScroll.enabled": false,
	"explorer.confirmDragAndDrop": false,
	"diffEditor.ignoreTrimWhitespace": true,
	"editor.smartSelect.selectLeadingAndTrailingWhitespace": false,

	/*** FILES ***/
	"files.autoSaveDelay": 500,
	"files.associations": {
		"*.svg": "html",
		"*.xml": "html"
	},

	/*** WORKBENCH ***/
	"workbench.sideBar.location": "right",
	"workbench.list.smoothScrolling": true,
	"workbench.iconTheme": "vscode-icons",
	"workbench.tree.enableStickyScroll": false,
	"workbench.editor.untitled.labelFormat": "name",
	"workbench.colorTheme": "Darcula - WebStorm Edition",
	"workbench.colorCustomizations": {
		"editor.foreground": "#d1d1d1",
		"editor.selectionBackground": "#1e3f60", // Default: #264F78.
		"editor.findMatchBackground": "#264F78" // Default: #515C6A.
	},

	/*** TERMINAL ***/
	"terminal.integrated.lineHeight": 1.4,
	"terminal.integrated.smoothScrolling": true,
	"terminal.integrated.fontFamily": "Consolas, monospace",
	"terminal.integrated.enableMultiLinePasteWarning": "never",

	/*** TOOLS & LANGUAGES  ***/
	/* JavaScript & TypeScript */
	"js/ts.implicitProjectConfig.target": "ESNext",
	"javascript.experimental.updateImportsOnPaste": true,
	"typescript.experimental.updateImportsOnPaste": true,
	"javascript.updateImportsOnFileMove.enabled": "always",
	"typescript.updateImportsOnFileMove.enabled": "always",
	"javascript.preferences.importModuleSpecifierEnding": "js",
	"typescript.preferences.importModuleSpecifierEnding": "js",

	/* Git */
	"git.autofetch": true,
	"git.confirmSync": false,
	"git.enableSmartCommit": true,
	"[git-commit]": {
		"editor.rulers": [50, 72]
	},

	/* Markdown */
	"markdown.occurrencesHighlight.enabled": true,

	/* CSS */
	"css.lint.unknownAtRules": "ignore",
	"css.lint.fontFaceProperties": "error",
	"css.format.spaceAroundSelectorSeparator": true,

	/*** EXTENSIONS ***/
	/* Codeium */
	"codeium.enableSearch": true,
	"codeium.enableCodeLens": false,
	"codeium.enableConfig": { "*": true },
	"codeium.aggressiveShutdown": true,

	/* Color Highlight */
	"color-highlight.matchWords": true,

	/* CSS Navigation */
	"CSSNavigation.ignoreCustomElement": false,
	"CSSNavigation.searchAcrossWorkspaceFolders": true,
	"CSSNavigation.activeHTMLFileExtensions": ["html", "vue", "astro", "js", "ts", "jsx", "tsx", "php"],

	/* Error Lens */
	"errorLens.ignoreUntitled": true,
	"errorLens.enableOnDiffView": true,
	"errorLens.gutterIconsEnabled": true,
	"errorLens.statusBarIconsUseBackground": false,
	"errorLens.respectUpstreamEnabled": { "statusBar": true },
	"errorLens.gutterEmoji": {
		"hint": "🟩",
		"info": "🟦",
		"error": "🟥",
		"warning": "🟨"
	},
	"errorLens.editorHoverPartsEnabled": {
		"buttonsEnabled": true,
		"messageEnabled": true,
		"sourceCodeEnabled": true
	},

	/* ESLint */
	"eslint.validate": [
		"html",
		"vue",
		"astro",
		"css",
		"scss",
		"javascript",
		"typescript",
		"javascriptreact",
		"typescriptreact"
	],
	"eslint.run": "onSave",
	"eslint.format.enable": true,
	"eslint.ignoreUntitled": true,
	"eslint.lintTask.enable": true,

	/* GitHub Copilot */
	"github.copilot.enable": {
		"plaintext": true,
		"markdown": true,
		"scminput": true
	},
	"github.copilot.advanced": {
		"useLanguageServer": true
	},
	"github.copilot.chat.followUps": "always",
	"github.copilot.chat.scopeSelection": true,
	"github.copilot.chat.inlineChatHint.enabled": true,
	"github.copilot.chat.generateTests.codeLens": true,
	"github.copilot.chat.temporalContext.enabled": true,
	"github.copilot.chat.search.semanticTextResults": true,
	"github.copilot.chat.inlineChatCompletionTrigger.enabled": true,

	/* GitLens */
	"gitlens.graph.minimap.enabled": false,
	"gitlens.codeLens.authors.enabled": false,
	"gitlens.codeLens.recentChange.enabled": false,
	"gitlens.graph.minimap.additionalTypes": ["localBranches", "stashes", "remoteBranches", "pullRequests", "tags"],

	/* Iconify IntelliSense */
	"iconify.inplace": false,

	/* Live Server */
	"liveServer.settings.wait": 0,
	"liveServer.settings.port": 5000,
	"liveServer.settings.donotVerifyTags": true,
	"liveServer.settings.donotShowInfoMsg": true,

	/* Nuxtr */
	"nuxtr.vueFiles.firstTag": "script",
	"nuxtr.openItemsAfterCreation": true,
	"nuxtr.vueFiles.style.alwaysScoped": true,
	"nuxtr.piniaFiles.defaultTemplate": "setup",

	/* Prettier */
	"prettier.tabWidth": 3,
	"prettier.useTabs": true,
	"prettier.printWidth": 120,
	"prettier.singleQuote": true,
	"prettier.trailingComma": "all",
	"prettier.jsxSingleQuote": true,
	"prettier.quoteProps": "consistent",
	"prettier.vueIndentScriptAndStyle": true,
	"prettier.documentSelectors": ["**/*.astro"],

	/* Tailwind CSS IntelliSense */
	"tailwindCSS.emmetCompletions": true,

	/* Todo Highlight */
	"todohighlight.include": [
		"**/*.txt",
		"**/*.md",
		"**/*.json",
		"**/*.jsonc",
		"**/*.yml",
		"**/*.yaml",
		"**/*.toml",
		"**/*.svg",
		"**/*.html",
		"**/*.css",
		"**/*.scss",
		"**/*.js",
		"**/*.ts",
		"**/*.cjs",
		"**/*.cts",
		"**/*.mjs",
		"**/*.mts",
		"**/*.jsx",
		"**/*.tsx",
		"**/*.vue",
		"**/*.astro",
		"**/*.gql",
		"**/*.graphql",
		"**/.gitignore",
		"**/.gitmessage"
	],
	"todohighlight.exclude": [
		"**/*.map",
		"**/*.min.*",
		"**/dist/**",
		"**/build/**",
		"**/.nuxt/**",
		"**/.next/**",
		"**/.github/**",
		"**/.output/**",
		"**/_output/**",
		"**/.vscode-test/**",
		"**/node_modules/**",
		"**/bower_components/**"
	],
	"todohighlight.defaultStyle": {
		"color": "#dadada",
		"borderRadius": "4px",
		"backgroundColor": "#1e1e1e",
		"overviewRulerColor": "transparent"
	},
	"todohighlight.isCaseSensitive": false,
	"todohighlight.keywords": [
		{
			// Highlight the whole line if it contains `<!--- ... -->` or `/*** ... ***/`.
			"text": "(\\/\\*{3}[^\\*]*\\*{3}\\/)|(<\\!-{3}[^<]*-{3}>)",
			"regex": { "pattern": "(\\/\\*{3}[^\\*]*\\*{3}\\/)|(<\\!-{3}[^<]*-{3}>)" },
			"isWholeLine": true,
			"color": "#e6e6e6",
			"borderRadius": "0px",
			"backgroundColor": "#3c3c3c"
		},
		{
			// Highlight text between backticks within single-line comments (`# ...` or `// ...`).
			"text": "(?<=(?:#|//).*?)`[^`\n]*`",
			"regex": { "pattern": "(?<=(?:#|//).*?)`[^`\n]*`" }
		},
		{
			// Highlight text between backticks within multi-line comments (`<!-- ... -->` or `/* ... */`).
			/* It's an issue when the comment's starting signature (`<!--` or `/*`) is repeated whitin itself. */
			"text": "(?<=\\/(?:\\*|\\*\\*)[^*]*?|<!--[^>]*?)(?<!`)(`[^`]*?`)(?=[^*]*?\\*\\/|[^<]*?-->)",
			"regex": { "pattern": "(?<=\\/(?:\\*|\\*\\*)[^*]*?|<!--[^>]*?)(?<!`)(`[^`]*?`)(?=[^*]*?\\*\\/|[^<]*?-->)" }
		}
	],

	/* Turbo Console Log */
	"turboConsoleLog.quote": "`",
	"turboConsoleLog.logMessagePrefix": "",
	"turboConsoleLog.delimiterInsideMessage": ">",
	"turboConsoleLog.addSemicolonInTheEnd": true,
	"turboConsoleLog.insertEnclosingFunction": false,
	"turboConsoleLog.includeFileNameAndLineNum": false,

	/* VS Code Icons */
	"vsicons.dontShowNewVersionMessage": true,
	"vsicons.associations.files": [{ "extensions": ["css"], "icon": "css" }], // Supress PostCSS Language Support extension.
	"vsicons.associations.folders": [
		{ "extensions": ["content"], "icon": "log" },
		{ "extensions": ["(views)"], "icon": "view" }
	],

	/* Vue - Official */
	"vue.splitEditors.icon": true,
	"vue.autoInsert.dotValue": true,
	"vue.format.style.initialIndent": true,
	"vue.updateImportsOnFileMove.enabled": true,
	"vue.splitEditors.layout.right": ["styles", "customBlocks"],
	"vue.splitEditors.layout.left": ["scriptSetup", "script", "template"]
}

snippets.json

{
   /*** HTML ***/
	"HTML Boilerplate": {
      "scope": "html",
		"prefix": "html-boilerplate",
		"body": [
			"<!DOCTYPE html>",
			"<html lang=\"en\" dir=\"ltr\">",
			"<head>",
			"<meta charset=\"UTF-8\" />",
			"<title>${1:Document}</title>",
			"<meta name=\"color-scheme\" content=\"dark light\" />",
			"<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
			"</head>",
			"",
			"<body></body>",
			"</html>"
		]
	},
	"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": [
			"<script lang=\"ts\" setup>",
			"",
			"</script>",
			"",
			"<template>",
			"$0",
			"</template>",
			"",
			"<style scoped></style>"
		]
	}
}