vscode setup

readme.md

Get all extension

code --list-extensions

with JSON

code --list-extensions | xargs -L 1 echo '"' | sed 's/$/"/' | paste -sd ',' - | sed 's/^/[/' | sed 's/$/]/'

extensions.json

{
	"recommendations": [
		"richie5um2.vscode-sort-json",
		"usernamehw.errorlens",
		"letrieu.expand-region",
		"meganrogge.template-string-converter",
		"aaron-bond.better-comments",
		"akamud.vscode-theme-onedark",
		"alefragnani.bookmarks",
		"appland.appmap",
		"bradlc.vscode-tailwindcss",
		"cardinal90.multi-cursor-case-preserve",
		"christian-kohler.npm-intellisense",
		"christian-kohler.path-intellisense",
		"dbaeumer.vscode-eslint",
		"donjayamanne.githistory",
		"dsznajder.es7-react-js-snippets",
		"eamodio.gitlens",
		"esbenp.prettier-vscode",
		"felipecaputo.git-project-manager",
		"formulahendry.auto-close-tag",
		"formulahendry.auto-complete-tag",
		"formulahendry.auto-rename-tag",
		"github.github-vscode-theme",
		"github.vscode-github-actions",
		"harryhopkinson.vim-theme",
		"heaths.vscode-guid",
		"heybourn.headwind",
		"howardzuo.vscode-npm-dependency",
		"massi.javascript-docstrings",
		"meganrogge.template-string-converter",
		"ms-azuretools.vscode-azureappservice",
		"ms-azuretools.vscode-azureresourcegroups",
		"ms-azuretools.vscode-docker",
		"ms-vscode-remote.remote-containers",
		"ms-vscode-remote.remote-wsl",
		"ms-vscode.azure-account",
		"ms-vscode.azurecli",
		"ms-vscode.makefile-tools",
		"ms-vscode.vscode-typescript-next",
		"phind.phind",
		"pkief.material-icon-theme",
		"plibither8.remove-comments",
		"postman.postman-for-vscode",
		"rangav.vscode-thunder-client",
		"redhat.vscode-yaml",
		"rencoregmbh.vscode-spfx-deploy-package",
		"ritwickdey.liveserver",
		"steoates.autoimport",
		"streetsidesoftware.code-spell-checker",
		"syler.sass-indented",
		"teabyii.ayu",
		"tomrijndorp.find-it-faster",
		"usernamehw.errorlens",
		"visualstudioexptteam.intellicode-api-usage-examples",
		"visualstudioexptteam.vscodeintellicode",
		"vscodevim.vim",
		"waderyan.gitblame",
		"wakatime.vscode-wakatime",
		"whizkydee.material-palenight-theme",
		"whtouche.vscode-js-console-utils",
		"wix.vscode-import-cost",
		"yoavbls.pretty-ts-errors",
		"zarifprogrammer.tailwind-snippets",
		"zhuangtongfa.material-theme",
		"zignd.html-css-class-completion"
	]
}

keybindings.json

