Visual Studio Code Customization

📝 Why?

I've been a loyal user of Visual Studio Code since 2018, and it has become my preferred code editor. Its speed and flexibility make it a reliable choice for me, regardless of the operating system I'm using. Over the years, I've created numerous projects using this code editor, and I've made various customizations to tailor it to my preferences.

I've tweaked its appearance, added and modified features, installed extensions, and even created a personalized theme because I haven't found a theme that's absolutely perfect for me. Each time I set up a new work environment, I find myself manually configuring these settings. To streamline this process, I've uploaded all my settings here, so I can quickly apply them. Feel free to use any of them for your convenience.

🛠 VS Code Settings

  {
  "editor.fontSize": 20,
  "editor.tabSize": 2,
  "editor.wordWrap": "on",
  "editor.cursorSmoothCaretAnimation": true,
  "editor.cursorBlinking": "expand",
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "editor.formatOnType": true,
  "workbench.colorCustomizations": {
    "editorGroupHeader.tabsBackground": "#2c2c54",
    "activityBar.background": "#2c2c54",
    "sideBar.background": "#141422",
    "minimap.background": "#141422",
    "tab.activeBackground": "#706fd3",
    "tab.inactiveBackground": "#191846",
    "terminal.border": "#2c2c54",
    "terminal.background": "#2c2c54",
    "statusBar.background": "#474787",
    "scrollbarSlider.background": "#474787",
    "scrollbarSlider.hoverBackground": "#706fd3"
  },
  "editor.tokenColorCustomizations": {
    "comments": "#95afc0"
  },
  "editor.linkedEditing": true,
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": true,
  "editor.guides.bracketPairsHorizontal": true,
  "editor.hover.enabled": false,
  "window.zoomLevel": 1,
  // Live Server 
  "liveServer.settings.CustomBrowser": "chrome:PrivateMode",
  "liveServer.settings.donotShowInfoMsg": true,
  "liveServer.settings.donotVerifyTags": true,
  // Live SASS Compiler
  "liveSassCompile.settings.formats": [
    {
      "format": "compressed",
      "extensionName": ".min.css",
      "savePath": "/css"
    }
  ],
  "liveSassCompile.settings.generateMap": false,
  // VS Code Theme Customization
  "workbench.iconTheme": "material-icon-theme",
  "workbench.colorTheme": "Andromeda",
  "workbench.editor.enablePreview": false,
  "terminal.integrated.defaultProfile.windows": "Git Bash",
  "terminal.integrated.fontSize": 20,
  "diffEditor.wordWrap": "on",
  "security.workspace.trust.untrustedFiles": "open",
  // "files.autoSave": "afterDelay",
  // "files.autoSaveDelay": 10,
  
  // Prettier Config
  "prettier.proseWrap": "always",
  "prettier.singleQuote": true,
  "prettier.arrowParens": "avoid",
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
  },
  // Screencast Mode
  "screencastMode.onlyKeyboardShortcuts": true,
  "screencastMode.mouseIndicatorColor": "#f1c40f",
  "screencastMode.verticalOffset": 0,

  // Enable Emmet support for JSX
   "emmet.includeLanguages": {
      "javascript": "javascriptreact"
   }
}

⚙️ VS Code Extension

• Auto Close Tag (Jun Han)
• Auto Import - ES6, TS, JSX, TSX (Sergey Korenuk)
• Auto Rename Tag (Jun Han)
• Debugger for Chrome
• 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

• Andromeda 👈
• Dracula Official
• 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 + `	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

✒ Font Info

• Fira Code
• Operator Mono

🧑‍💻 Contributors

• @Ali Hossain

🥰 Follow me

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