├── README.md └── VS Code Script.txt /README.md: -------------------------------------------------------------------------------- 1 | # Visual Studio Code Customization 2 | 3 | ## 📝 Why? 4 | 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. 5 | 6 | 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. 7 | 8 | ## 🛠 VS Code Settings 9 | ```bash 10 | { 11 | "editor.fontSize": 20, 12 | "editor.tabSize": 2, 13 | "editor.wordWrap": "on", 14 | "editor.cursorSmoothCaretAnimation": true, 15 | "editor.cursorBlinking": "expand", 16 | "editor.formatOnSave": true, 17 | "editor.formatOnPaste": true, 18 | "editor.formatOnType": true, 19 | "workbench.colorCustomizations": { 20 | "editorGroupHeader.tabsBackground": "#2c2c54", 21 | "activityBar.background": "#2c2c54", 22 | "sideBar.background": "#141422", 23 | "minimap.background": "#141422", 24 | "tab.activeBackground": "#706fd3", 25 | "tab.inactiveBackground": "#191846", 26 | "terminal.border": "#2c2c54", 27 | "terminal.background": "#2c2c54", 28 | "statusBar.background": "#474787", 29 | "scrollbarSlider.background": "#474787", 30 | "scrollbarSlider.hoverBackground": "#706fd3" 31 | }, 32 | "editor.tokenColorCustomizations": { 33 | "comments": "#95afc0" 34 | }, 35 | "editor.linkedEditing": true, 36 | "editor.bracketPairColorization.enabled": true, 37 | "editor.guides.bracketPairs": true, 38 | "editor.guides.bracketPairsHorizontal": true, 39 | "editor.hover.enabled": false, 40 | "window.zoomLevel": 1, 41 | // Live Server 42 | "liveServer.settings.CustomBrowser": "chrome:PrivateMode", 43 | "liveServer.settings.donotShowInfoMsg": true, 44 | "liveServer.settings.donotVerifyTags": true, 45 | // Live SASS Compiler 46 | "liveSassCompile.settings.formats": [ 47 | { 48 | "format": "compressed", 49 | "extensionName": ".min.css", 50 | "savePath": "/css" 51 | } 52 | ], 53 | "liveSassCompile.settings.generateMap": false, 54 | // VS Code Theme Customization 55 | "workbench.iconTheme": "material-icon-theme", 56 | "workbench.colorTheme": "Andromeda", 57 | "workbench.editor.enablePreview": false, 58 | "terminal.integrated.defaultProfile.windows": "Git Bash", 59 | "terminal.integrated.fontSize": 20, 60 | "diffEditor.wordWrap": "on", 61 | "security.workspace.trust.untrustedFiles": "open", 62 | // "files.autoSave": "afterDelay", 63 | // "files.autoSaveDelay": 10, 64 | 65 | // Prettier Config 66 | "prettier.proseWrap": "always", 67 | "prettier.singleQuote": true, 68 | "prettier.arrowParens": "avoid", 69 | "editor.defaultFormatter": "esbenp.prettier-vscode", 70 | "[html]": { 71 | "editor.defaultFormatter": "vscode.html-language-features" 72 | }, 73 | // Screencast Mode 74 | "screencastMode.onlyKeyboardShortcuts": true, 75 | "screencastMode.mouseIndicatorColor": "#f1c40f", 76 | "screencastMode.verticalOffset": 0, 77 | 78 | // Enable Emmet support for JSX 79 | "emmet.includeLanguages": { 80 | "javascript": "javascriptreact" 81 | } 82 | } 83 | 84 | ``` 85 | 86 | ## ⚙️ VS Code Extension 87 | - Auto Close Tag (Jun Han) 88 | - Auto Import - ES6, TS, JSX, TSX (Sergey Korenuk) 89 | - Auto Rename Tag (Jun Han) 90 | - Debugger for Chrome 91 | - ESLint (Microsoft) 92 | - indent-rainbow (oderwat) 93 | - HTML CSS Support (ecmel) 94 | - JavaScript (ES6) code snippets (charalampos karypidis) 95 | - Live Server (Ritwick Dey) 96 | - Live Sass Compiler (Glenn Marks) 97 | - Material Icon Theme (Philipp Kief) 98 | - npm Intellisense (Christian Kohler) 99 | - Path Intellisense (Christian Kohler) 100 | - Postman (Postman) 101 | - Prettier - Code formatted (Prettier) 102 | - Reactjs code snippets (charalampos karypidis) 103 | - Simple React Snippets (Burke Holland) 104 | - Snipped (Jefferson Licet) 105 | - Stylelint (Stylelint) 106 | - WordPress Snippets (wpprotools.io) 107 | - VSCode React Refactor (planbcoding) 108 | - Tailwind CSS IntelliSense (Tailwind Labs) 109 | 110 | 111 | ## 🎨 VS Code Themes 112 | - Andromeda 👈 113 | - Dracula Official 114 | - Night Owl 115 | - Shades of Purple 116 | - SynthWave '84 117 | - Ayu (Theme) 118 | 119 | ## 🔑 VS Code Keyboard Shortcuts 120 | 121 | | Keyboard Shortcuts | Windows / Linux | Mac | 122 | | :-------- | :------- | :-------------------------------- | 123 | | HTML boilerplate | ! + TAB | ! + TAB | 124 | | Open the palette to search for a file | Ctrl + P | cmd + P | 125 | | Add cursors to all matching selections | Ctrl + Shift + L | cmd + Shift + L | 126 | | Undo | Ctrl + U | cmd + U | 127 | | Select Current Line | Ctrl + L | cmd + L | 128 | | Zen Mode | Ctrl + K Z | cmd + K Z | 129 | | Toggle Sidebar | Ctrl + B | cmd + B | 130 | | Search Global Files | Ctrl + Shift + F | Ctrl + Shift + F | 131 | | Search on file | Ctrl + F | cmd + F | 132 | | Find and Replace | Ctrl + H | cmd + H | 133 | | Delete the previous Word | Ctrl + Backspace | cmd + Backspace | 134 | | Move line up/Down | Alt + up/down arrow | option + up/down arrow | 135 | | Add multiple cursors | Ctrl + Alt +up/down arrow | cmd + option + up/down arrow | 136 | | Comment Line | Ctrl + / | cmd + / | 137 | | Comment Line | Ctrl + K + Ctrl + C | cmd + K + cmd + C | 138 | | Split View | Ctrl + \ | cmd + \ | 139 | | Switch Between views | Ctrl +1, Ctrl + 2 .. | cmd + 1, cmd + 2 | 140 | | Duplicate Line | Alt + Shift + up/down | option + Shift + up/down | 141 | | Navigate to a specific line | Ctrl + g | cmd + G | 142 | | Open Terminal | Ctrl + ` | cmd + ` | 143 | | To Show suggestion | Ctrl + Space | cmd + space | 144 | | To Close a TAB | Ctrl + W | cmd + W | 145 | | To Close all TAB | Ctrl + Shift + W | cmd + Shift + W | 146 | 147 | 148 | 149 | 150 | 151 | ## ✒ Font Info 152 | - [Fira Code](https://fonts.google.com/specimen/Fira+Code) 153 | - [Operator Mono](https://www.typography.com/fonts/operator/styles) 154 | 155 | ## 🧑‍💻 Contributors 156 | - [@Ali Hossain](https://github.com/shovoalways/) 157 | 158 | 159 | ## 🥰 Follow me 160 | - [@Github](https://github.com/shovoalways/) 161 | - [@Facebook](https://facebook.com/shovoalways/) 162 | - [@Twitter](https://twitter.com/shovoalways/) 163 | - [@Instagram](https://instagram.com/shovoalways/) 164 | -------------------------------------------------------------------------------- /VS Code Script.txt: -------------------------------------------------------------------------------- 1 | /*================================ 2 | VS Code Settings 3 | ================================*/ 4 | 5 | { 6 | "editor.fontSize": 20, 7 | "editor.tabSize": 2, 8 | "editor.wordWrap": "on", 9 | "prettier.proseWrap": "always", 10 | "editor.formatOnSave": true, 11 | "liveServer.settings.CustomBrowser": "chrome:PrivateMode", 12 | "window.zoomLevel": 1, 13 | "files.autoSave": "afterDelay", 14 | "files.autoSaveDelay": 10, 15 | "liveServer.settings.donotShowInfoMsg": true, 16 | "workbench.colorTheme": "Andromeda", 17 | "liveServer.settings.donotVerifyTags": true, 18 | "liveSassCompile.settings.formats": [ 19 | { 20 | "format": "compressed", 21 | "extensionName": ".min.css", 22 | "savePath": "/css" 23 | } 24 | ], 25 | "liveSassCompile.settings.generateMap": false, 26 | "workbench.iconTheme": "material-icon-theme", 27 | "terminal.integrated.defaultProfile.windows": "Git Bash", 28 | "editor.defaultFormatter": "esbenp.prettier-vscode", 29 | "workbench.colorCustomizations": { 30 | "titleBar.activeBackground": "#474787", 31 | "editorGroupHeader.tabsBackground": "#2c2c54", 32 | "activityBar.background": "#2c2c54", 33 | "sideBar.background": "#141422", 34 | "minimap.background": "#141422", 35 | "tab.activeBackground": "#706fd3", 36 | "tab.inactiveBackground": "#191846", 37 | "terminal.border": "#2c2c54", 38 | "terminal.background": "#2c2c54", 39 | "statusBar.background": "#474787", 40 | "scrollbarSlider.background": "#474787", 41 | "scrollbarSlider.hoverBackground": "#706fd3", 42 | }, 43 | "editor.tokenColorCustomizations": { 44 | "comments": "#d4922f" 45 | }, 46 | "editor.linkedEditing": true, 47 | "terminal.integrated.fontSize": 20, 48 | "terminal.integrated.fontWeight": null 49 | } 50 | 51 | 52 | /* References */ 53 | https://code.visualstudio.com/api/references/theme-color 54 | 55 | 56 | 57 | 58 | /*================================ 59 | VS Code Settings Update 2.0 60 | ================================*/ 61 | 62 | { 63 | "editor.fontFamily": "Operator Mono, Fira Code", 64 | "editor.fontSize": 20, 65 | "editor.tabSize": 2, 66 | "editor.wordWrap": "on", 67 | "editor.cursorSmoothCaretAnimation": true, 68 | "editor.cursorBlinking": "expand", 69 | "prettier.proseWrap": "always", 70 | "editor.formatOnSave": true, 71 | "editor.formatOnPaste": true, 72 | "editor.formatOnType": true, 73 | "editor.defaultFormatter": "esbenp.prettier-vscode", 74 | "[html]": { 75 | "editor.defaultFormatter": "vscode.html-language-features" 76 | }, 77 | "workbench.colorCustomizations": { 78 | "editorGroupHeader.tabsBackground": "#2c2c54", 79 | "activityBar.background": "#2c2c54", 80 | "sideBar.background": "#141422", 81 | "minimap.background": "#141422", 82 | "tab.activeBackground": "#706fd3", 83 | "tab.inactiveBackground": "#191846", 84 | "terminal.border": "#2c2c54", 85 | "terminal.background": "#2c2c54", 86 | "statusBar.background": "#474787", 87 | "scrollbarSlider.background": "#474787", 88 | "scrollbarSlider.hoverBackground": "#706fd3" 89 | }, 90 | "editor.tokenColorCustomizations": { 91 | "comments": "#d4922f" 92 | }, 93 | "editor.linkedEditing": true, 94 | "editor.bracketPairColorization.enabled": true, 95 | "editor.guides.bracketPairs": true, 96 | "editor.guides.bracketPairsHorizontal": true, 97 | "editor.hover.enabled": false, 98 | 99 | "window.zoomLevel": 1, 100 | "files.autoSave": "afterDelay", 101 | "files.autoSaveDelay": 10, 102 | 103 | "liveServer.settings.CustomBrowser": "chrome:PrivateMode", 104 | "liveServer.settings.donotShowInfoMsg": true, 105 | "liveServer.settings.donotVerifyTags": true, 106 | "liveSassCompile.settings.formats": [ 107 | { 108 | "format": "compressed", 109 | "extensionName": ".min.css", 110 | "savePath": "/css" 111 | } 112 | ], 113 | "liveSassCompile.settings.generateMap": false, 114 | 115 | "workbench.iconTheme": "material-icon-theme", 116 | "workbench.colorTheme": "Andromeda", 117 | "workbench.editor.enablePreview": false, 118 | 119 | "terminal.integrated.defaultProfile.windows": "Git Bash", 120 | "terminal.integrated.fontSize": 20, 121 | "terminal.integrated.fontWeight": null, 122 | 123 | "diffEditor.wordWrap": "on", 124 | 125 | "bracketPairColorizer.depreciation-notice": false, 126 | "security.workspace.trust.untrustedFiles": "open" 127 | } 128 | 129 | 130 | 131 | 132 | /*================================ 133 | VS Code Extention 134 | ================================*/ 135 | 01. Auto Close Tag 136 | 02. Auto Rename Tag 137 | 03. Bracket Pair Colorizer 138 | 04. Debugger for Chrome 139 | 05. HTML CSS Support 140 | 06. JavaScript (ES6) code snippets 141 | 07. Live Server 142 | 08. Live Sass Compiler 143 | 09. Material Icon Theme 144 | 10. Prettier - Code formatter 145 | 11. WordPress Snippets 146 | 12. Simple React Snippets 147 | 148 | 149 | 150 | 151 | 152 | 153 | /*================================ 154 | VS Code Themes 155 | ================================*/ 156 | 01. Andromeda 157 | 02. Dracula Official 158 | 03. Night Owl 159 | 04. Shades of Purple 160 | 05. SynthWave '84 161 | 06. Ayu (Theme) 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | --------------------------------------------------------------------------------