Visual Studio Code Customization
Tags: webdev, programming, tutorial
Published: 2022-12-10 14:46:45

📝 **Why?**``
I am using Visual Studio code since 2018 and this time I created lots of projects with this code editor. VS Code is my favorite code editor. It's fast and flexible. no matter which operating system I am using VS code is my go-to editor. Over a long period of time, I needed lots of modifications, I changed the look, features, extensions as well as theme. No theme is perfect for my personalization, so I customized a theme in my way. Also, I like to customize extension features. So every time why I set up a new work environment I need to do it manually. So, I uploaded all settings here. So I can do this fast. You can use any one of them.

`

## 🛠 VS Code Settings
  `{
  "editor.fontFamily": "Operator Mono, Fira Code",
  "editor.fontSize": 20,
  "editor.tabSize": 2,
  "editor.wordWrap": "on",
  "editor.cursorSmoothCaretAnimation": true,
  "editor.cursorBlinking": "expand",
  "prettier.proseWrap": "always",
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "editor.formatOnType": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
  },
  "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,
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 10,
  "liveServer.settings.CustomBrowser": "chrome:PrivateMode",
  "liveServer.settings.donotShowInfoMsg": true,
  "liveServer.settings.donotVerifyTags": true,
  "liveSassCompile.settings.formats": [
    {
      "format": "compressed",
      "extensionName": ".min.css",
      "savePath": "/css"
    }
  ],
  "liveSassCompile.settings.generateMap": false,
  "workbench.iconTheme": "material-icon-theme",
  "workbench.colorTheme": "Andromeda",
  "workbench.editor.enablePreview": false,
  "terminal.integrated.defaultProfile.windows": "Git Bash",
  "terminal.integrated.fontSize": 20,
  "terminal.integrated.fontWeight": null,
  "diffEditor.wordWrap": "on",
  "bracketPairColorizer.depreciation-notice": false,
  "security.workspace.trust.untrustedFiles": "open"
}`
`

## ⚙️ VS Code Extension
Auto Close Tag
Auto Rename Tag
Debugger for Chrome
indent-rainbow
HTML CSS Support
JavaScript (ES6) code snippets
Live Server
Live Sass Compiler
Material Icon Theme
Prettier - Code formatter
WordPress Snippets
Simple React Snippets

## 🎨 VS Code Themes
Andromeda 👈
Dracula Official
Night Owl
Shades of Purple
SynthWave '84

## Ayu (Theme)
✒ Font Info
Fira Code
Operator Mono