Skip to content

Latest commit

 

History

History
163 lines (144 loc) · 5.86 KB

README.md

File metadata and controls

163 lines (144 loc) · 5.86 KB

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

🧑‍💻 Contributors

🥰 Follow me