Visual Studio Code Customization

A personal VS Code setup for Frontend Development and Computer Science study. This repository contains my preferred VS Code settings, extensions, and setup guide. So I can quickly restore my environment on any new machine.

---

FINAL REPO STRUCTURE

Visual-Studio-Code-Customization/
│ 
│ 
├── 📁 extensions
│   ├── 📕 VS Code update extension (04-04-2026).pdf
│   └── 📝 extensions-list.md
│ 
├── 📁 keyboard-shortcuts
│   ├── 📕 01-keyboard-shortcuts-windows.pdf
│   ├── 📕 02-keyboard-shortcuts-linux.pdf
│   ├── 📕 03-keyboard-shortcuts-macos.pdf
│   └── 📝 README.md
│ 
├── 📁 settings
│   ├── ⚙️ keybindings.json
│   ├── ⚙️ settings.json
│   └── ⚙️ settings.min.json
│ 
├── 📁 setup-guide
│   ├── 📝 apps-used-for-vscode.md
│   └── 📝 setup.md
│ 
├── 📝 README.md
└── 📄 VS Code Script.txt

✨ Features

• Clean UI (no minimap, distraction-free)
• Frontend optimized (HTML, CSS, JS, React)
• Prettier-based formatting
• Mobile preview friendly
• Git & productivity focused

🛠 VS Code min json settings daily frontend use (clean + fast)

{
  "editor.fontFamily": "Fira Code, Consolas, 'Courier New', monospace",
  "editor.fontLigatures": true,
  "editor.fontSize": 17,

  "editor.minimap.enabled": false,
  "breadcrumbs.enabled": false,
  "editor.guides.bracketPairs": true,
  "editor.bracketPairColorization.independentColorPoolPerBracketType": true,

  "editor.cursorStyle": "line",
  "editor.cursorBlinking": "expand",
  "editor.cursorSmoothCaretAnimation": "on",

  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",

  "editor.renderWhitespace": "selection",

  "files.autoSave": "afterDelay",

  "workbench.colorTheme": "Dracula Theme",
  "workbench.iconTheme": "material-icon-theme",

  "git.autofetch": true,
  "explorer.confirmDelete": false,

  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

✨ Features

• Clean UI (no minimap, distraction-free)
• Frontend optimized (HTML, CSS, JS, React)
• Prettier-based formatting
• Mobile preview friendly
• Git & productivity focused

🖥️ Environment

• OS: Windows
• Font: Fira Code
• Theme: Dracula

📂 Folder Structure

• settings → VS Code settings
• extensions → Extension list
• setup-guide → How to restore setup

⚠️ Notes

Some paths (like Chrome executable) are Windows-specific. Update them if you are using another OS.

🚀 How to Use

1. Install VS Code
2. Copy settings.min.json or settings.full.json
3. Install extensions from extensions-list.md
4. Restart VS Code

⚙️ VS Code Extension

• Auto Close Tag (Jun Han)
• Auto Import - ES6, TS, JSX, TSX (Sergey Korenuk)
• Auto Rename Tag (Jun Han)
• ESLint (Microsoft)
• indent-rainbow (oderwat)
• HTML CSS Support (ecmel)
• JavaScript (ES6) code snippets (charalampos karypidis)
• Live Server (Ritwick Dey)
• Live Sass Compiler (Glenn Marks)
• Material Icon Theme (Philipp Kief)
• npm Intellisense (Christian Kohler)
• Path Intellisense (Christian Kohler)
• Postman (Postman)
• Prettier - Code formatted (Prettier)
• Reactjs code snippets (charalampos karypidis)
• Simple React Snippets (Burke Holland)
• Snipped (Jefferson Licet)
• Stylelint (Stylelint)
• WordPress Snippets (wpprotools.io)
• VSCode React Refactor (planbcoding)
• Tailwind CSS IntelliSense (Tailwind Labs)

🎨 VS Code Themes

• Dracula Theme Official 👈
• Andromeda
• Night Owl
• Shades of Purple
• SynthWave '84
• Ayu (Theme)

🔑 VS Code Keyboard Shortcuts

Keyboard Shortcuts	Windows / Linux	Mac
HTML boilerplate	! + TAB	! + TAB
Open the palette to search for a file	Ctrl + P	cmd + P
Add cursors to all matching selections	Ctrl + Shift + L	cmd + Shift + L
Undo	Ctrl + U	cmd + U
Select Current Line	Ctrl + L	cmd + L
Zen Mode	Ctrl + K Z	cmd + K Z
Toggle Sidebar	Ctrl + B	cmd + B
Search Global Files	Ctrl + Shift + F	Ctrl + Shift + F
Search on file	Ctrl + F	cmd + F
Find and Replace	Ctrl + H	cmd + H
Delete the previous Word	Ctrl + Backspace	cmd + Backspace
Move line up/Down	Alt + up/down arrow	option + up/down arrow
Add multiple cursors	Ctrl + Alt +up/down arrow	cmd + option + up/down arrow
Comment Line	Ctrl + /	cmd + /
Comment Line	Ctrl + K + Ctrl + C	cmd + K + cmd + C
Split View	Ctrl + \	cmd + \
Switch Between views	Ctrl +1, Ctrl + 2 ..	cmd + 1, cmd + 2
Duplicate Line	Alt + Shift + up/down	option + Shift + up/down
Navigate to a specific line	Ctrl + g	cmd + G
Open Terminal	Ctrl + `, Ctrl + J	cmd + `
To Show suggestion	Ctrl + Space	cmd + space
To Close a TAB	Ctrl + W	cmd + W
To Close all TAB	Ctrl + Shift + W	cmd + Shift + W

✨ VS Code Extensions Shortcuts

Keyboard Shortcuts	Windows / Linux	Mac	Description
Quokka.js	Default: ctrl + alt + j, Custom: delete	cmd + option + j	Show JavaScript Output

Apps Required for VS Code Setup

This file lists all the essential apps installed on my PC that are used alongside Visual Studio Code for development.

Apps Name	Version	Download Link
Visual Studio Code	1.121	Official Download
Node.js	22.140	Official Download
Git	249.0	Official Download
GitHub CLI	2.69.0	Official Download
PowerShell 7 (x64)	7.5.4	Official Download

✒ Font Info

• Fira Code
• Operator Mono

🧑‍💻 Contributors

• @Shariar Ahamed

---

🌐 Connect With Me

• @Github
• @Linkedin
• @Facebook
• @Twitter
• @Instagram