VS Code Customization

One of my favorite reason why I love VS Code is the ability to configure virtually every part of it and how it functions with ease. Most of this setting are not directly accessible from its settings page, especially when you’re trying to customize an extension, which is why we would be looking at settings.json. The good thing about editing settings.json is its auto completion feature.

First things first which is quite tricky is that for some weird reasons settings.json is not easily visible, luckily for us
Ghost Together did a good work on how to access settings.json [here](https://ghost-together.medium.com/how-to-find-settings-json-in-vscode-e6f678dbc01d) so we do not have to spend time on it.

One more reason why we need to update our settings.json is to match what we have currently in our codebase. You can read more [here](https://code.visualstudio.com/docs/getstarted/settings#_default-settings) on settings.json. For ease on windows `ctrl + ,` and then on the top right corner of the editor, select the settings.json icon or in VS Code search box enter settings.json and select one having location of the user directory. After that you can paste this settings that I already have or customize it as you see fit. Most of the settings here are self explanatory but for further clarification you can either search the web or just comment.

{
  "npm.exclude": "", // Configure glob patterns for folders that should be excluded from automatic script detection.
  "editor.tabSize": 2, // teab size
  "update.mode": "manual", // Disable automatic background update checks. Updates will be available if you manually check for updates.
  "prettier.printWidth": 200, // Fit code within this line limit.
  "editor.formatOnSave": true, // Format a file on save. A formatter must be available and the editor must not be shutting down (we have prettier already for this).
  "breadcrumbs.enabled": true, // Enable/disable navigation breadcrumbs.
  "git.enableSmartCommit": true, // Commit all changes when there are no staged changes.
  "editor.minimap.maxColumn": 0, // Limit the width of the minimap to render at most a certain number of columns.
  "explorer.confirmDelete": false, // Controls whether the Explorer should ask for confirmation when deleting a file via the trash.
  "editor.minimap.enabled": false, // Controls whether the minimap is shown. personally I do not like this feature, but some developer love to see it
  "editor.renderWhitespace": "none", // Controls how the editor should render whitespace characters.
  "editor.cursorBlinking": "smooth", // Control the cursor animation style.
  "files.autoSave": "onFocusChange", // onfocuschange: An editor with changes is automatically saved when the editor loses focus.
  "prettier.useEditorConfig": false, // Whether or not to take .editorconfig into account when parsing configuration. See the prettier.resolveConfig docs for details.
  "prettier.bracketSameLine": true, // Puts the > of a multi-line HTML (HTML, JSX, Vue, Angular) element at the end of the last line instead of being alone on the next line (does not apply to self closing elements).
  "editor.autoClosingQuotes": "always", // Controls whether the editor should automatically close quotes after the user adds an opening quote.
  "explorer.confirmDragAndDrop": true, // Controls whether the Explorer should ask for confirmation to move files and folders via drag and drop.
  "workbench.iconTheme": "vscode-icons", // Specifies the file icon theme used in the workbench or 'null' to not show any file icons.
  "workbench.colorTheme": "One Dark Pro", // Specifies the color theme used in the workbench when #window.autoDetectColorScheme# is not enabled.
  "editor.parameterHints.enabled": false, // Enables a pop-up that shows parameter documentation and type information as you type.
  "telemetry.telemetryLevel": "off", // no telemetry will be sent regardless of other telemetry settings. If this setting is set to anything except 'off' and telemetry is disabled with deprecated settings, no telemetry will be sent.
  "vsicons.dontShowNewVersionMessage": true, // If set to 'true', the new version message won't be shown anymore.
  "window.newWindowDimensions": "maximized", // Open new windows maximized
  "workbench.startupEditor": "newUntitledFile", // Open a new untitled text file (only applies when opening an empty window).
  "editor.bracketPairColorization.enabled": true, // Controls whether bracket pair colorization is enabled or not. Use #workbench.colorCustomizations# to override the bracket highlight colors.
  "update.enableWindowsBackgroundUpdates": false, // Enable to download and install new VS Code versions in the background on Windows.
  "editor.defaultFormatter": "esbenp.prettier-vscode", // Code formatter using prettier
  "javascript.updateImportsOnFileMove.enabled": "always", // Always update paths automatically.
  "terminal.integrated.defaultProfile.windows": "Git Bash", // The default terminal profile on Windows.
  "terminal.external.windowsExec": "C:\\Program Files\\Git\\git-bash.exe", // Customizes which terminal to run on Windows.
  "editor.quickSuggestions": {
    "other": true, // Enable quick suggestions outside of strings and comments.
    "comments": true, // Enable quick suggestions inside comments.
    "strings": true // Enable quick suggestions inside strings.
  },
  "mdb.confirmRunAll": false, // Show a confirmation message before running commands in a playground.
  "typescript.updateImportsOnFileMove.enabled": "always", // Always update paths automatically.
  "terminal.integrated.defaultProfile.linux": "bash", // The default terminal profile on Linux.
  "html.format.wrapLineLength": 0, // Maximum amount of characters per line (0 = disable).
  "search.exclude": {
    "**/.next": true,
    "**/package-lock.json": true
    // for excluding files and folders in fulltext searches and file search in quick open
  },
  "files.exclude": {
    "**/.next": true, //
    "**/node_modules": true //
    // For example, the File Explorer decides which files and folders to show or hide based on this setting
  },
  "settingsSync.ignoredExtensions": [], // List of extensions to be ignored while synchronizing
  "editor.guides.bracketPairs": true, // Controls whether bracket pair guides are enabled or not.

  "[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
  "[typescriptreact]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
  "workbench.editor.empty.hint": "hidden", // Controls if the empty editor text hint should be visible in the editor.
  "terminal.integrated.tabs.enabled": false, // Controls whether terminal tabs display as a list to the side of the terminal. When this is disabled a dropdown will display instead.
  "[rust]": {
    "editor.defaultFormatter": "rust-lang.rust-analyzer" // Rust language support for Visual Studio Code
  },
  "workbench.tree.enableStickyScroll": false, // Controls whether sticky scrolling is enabled in trees.
  "playwright.reuseBrowser": true, // Show & reuse browser between tests.
  "editor.largeFileOptimizations": false, // Special handling for large files to disable certain memory intensive features.
  "cSpell.customDictionaries": {
    // Define custom dictionaries to be included by default. If addWords is true words will be added to this dictionary.
    "custom-dictionary-user": {
      "name": "custom-dictionary-user",
      "path": "~/.cspell/custom-dictionary-user.txt",
      "addWords": true,
      "scope": "user"
    }
  },

  "explorer.compactFolders": false, // Controls whether the Explorer should render folders in a compact form. In such a form, single child folders will be compressed in a combined tree element. Useful for Java package structures, for example.
  "debug.javascript.autoAttachFilter": "disabled", // Auto attach is disabled and not shown in status bar.
  "[xml]": {
    "editor.defaultFormatter": "redhat.vscode-xml" // XML Language Support by Red Hat
  },
  "cSpell.ignoreWords": ["TROPS", "VERCEL", "signout", "waverd"], // A list of words to be ignored by the spell checker.
  // "importCost.bundleSizeColoring": "minified"
  // "importCost.bundleSizeDecoration": "minified"
  // "importCost.smallPackageDarkColor": "#e2ad26"
  "files.associations": {
    "*.css": "tailwindcss"
  },
  "typescript.preferences.autoImportFileExcludePatterns": ["@radix-ui/*", "lucide-react"] // Specify glob patterns of files to exclude from auto imports. Relative paths are resolved relative to the workspace root. Patterns are evaluated using tsconfig.json exclude semantics.
}

Happy Hacking…