[
	// Navigation
	{
		// Navigate left
		"key": "ctrl-h",
		"command": "workbench.action.navigateLeft"
	},
	{
		// Navigate right
		"key": "ctrl-l",
		"command": "workbench.action.navigateRight"
	},
	{
		// Navigate up
		"key": "ctrl-k",
		"command": "workbench.action.navigateUp"
	},
	{
		// Navigate down
		"key": "ctrl-j",
		"command": "workbench.action.navigateDown"
	},
	{
		// Show all editors
		"key": "space ,",
		"command": "workbench.action.showAllEditors",
		"when": "vim.mode == 'Normal' && (editorTextFocus || !inputFocus)"
	},
	{
		// Toggle sidebar visibility and focus on the files explorer
		"key": "space e",
		"command": "runCommands",
		"args": {
			"commands": ["workbench.action.toggleSidebarVisibility", "workbench.files.action.focusFilesExplorer"]
		},
		"when": "vim.mode == 'Normal' && (editorTextFocus || !inputFocus) && !sideBarFocus"
	},
	{
		// Toggle sidebar visibility and focus on the active editor group
		"key": "space e",
		"command": "runCommands",
		"args": {
			"commands": ["workbench.action.toggleSidebarVisibility", "workbench.action.focusActiveEditorGroup"]
		},
		"when": "sideBarFocus && !inputFocus"
	},
	{
		// Toggle sidebar visibility
		"key": "space e",
		"when": "vim.mode == 'Normal' && editorTextFocus && foldersViewVisible",
		"command": "workbench.action.toggleSidebarVisibility"
	},
	{
		// Switch to next editor in group
		"key": "tab",
		"command": "workbench.action.nextEditorInGroup",
		"when": "(vim.mode == 'Normal' || vim.mode == 'Visual') && (editorTextFocus || !inputFocus)"
	},
	{
		// Switch to previous editor in group
		"key": "shift-tab",
		"command": "workbench.action.previousEditorInGroup",
		"when": "(vim.mode == 'Normal' || vim.mode == 'Visual') && (editorTextFocus || !inputFocus)"
	},

	// Coding
	{
		// Move selected lines down (Visual Line mode)
		"key": "shift-j",
		"command": "editor.action.moveLinesDownAction",
		"when": "vim.mode == 'VisualLine' && editorTextFocus"
	},
	{
		// Move selected lines up (Visual Line mode)
		"key": "shift-k",
		"command": "editor.action.moveLinesUpAction",
		"when": "vim.mode == 'VisualLine' && editorTextFocus"
	},
	{
		// Show hover information
		"key": "shift-k",
		"command": "editor.action.showHover",
		"when": "vim.mode == 'Normal' && editorTextFocus"
	},
	{
		// Trigger code actions
		"key": "space c a",
		"command": "editor.action.codeAction",
		"when": "vim.mode == 'Normal' && editorTextFocus"
	},
	{
		// Rename symbol
		"key": "space c r",
		"command": "editor.action.rename",
		"when": "vim.mode == 'Normal' && editorTextFocus"
	},
	{
		// Go to symbol
		"key": "space c s",
		"command": "workbench.action.gotoSymbol",
		"when": "vim.mode == 'Normal' && editorTextFocus"
	},
	{
		// Close active editor
		"key": "space b d",
		"command": "workbench.action.closeActiveEditor",
		"when": "vim.mode == 'Normal' && editorTextFocus"
	},
	{
		// Quick open
		"key": "space space",
		"command": "workbench.action.quickOpen",
		"when": "vim.mode == 'Normal' && (editorTextFocus || !inputFocus)"
	},
	{
		// Go to definition
		"key": "space g d",
		"command": "editor.action.revealDefinition",
		"when": "vim.mode == 'Normal' && editorTextFocus"
	},
	{
		// Go to references
		"key": "space g r",
		"command": "editor.action.goToReferences",
		"when": "vim.mode == 'Normal' && editorTextFocus"
	},
	{
		// Find in files
		"key": "space s g",
		"command": "workbench.action.findInFiles",
		"when": "vim.mode == 'Normal' && (editorTextFocus || !inputFocus)"
	},
	{
		// Open source control
		"key": "space g g",
		"command": "runCommands",
		"when": "vim.mode == 'Normal' && (editorTextFocus || !inputFocus)",
		"args": {
			"commands": ["workbench.view.scm", "workbench.scm.focus"]
		}
	},
	{
		// Add selection to next find match
		"key": "ctrl-n",
		"command": "editor.action.addSelectionToNextFindMatch",
		"when": "(vim.mode == 'Normal' || vim.mode == 'Visual') && (editorTextFocus || !inputFocus)"
	},

	// File Explorer
	{
		// Rename file
		"key": "r",
		"command": "renameFile",
		"when": "filesExplorerFocus && foldersViewVisible && !explorerResourceIsRoot && !explorerResourceReadonly && !inputFocus"
	},
	{
		// Copy file
		"key": "c",
		"command": "filesExplorer.copy",
		"when": "filesExplorerFocus && foldersViewVisible && !explorerResourceIsRoot && !explorerResourceReadonly && !inputFocus"
	},
	{
		// Paste file
		"key": "p",
		"command": "filesExplorer.paste",
		"when": "filesExplorerFocus && foldersViewVisible && !explorerResourceIsRoot && !explorerResourceReadonly && !inputFocus"
	},
	{
		// Cut file
		"key": "x",
		"command": "filesExplorer.cut",
		"when": "filesExplorerFocus && foldersViewVisible && !explorerResourceIsRoot && !explorerResourceReadonly && !inputFocus"
	},
	{
		// Delete file
		"key": "d",
		"command": "deleteFile",
		"when": "filesExplorerFocus && foldersViewVisible && !explorerResourceIsRoot && !explorerResourceReadonly && !inputFocus"
	},
	{
		// Create new file
		"key": "a",
		"command": "explorer.newFile",
		"when": "filesExplorerFocus && foldersViewVisible && !explorerResourceIsRoot && !explorerResourceReadonly && !inputFocus"
	},
	{
		// Create new folder
		"key": "shift-a",
		"command": "explorer.newFolder",
		"when": "filesExplorerFocus && foldersViewVisible && !explorerResourceIsRoot && !explorerResourceReadonly && !inputFocus"
	},
	{
		// Open file to the side
		"key": "s",
		"command": "explorer.openToSide",
		"when": "filesExplorerFocus && foldersViewVisible && !explorerResourceIsRoot && !explorerResourceReadonly && !inputFocus"
	},
	{
		// Split editor down, open file and pass focus, close other editors
		"key": "shift-s",
		"command": "runCommands",
		"when": "filesExplorerFocus && foldersViewVisible && !explorerResourceIsRoot && !explorerResourceReadonly && !inputFocus",
		"args": {
			"commands": [
				"workbench.action.splitEditorDown",
				"explorer.openAndPassFocus",
				"workbench.action.closeOtherEditors"
			]
		}
	},
	{
		// Open file and pass focus
		"key": "enter",
		"command": "explorer.openAndPassFocus",
		"when": "filesExplorerFocus && foldersViewVisible && !explorerResourceIsRoot && !explorerResourceIsFolder && !inputFocus"
	},
	{
		// Toggle expand folder
		"key": "enter",
		"command": "list.toggleExpand",
		"when": "filesExplorerFocus && foldersViewVisible && !explorerResourceIsRoot && explorerResourceIsFolder && !inputFocus"
	},

	// Close the current tab
	{
		"key": "ctrl+w",
		"command": "workbench.action.closeActiveEditor",
		"when": "editorTextFocus"
	},

	// Close all tabs
	{
		"key": "shift+w",
		"command": "workbench.action.closeAllEditors",
		"when": "editorTextFocus"
	},

	// Select all text inside the file
	{
		"key": "ctrl+a",
		"command": "editor.action.selectAll",
		"when": "editorTextFocus"
	},

	// Add selection to next find match
	{
		"key": "ctrl+d",
		"command": "editor.action.addSelectionToNextFindMatch",
		"when": "editorTextFocus && vim.mode == 'Normal'"
	},

	// Select all occurrences of the current selection
	{
		"key": "ctrl+shift+l",
		"command": "editor.action.selectHighlights",
		"when": "editorTextFocus && vim.mode == 'Normal'"
	},

	// Move lines up
	{
		"key": "alt+up",
		"command": "editor.action.moveLinesUpAction",
		"when": "editorTextFocus && vim.mode == 'Normal'"
	},

	// Move lines down
	{
		"key": "alt+down",
		"command": "editor.action.moveLinesDownAction",
		"when": "editorTextFocus && vim.mode == 'Normal'"
	},

	// Delete lines
	{
		"key": "ctrl+shift+k",
		"command": "editor.action.deleteLines",
		"when": "editorTextFocus && vim.mode == 'Normal'"
	},

	// Toggle line comment
	{
		"key": "ctrl+/",
		"command": "editor.action.commentLine",
		"when": "editorTextFocus && vim.mode == 'Normal'"
	},

	// Toggle block comment
	{
		"key": "ctrl+shift+a",
		"command": "editor.action.blockComment",
		"when": "editorTextFocus && vim.mode == 'Normal'"
	},

	// Find
	{
		"key": "ctrl+f",
		"command": "actions.find",
		"when": "editorTextFocus && vim.mode == 'Normal'"
	},

	// Replace
	{
		"key": "ctrl+h",
		"command": "editor.action.startFindReplaceAction",
		"when": "editorTextFocus && vim.mode == 'Normal'"
	},

	// Copy line (Normal mode)
	{
		"key": "yy",
		"command": "editor.action.clipboardCopyAction",
		"when": "editorTextFocus && vim.mode == 'Normal'"
	},

	// Copy selected text in Visual mode
	{
		"key": "y",
		"command": "editor.action.clipboardCopyAction",
		"when": "editorTextFocus && (vim.mode == 'Visual' || vim.mode == 'VisualLine' || vim.mode == 'VisualBlock')"
	},

	// Select all text
	{
		"key": "ctrl+a",
		"command": "editor.action.selectAll",
		"when": "editorTextFocus && vim.mode == 'Normal'"
	},

	// Copy selected text
	{
		"key": "ctrl+c",
		"command": "editor.action.clipboardCopyAction",
		"when": "editorTextFocus && (vim.mode == 'Normal' || vim.mode == 'Visual' || vim.mode == 'VisualLine' || vim.mode == 'VisualBlock')"
	},

	// Undo
	{
		"key": "ctrl+z",
		"command": "undo",
		"when": "editorTextFocus && vim.mode == 'Normal'"
	},

	// Redo
	{
		"key": "ctrl+y",
		"command": "redo",
		"when": "editorTextFocus && vim.mode == 'Normal'"
	},

	// Paste
	{
		"key": "ctrl+v",
		"command": "editor.action.clipboardPasteAction",
		"when": "editorTextFocus && vim.mode == 'Normal'"
	},
	// Copy selected text
	{
		"key": "ctrl+c",
		"command": "editor.action.clipboardCopyAction",
		"when": "editorTextFocus && (vim.mode == 'Normal' || vim.mode == 'Visual' || vim.mode == 'VisualLine' || vim.mode == 'VisualBlock')"
	},

	// Cut selected text
	{
		"key": "ctrl+x",
		"command": "editor.action.clipboardCutAction",
		"when": "editorTextFocus && (vim.mode == 'Normal' || vim.mode == 'Visual' || vim.mode == 'VisualLine' || vim.mode == 'VisualBlock')"
	},

	// Paste from clipboard
	{
		"key": "ctrl+v",
		"command": "editor.action.clipboardPasteAction",
		"when": "editorTextFocus && vim.mode == 'Normal'"
	},

	// Delete selected text
	{
		"key": "delete",
		"command": "editor.action.deleteLeft",
		"when": "editorTextFocus && vim.mode == 'Normal'"
	},
	{
		"key": "backspace",
		"command": "editor.action.deleteRight",
		"when": "editorTextFocus && vim.mode == 'Normal'"
	},
	// Copy selected line and paste it below
	{
		"key": "ctrl+shift+d",
		"command": "editor.action.copyLinesDownAction",
		"when": "editorTextFocus && vim.mode == 'Normal'"
	},
	{
		"key": "ctrl+shift+u",
		"command": "editor.action.copyLinesUpAction",
		"when": "editorTextFocus && vim.mode == 'Normal'"
	},
	// Toggle the terminal
	{
		"key": "ctrl+j",
		"command": "workbench.action.terminal.toggleTerminal",
		"when": "editorTextFocus"
	},
	// Cut selected text in Insert mode
	{
		"key": "ctrl+x",
		"command": "editor.action.clipboardCutAction",
		"when": "editorTextFocus && vim.mode == 'Insert'"
	}
]

