😎VsCode

All Info about VSCODE

Fonts

Italics

To get the style of the below text, change it in settings.json (settings.json code below)

Sample code for below settings

If you want to change this from italic to normal then change textMateRules font-style to italic.

settings.json

{
  "editor.suggestSelection": "first",
  "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
  "workbench.iconTheme": "Monokai Pro (Filter Spectrum) Icons",
  "files.exclude": {
    "**/.classpath": true,
    "**/.project": true,
    "**/.settings": true,
    "**/.factorypath": true
  },
  "javascript.updateImportsOnFileMove.enabled": "always",
  "explorer.confirmDragAndDrop": false,
  "workbench.startupEditor": "newUntitledFile",
  "prettier.arrowParens": "always",
  "terminal.integrated.fontSize": 15,
  "terminal.integrated.letterSpacing": 1,
  "terminal.integrated.lineHeight": 2,
  "git.autofetch": true,
  "git.suggestSmartCommit": false,
  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  },
  "diffEditor.ignoreTrimWhitespace": false,
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "workbench.colorTheme": "Dark++ Italic",
  "editor.formatOnSave": true,
  "editor.letterSpacing": 0.5,
  "editor.defaultFormatter": "esbenp.prettier-vscode",

  "workbench.colorCustomizations": {
    "activityBar.background": "#0e0b0b",
    "editor.background": "#000",
    "sideBar.background": "#0c0b0b",
    "sideBar.foreground": "#fff"
  },
  "editor.tokenColorCustomizations": {
    // "textMateRules": [
    //   {
    //     "scope": "comment",
    //     "settings": {
    //       "fontStyle": "italic"
    //     }
    //   }
    // ],
    "comments": "#a7a4ac",
    "strings": "#fdce12",
    // "strings": "#f6c70e",
    // "strings": "#7ed07e",
    "keywords": "#f39c12",
    "numbers": "#dda0dd",
    "types": "#f2ca27",
    // "functions": "#08b8cf",
    "functions": "#7ed07e",
    // "functions": "#7ed07e",
    // "variables": "#08b8cf",
    // "variables": "#7ed07e"
    "textMateRules": [
      {
        "scope": [
          "constant",
          "comment",
          "variable",
          "number",
          "type",
          "meta.function",
          "meta.function-call", //function call
          "entity.name.type.class", //class names
          "keyword", //import, export, return…
          "storage.modifier", //static keyword
          "storage.type", //class keyword
          "support.class.builtin",
          "keyword.control",
          "constant.language",
          "entity.other.attribute-name",
          "string.quoted.single",
          "entity.name.method",
          "entity.name.tag"
        ], // array of Scopes to which the style should be applied to
        "settings": {
          "fontStyle": "italic" // the font style that should be applied
        }
      },
      {
        "scope": "punctuation",
        "settings": {
          "foreground": "#ffffff"
        }
      }
    ]
    // --syntax-background-color: #08090a;
    // --syntax-text-color: #f8f8f2;
    // --syntax-comment-color: #808080;
    // --syntax-declaration-color: #f39c12;
    // --syntax-literal-color: #dda0dd;
    // --syntax-error-color: #f9690e;
    // --syntax-name-color: #7ed07e;
    // --syntax-string-color: #f2ca27;
  },

  // I added this section

  "editor.accessibilityPageSize": 9,
  "editor.fontLigatures": true,

  "liveSassCompile.settings.formats": [
    {
      "format": "expanded",
      "extensionName": ".css",
      "savePath": "/dist/css"
    }
  ],
  "leetcode.workspaceFolder": "/Users/sandeepamarnath/Coding/LeetCode/LeetCodeFromVsCode",
  "[json]": {
    "editor.quickSuggestions": {
      "strings": true
    },
    "editor.suggest.insertMode": "replace",
    "gitlens.codeLens.scopes": ["document"]
  },
  "editor.fontSize": 21,
  "editor.lineHeight": 33,
  "editor.fontFamily": "Fira Code iScript,Menlo, Monaco, 'Courier New', monospace"
  // "editor.renderIndentGuides": false
}

