logo
WorkBlogsProjects

Setup

Complete guide to setting up VS Code with my preferred configuration, extensions, and fonts.

Step 1

Download necessary files

Fira-code.zip

Unzip the font's file

Select all the fonts, right click, and click to Install

vsc-extensions.txt

Place this file in downloads

Open the vscode in downloads directory

Install VSC Export & Import extension in vs code.

Step 2

Installing all the extensions

Open Command Palette by pressing the keyboard shortcut

Cmd + ⇧ + P (Mac) / Ctrl + ⇧ + P (Windows)

Enter the text in prompt and press Enter ⏎

VSC Export & Import

All extension will start to install

Step 3

VS Code Settings

Open Command Palette by pressing the keyboard shortcut

Cmd + ⇧ + P (Mac) / Ctrl + ⇧ + P (Windows)

Enter the text in prompt and press Enter ⏎

Preferences: Open Settings (JSON)

Copy the settings.json from the below window

settings.json

settings.json
{
    "CodeGPT.model": "gpt-4",
    "vscode-edge-devtools.webhint": false,
    "editor.linkedEditing": true,
    "editor.minimap.enabled": false,
    "cmake.configureOnOpen": true,
    "code-runner.runInTerminal": true,
    "code-runner.saveFileBeforeRun": true,
    "liveServer.settings.donotShowInfoMsg": true,
    "[html]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[css]": {
      "editor.defaultFormatter": "HookyQR.beautify"
    },
    "explorer.confirmDragAndDrop": false,
    "liveServer.settings.donotVerifyTags": true,
    "github.copilot.advanced": {},
    "editor.cursorSmoothCaretAnimation": "on",
    "editor.cursorBlinking": "smooth",
    "files.autoSave": "afterDelay",
    "[javascript]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "explorer.confirmDelete": false,
    "editor.stickyScroll.enabled": false,
    "git.autofetch": true,
    "git.postCommitCommand": "push",
    "workbench.iconTheme": "material-icon-theme",
    
    // Silence the Noise
    "breadcrumbs.enabled": false,
    "editor.hover.enabled": true,
    "workbench.tips.enabled": false,
    "editor.colorDecorators": false,
    "workbench.startupEditor": "none",
    "editor.lightbulb.enabled": "off",
    "editor.overviewRulerBorder": false,
    "editor.renderLineHighlight": "none",
    "editor.occurrencesHighlight": "off",
    "problems.decorations.enabled": false,
    "editor.renderControlCharacters": false,
    "editor.hideCursorInOverviewRuler": true,
    "editor.gotoLocation.multipleReferences": "goto",
    "editor.gotoLocation.multipleDefinitions": "goto",
    "editor.gotoLocation.multipleDeclarations": "goto",
    "workbench.editor.enablePreviewFromQuickOpen": false,
    "editor.gotoLocation.multipleImplementations": "goto",
    "editor.gotoLocation.multipleTypeDefinitions": "goto",
  
    "vscode_custom_css.imports": [
      "file:///E:/vscode/custom-vscode.css",
      "file:///E:/vscode/custom-vscode-script.js"
    ],
  
    "[typescriptreact]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "editor.fontFamily": ""fira code", Consolas, 'Courier New', monospace",
    "workbench.statusBar.visible": false,
    "[javascriptreact]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "git-auto-pull.watchForChanges": true,
    "git-auto-pull.pullInterval": 2,
    "[json]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "editor.defaultFormatter": "HookyQR.beautify",
    "editor.formatOnSave": true,
    "eslint.run": "onSave",
    "cSpell.userWords": [
      "autofetch",
      "Consolas",
      "donot",
      "esbenp",
      "fileupload",
      "fira",
      "tabnine",
      "webhint"
    ],
    "workbench.settings.applyToAllProfiles": [
      "github.copilot.editor.enableAutoCompletions"
    ],
    "emmet.triggerExpansionOnTab": true,
    "emmet.useInlineCompletions": true,
    "tailwindCSS.emmetCompletions": true,
    "workbench.colorTheme": "Night Owl (No Italics)",
    "editor.wordWrap": "wordWrapColumn",
    "reactSnippets.settings.importReactOnTop": false,
    "[typescript]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    }
  }
Final

Complete Setup

Paste the code in the settings.json file in VS Code

Save the settings.json file

Cmd + S (Mac) / Ctrl + S (Windows)and restart VS Code
Done!🚀

Design & Developed by Firas Latrech
© 2025. All rights reserved.