launch.json

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "command": "npm run server",
      "name": "Run npm start",
      "request": "launch",
      "type": "node-terminal"
    }
  ]
}

settings.json

{
	// For vim mode
	"vim.useSystemClipboard": true,
	"vim.handleKeys": {
		"<C-c>": false,
		"<C-x>": false,
		"<C-v>": false
	},
	"editor.lineNumbers": "relative", // if true, the line numbers will be relative to the cursor position
	"editor.stickyScroll.enabled": true, // if true, the editor will scroll to the cursor position
	"editor.linkedEditing": true, // if true, the editor will enable linked editing
	"editor.suggest.insertMode": "replace",
	// "explorer.confirmDelete": false,
	// "explorer.confirmDragAndDrop": false,
	// "extensions.autoUpdate": "onlyEnableExtensions",
	"editor.codeActionsOnSave": {
		"source.addMissingImports.ts": "always",
		"source.organizeImports": "always"
	},
	"editor.lineHeight": 1.8,
	"editor.fontFamily": "Cascadia Code",
	"terminal.integrated.lineHeight": 1.6,
	"terminal.integrated.cursorStyle": "line",
	"terminal.integrated.cursorWidth": 0.5,
	"editor.defaultFormatter": "esbenp.prettier-vscode",
	"editor.wordWrap": "on",
	"terminal.integrated.fontFamily": "'MesloLGS NF'",
	"terminal.integrated.fontWeight": "normal",
	"terminal.integrated.fontSize": 17,
	"editor.cursorBlinking": "expand",
	// "window.titleBarStyle": "native", need to custom.
	"editor.inlineSuggest.enabled": true,
	"terminal.integrated.enableMultiLinePasteWarning": "never",
	"window.zoomLevel": 0,
	"files.exclude": {
		"out": true, // set this to true to hide the "out" folder with the compiled JS files
		"dist": true, // set this to true to hide the "dist" folder with the compiled JS files
		"node_modules": true
	},
	"search.exclude": {
		"out": false, // set this to false to include "out" folder in search results
		"dist": false, // set this to false to include "dist" folder in search results
		"node_modules": false
	},
	"typescript.tsc.autoDetect": "off", // Turn off tsc task auto detection since we have the necessary tasks as npm scripts
	"editor.fontSize": 14,
	"editor.tabSize": 2,
	"terminal.integrated.defaultProfile.windows": "Git Bash",
	"editor.minimap.enabled": false,
	"editor.formatOnSave": true,
	"editor.formatOnType": true,
	"workbench.colorTheme": "Vim Dark Hard",
	"[*]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	"terminal.integrated.profiles.windows": {
		"PowerShell": {
			"source": "PowerShell",
			"icon": "terminal-powershell"
		},
		"Command Prompt": {
			"path": ["${env:windir}\\Sysnative\\cmd.exe", "${env:windir}\\System32\\cmd.exe"],
			"args": [],
			"icon": "terminal-cmd"
		},
		"Git Bash": {
			"source": "Git Bash"
		},
		"Ubuntu-22.04 (WSL)": {
			"path": "C:\\WINDOWS\\System32\\wsl.exe",
			"args": ["-d", "Ubuntu-22.04"]
		}
	},
	"editor.formatOnPaste": true,
	"[typescriptreact]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	"workbench.activityBar.location": "top",
	"workbench.sideBar.location": "left",
	"todohighlight.isEnable": false,
	"typescript.updateImportsOnFileMove.enabled": "always",
	"git.autofetch": true,
	"terminal.integrated.defaultProfile.linux": "zsh",
	"[json]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	}
}


// Relative Line number.

setup-vscode.ps1

# Install recommended extensions
code --install-extension esbenp.prettier-vscode
code --install-extension dbaeumer.vscode-eslint
code --install-extension coenraads.bracket-pair-colorizer
code --install-extension aaron-bond.better-comments

Write-Output "VS Code setup completed!"

setup-vscode.sh

#!/bin/bash

# Install recommended extensions
code --install-extension esbenp.prettier-vscode
code --install-extension dbaeumer.vscode-eslint
code --install-extension coenraads.bracket-pair-colorizer
code --install-extension aaron-bond.better-comments

echo "VS Code setup completed!"

tasks.json

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Setup VS Code",
      "type": "shell",
      "command": "./setup-vscode.sh",
      "problemMatcher": []
    }
  ]
}

// chmod +x setup-vscode.sh