# My VS Code setup In this article, I'll be sharing my VS Code Setup with you. It includes the theme and Icons that use and also Extensions (this is very important). ## 🎨Theme I use [**Andromeda**](https://marketplace.visualstudio.com/items?itemName=EliverLara.andromeda) as my primary theme for my vs code ![andromeda-screenshot](https://github.com/EliverLara/Andromeda/raw/master/images/andromeda.png align="left") ## 🪟Icons For Icons, I sometimes switch between [**Material Icon Theme**](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme) and [**Material Theme Icons**](https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-material-theme-icons)**.** ### Material Icon Theme ![Material Icon Theme](https://i.imgur.com/xA90m2X.png align="left") ### Material Theme Icons ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1675233057115/b8d1623c-a092-475e-a66a-91b4a42e5441.png align="center") ## ⚒️ Extensions Now the best part, There are a lot of extensions I mentioned only my favorite or the one that I use mostly every day. ### Auto Rename Tag Automatically rename paired HTML/XML tag, same as Visual Studio IDE does. **Download:** [**Auto Rename Tag**](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag) ![](https://github.com/formulahendry/vscode-auto-rename-tag/raw/HEAD/images/usage.gif align="center") ### Bracket Pair Colorization Toggler A VS Code extension that gives you a simple command to quickly toggle the global “Bracket Pair Colorization” **Download:** [**Bracket Pair Colorization Toggler**](https://marketplace.visualstudio.com/items?itemName=dzhavat.bracket-pair-toggler) ![](https://github.com/dzhavat/bracket-pair-toggler/raw/HEAD/assets/bracket-pair-toggler-demo.gif align="center") ### C/C++\*\* The C/C++ extension adds language support for C/C++ to Visual Studio Code, including editing (IntelliSense) and debugging features. **Download:** [**C/C++**](https://marketplace.visualstudio.com/items?itemName=ms-vscode.cpptools) ![](https://i.imgur.com/0syu1Ym.png align="center") ### Code Runner Run code snippet or code file for multiple languages **Download:** [**Code Runner**](https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner) ![Usage](https://github.com/formulahendry/vscode-code-runner/raw/HEAD/images/usage.gif align="left") ### Code Spell Checker A basic spell checker that works well with code and documents. The goal of this spell checker is to help catch common spelling errors while keeping the number of false positives low. **Download:** [**Code Spell Checker**](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) ![Example](https://raw.githubusercontent.com/streetsidesoftware/vscode-spell-checker/main/images/example.gif align="left") ### DotENV VSCode `.env` syntax highlighting. **Download:** [**DotENV**](https://marketplace.visualstudio.com/items?itemName=mikestead.dotenv) ![Example](https://github.com/mikestead/vscode-dotenv/raw/master/images/screenshot.png align="left") ### Error Lens ErrorLens turbo-charges language diagnostic features by making diagnostics stand out more prominently, highlighting the entire line wherever a diagnostic is generated by the language and also prints the message inline. **Download:** [**Error Lens**](https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens) ![Demo image](https://raw.githubusercontent.com/usernamehw/vscode-error-lens/master/img/demo.png align="left") ### ES7+ React/Redux/React-Native snippets JavaScript and React/Redux snippets in ES7+ with Babel plugin features for [VS Code](https://code.visualstudio.com/) **Download:** [**ES7+ React/Redux/React-Native snippets**](https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets) ![](https://i.imgur.com/cYpm6cw.png align="center") ### ESLint The extension uses the ESLint library installed in the opened workspace folder. If the folder doesn't provide one the extension looks for a global install version. If you haven't installed ESLint either locally or globally do so by running `npm install eslint` in the workspace folder for a local install or `npm install -g eslint` for a global install. **Download:** [**ESLint**](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) ![](https://i.imgur.com/R3o4517.png align="center") ### Git Graph View a Git Graph of your repository, and easily perform Git actions from the graph. Configurable to look the way you want! **Download:** [Git Graph](https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph) ![Recording of Git Graph](https://github.com/mhutchie/vscode-git-graph/raw/master/resources/demo.gif align="left") ### GitLens GitLens **supercharges** Git inside VS Code and unlocks **untapped knowledge** within each repository. It helps you to **visualize code authorship** at a glance via Git blame annotations and CodeLens, **seamlessly navigate and explore** Git repositories, **gain valuable insights** via rich visualizations and powerful comparison commands, and so much more. **Download:** [**GitLens**](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens) ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1675224552887/688896dd-cfff-41fc-aa2e-53716e5585c6.png align="center") ### HTML Boilerplate This extension provides the standard HTML boilerplate code used in all web applications. **Download:** [**HTML Boilerplate**](https://marketplace.visualstudio.com/items?itemName=sidthesloth.html5-boilerplate) ![alt text](https://s19.postimg.cc/3mig98d5v/html_boilerplate_1_0_3.gif align="left") ### Import Cost This extension will display inline in the editor the size of the imported package. The extension utilizes webpack in order to detect the imported size. **Download:** [**Import Cost**](https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost) ![Example Image](https://citw.dev/_next/image?url=%2fposts%2fimport-cost%2f1quov3TFpgG2ur7myCLGtsA.gif&w=1080&q=75 align="left") ### Live Server It'll enable live changes without saving files. **Download:** [**Live Server**](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) ![Live Server Demo VSCode](https://github.com/ritwickdey/vscode-live-server/raw/HEAD/images/Screenshot/vscode-live-server-animated-demo.gif align="left") ### Markdown All in One All you need for Markdown (keyboard shortcuts, table of contents, auto preview and more). ***Note***: VS Code has basic Markdown support out-of-the-box (e.g, **Markdown preview**), please see the [official documentation](https://code.visualstudio.com/docs/languages/markdown) for more information. **Download:** [**Markdown All in One**](https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one) ![toggle bold gif](https://github.com/yzhang-gh/vscode-markdown/raw/master/images/gifs/toggle-bold.gif align="left") ### Markdown Preview Enhanced It shows the enhanced preview of your markdown content. **Download:** [**Markdown Preview Enhanced**](https://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced) ![intro](https://user-images.githubusercontent.com/1908863/28495106-30b3b15e-6f09-11e7-8eb6-ca4ca001ab15.png align="left") ### Paste JSON as Code Copy JSON, paste as Go, TypeScript, C#, C++ and more. **Download -** [**Paste JSON as Code**](https://marketplace.visualstudio.com/items?itemName=quicktype.quicktype) ![Paste JSON as Code](https://raw.githubusercontent.com/quicktype/quicktype-vscode/master/media/demo-interactive.gif align="left") ### Prettier Code formatter using prettier **Download -** [**Prettier**](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) ![Prettier](https://i.imgur.com/wHlMe9e.png align="left") ### Python IntelliSense (Pylance), Linting, Debugging (multi-threaded, remote), Jupyter Notebooks, code formatting, refactoring, unit tests, and more. **Download -** [**Python**](https://marketplace.visualstudio.com/items?itemName=ms-python.python) ![Python](https://i.imgur.com/cQ1ARrG.png align="left") ### Settings Sync Synchronize Settings, Snippets, Themes, File Icons, Launch, Keybindings, Workspaces and Extensions Across Multiple Machines Using GitHub Gist. **Download -** [**Settings Sync**](https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync) ![Settings Sync](https://shanalikhan.github.io/img/login-with-github.png align="left") ### Tailwind CSS IntelliSense Intelligent Tailwind CSS tooling for VS Code **Download -** [**Tailwind CSS IntelliSense**](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) ![Tailwind CSS IntelliSense](https://raw.githubusercontent.com/bradlc/vscode-tailwindcss/master/packages/vscode-tailwindcss/.github/banner.png align="left") ### TODO Highlight Highlight `TODO`, `FIXME` and other annotations within your code. Sometimes you forget to review the TODOs you've added while coding before you publish the code to production. So I've been wanting an extension for a long time that highlights them and reminds me that there are notes or things not done yet. Hope this extension helps you as well. **Download -** [**TODO Highlight**](https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight) ![TODO Highlight](https://github.com/wayou/vscode-todo-highlight/raw/master/assets/material-night.png align="left") ### Turbo Console Log Automating the process of writing meaningful log messages. **Download -** [**Turbo Console Log**](https://marketplace.visualstudio.com/items?itemName=ChakrounAnas.turbo-console-log) ![Turbo Console Log](https://image.ibb.co/dysw7p/insert_log_message.gif align="left") ### Tabnine AI Tabnine is an AI code assistant that makes you a better developer. Tabnine will increase your development velocity with real-time code completions in all the most popular coding languages and IDEs. **Download -** [**Tabnine AI**](https://marketplace.visualstudio.com/items?itemName=TabNine.tabnine-vscode) ![Tabnine AI](https://raw.githubusercontent.com/codota/tabnine-vscode/master/assets/completions-main.gif align="left") ## ⚙️Settings The following `JSON` code shows my vs code setting: ```json // user/settings.json { "files.autoSave": "afterDelay", "editor.mouseWheelZoom": true, "code-runner.clearPreviousOutput": true, "code-runner.ignoreSelection": true, "code-runner.runInTerminal": true, "code-runner.saveAllFilesBeforeRun": true, "code-runner.saveFileBeforeRun": true, "editor.wordWrap": "on", "C_Cpp.updateChannel": "Insiders", "editor.suggestSelection": "first", "python.jediEnabled": false, "editor.fontSize": 17, "emmet.includeLanguages": { "javascript": "javascriptreact" }, "editor.minimap.size": "fit", "editor.fontFamily": "Consolas, DejaVu Sans Mono, monospace", "editor.fontLigatures": false, "[html]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "python.formatting.provider": "yapf", "[css]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "git.autofetch": true, "git.enableSmartCommit": true, "html-css-class-completion.enableEmmetSupport": true, "editor.formatOnPaste": true, "liveServer.settings.donotShowInfoMsg": true, "[python]": { "editor.defaultFormatter": "ms-python.python" }, "diffEditor.ignoreTrimWhitespace": false, "[json]": { "editor.defaultFormatter": "vscode.json-language-features" }, "[c]": { "editor.defaultFormatter": "ms-vscode.cpptools" }, "editor.fontWeight": "300", "editor.fastScrollSensitivity": 6, "explorer.confirmDragAndDrop": false, "vsicons.dontShowNewVersionMessage": true, "workbench.iconTheme": "material-icon-theme", "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.renderWhitespace": "none", "workbench.startupEditor": "newUntitledFile", "liveServer.settings.multiRootWorkspaceName": "", "liveServer.settings.port": 5000, "liveServer.settings.donotVerifyTags": true, "editor.formatOnSave": true, "html.format.indentInnerHtml": true, "editor.formatOnType": true, "printcode.tabSize": 4, "terminal.integrated.confirmOnExit": "hasChildProcesses", "terminal.integrated.cursorBlinking": true, "terminal.integrated.rightClickBehavior": "default", "tailwindCSS.emmetCompletions": true, "sync.gist": "527c3e29660c53c3f17c32260188d66d", "gitlens.hovers.currentLine.over": "line", "terminal.integrated.profiles.windows": { "PowerShell": { "source": "PowerShell", "icon": "terminal-powershell" }, "Command Prompt": { "path": [ "${env:windir}\\Sysnative\\cmd.exe", "${env:windir}\\System32\\cmd.exe" ], "args": [], "icon": "terminal-cmd" }, "Git Bash": { "source": "Git Bash" }, "C:\\WINDOWS\\System32\\WindowsPowerShell\\v1.0\\powershell.exe (migrated)": { "path": "C:\\WINDOWS\\System32\\WindowsPowerShell\\v1.0\\powershell.exe", "args": [] }, "Windows PowerShell": { "path": "C:\\WINDOWS\\System32\\WindowsPowerShell\\v1.0\\powershell.exe" }, "Ubuntu (WSL)": { "path": "C:\\WINDOWS\\System32\\wsl.exe", "args": [ "-d", "Ubuntu" ] } }, "javascript.updateImportsOnFileMove.enabled": "always", "[dotenv]": { "editor.defaultFormatter": "foxundermoon.shell-format" }, "editor.tabSize": 2, "cSpell.customDictionaries": { "custom-dictionary-user": { "name": "custom-dictionary-user", "path": "~/.cspell/custom-dictionary-user.txt", "addWords": true, "scope": "user" } }, "window.restoreFullscreen": true, "tabnine.experimentalAutoImports": true, "files.defaultLanguage": "${activeEditorLanguage}", "bracket-pair-colorizer-2.depreciation-notice": false, "workbench.editor.wrapTabs": true, "[markdown]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[ignore]": { "editor.defaultFormatter": "foxundermoon.shell-format" }, "terminal.integrated.fontFamily": "courier new", "terminal.integrated.defaultProfile.windows": "pwsh.exe -nologo", "terminal.integrated.shellIntegration.enabled": true, "terminal.integrated.shellIntegration.showWelcome": false, "editor.accessibilitySupport": "off", "editor.bracketPairColorization.enabled": true, "todohighlight.isEnable": true, "terminal.integrated.shellIntegration.history": 1000, "turboConsoleLog.insertEnclosingClass": false, "turboConsoleLog.insertEnclosingFunction": false, "files.autoSaveDelay": 500, "liveServer.settings.CustomBrowser": "chrome", "liveServer.settings.host": "localhost", "liveServer.settings.fullReload": true, "workbench.editor.enablePreview": false, "workbench.colorTheme": "Andromeda Bordered" } ``` ## Wrapping up This is all. I hope you find this useful. If you do, then don't forget to give ❤️ and Bookmark 🏷️ for later use and if you have any questions or feedback then don't hesitate to drop them in the comments below. I'll see in the next one. **Connect with me** * [Twitter](https://twitter.com/j471n_) * [GitHub](https://github.com/j471n) * [LinkedIn](https://www.linkedin.com/in/j471n/) * [Instagram](https://instagram.com/j471n_) * [Website](https://j471n.in) * [Newsletter](https://j471n.substack.com/) * [Buy me a coffee](https://www.buymeacoffee.com/j471n)