DEV Community

Abrar Mehedi
Abrar Mehedi

Posted on

Visual Studio Code Customization

📝 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

Top comments (0)