To change Everything

Customize VS-Code terminal

ThemesGitHub

themes of terminal

THIS IS THE ONLY VIDEO YOU NEED, I PROMISE!

Make your terminal beautiful and fast with ZSH shell and PowerLevel10KMedium

Run this - sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

vim ~/.zshrc

Run this command above and change it to the theme you want (choose themes from above link)

vim ~/.zshrc

Then do :wq to save and restart the terminal or open new terminal to see the changes and you're good.

Themes

Winter is coming theme customized

{
  "editor.accessibilitySupport": "off",
  "workbench.iconTheme": "file-icons",

  /* MY CUSTOMIZATION */
  "workbench.colorCustomizations": {
    // Default dark theme
    "[Default Dark+]": {
      "editor.background": "#000",
      "editor.lineHighlightBorder": "#0a0a0b"
    },

    // Winter is Coming (Dark Blue)
    "[Winter is Coming (Dark Blue - No Italics)]": {
      "editor.lineHighlightBorder": "#fefefe00",
      "editor.lineHighlightBackground": "#fafafa07"
    }
  },

  "editor.tokenColorCustomizations": {
    // Default dark theme
    "[Default Dark+]": {
      "functions": "#9299eb",
      "comments": "#74736e",
      "variables": "#52615d"
    },

    // Winter is Coming (Dark Blue)
    "[Winter is Coming (Dark Blue - No Italics)]": {
      "textMateRules": [
        {
          "scope": [
            "string.quoted.single",
            "string.quoted.double",
            "string.template.js"
          ],
          "settings": {
            "foreground": "#93faf9"
          }
        },
        {
          "scope": "comment.line.double-slash.js",
          "settings": {
            "foreground": "#a5a0a0"
          }
        },
        {
          "scope": "variable.other.object.js",
          "settings": {
            "foreground": "#65eeec"
          }
        },
        {
          "scope": ["variable.other.readwrite.js"],
          "settings": {
            "foreground": "#d3a7ee"
          }
        },
        {
          // keys inside object
          "scope": ["meta.object-literal.key.js"],
          "settings": {
            "foreground": "#cafbff"
          }
        },
        {
          "scope": "constant.numeric.decimal.js",
          "settings": {
            "foreground": "#fdfffc"
          }
        },
        {
          "scope": [],
          "settings": {
            // "foreground": "#8ad2ff"
          }
        },
        {
          "scope": [
            "variable.other.constant.js",
            "meta.definition.variable.js",
            "meta.var-single-variable.expr.js"
          ],
          "settings": {
            "foreground": "#c3c5ff"
          }
        },
        {
          "scope": ["entity.name.function.js", "meta.function-call.js"],
          "settings": {
            "foreground": "#f4fccd"
          }
        },
        {
          "scope": [
            "punctuation.definition.template-expression.begin.js",
            "meta.template.expression.js"
          ],
          "settings": {
            "foreground": "#ffda5f"
          }
        }
      ]
    }
  },
  /* END OF MY CUSTOMIZATION */
  "workbench.colorTheme": "Winter is Coming (Dark Blue - No Italics)",
  "editor.lineHeight": 1.8,
  "terminal.integrated.fontFamily": "FuraMono Nerd Font",
  "editor.fontSize": 14,
  "editor.cursorBlinking": "expand",
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": "active",
  "gitlens.hovers.currentLine.over": "line",
  "gitlens.heatmap.locations": ["gutter", "overview"],
  "workbench.editorAssociations": {
    "git-rebase-todo": "gitlens.rebase"
  },
  "editor.wordWrap": "on",
  "editor.wordWrapColumn": 80,

  /* Prettier config*/
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "prettier.printWidth": 80,
  "prettier.semi": false,
  "editor.minimap.enabled": false,
  "prettier.singleQuote": true,
  "editor.formatOnSave": true,
  "window.zoomLevel": 1
}