My VSCode Configs

Updated: at 12:16 PM

My VSCode Configurations

I will leave all the settings I use in my VSCode below:

Summary

User settings

Inside the folder: 📁 .vscode/

📄 vscode file: settings.json

{
  // ========== Visuals ==========
  "editor.cursorSmoothCaretAnimation": "on",
  "editor.fontFamily": "Input Mono, monospace",
  "editor.guides.bracketPairs": "active",
  "editor.lineNumbers": "interval",
  "editor.renderWhitespace": "boundary",
  "window.autoDetectColorScheme": true,
  "workbench.colorTheme": "Vitesse Dark",
  "workbench.editor.tabActionLocation": "right",
  "workbench.fontAliasing": "antialiased",
  "workbench.iconTheme": "catppuccin-mocha",
  "workbench.list.smoothScrolling": true,
  "workbench.preferredDarkColorTheme": "Vitesse Dark",
  "workbench.preferredLightColorTheme": "Vitesse Light",
  "workbench.productIconTheme": "icons-carbon",
  "workbench.sideBar.location": "left",
  "workbench.startupEditor": "newUntitledFile",
  "workbench.tree.expandMode": "singleClick",
  "workbench.tree.indent": 10,
  // ========== END Visuals ==========

  // ========== CODE FORMAT - I Like use ESLINT ==========
  // Disable the default formatter, use eslint instead
  "prettier.enable": false,
  "editor.formatOnSave": false,

  // Auto fix
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.organizeImports": "never"
  },

  "eslint.runtime": "node",

  // Silent the stylistic rules in you IDE, but still auto fix them
  "eslint.rules.customizations": [
    { "rule": "style/*", "severity": "off" },
    { "rule": "*-indent", "severity": "off" },
    { "rule": "*-spacing", "severity": "off" },
    { "rule": "*-spaces", "severity": "off" },
    { "rule": "*-order", "severity": "off" },
    { "rule": "*-dangle", "severity": "off" },
    { "rule": "*-newline", "severity": "off" },
    { "rule": "*quotes", "severity": "off" },
    { "rule": "*semi", "severity": "off" }
  ],

  // Enable eslint for all supported languages
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "vue",
    "html",
    "markdown",
    "json",
    "jsonc",
    "yaml",
    "toml",
    "xml"
  ]

  // ========== END CODE FORMAT ==========
}

Keybindings

📄 vscode file: keybindings.json

[
  {
    "key": "ctrl+shift+s",
    "command": "saveAll"
  },
  {
    "key": "ctrl+k s",
    "command": "-saveAll"
  }
]

Snippets

I like use snippets for help on type code and for more agility in my day, so i have as an examples here:

📄 vscode file: damoclesgil.code-snippets

{
  "Frontmatter": {
    "scope": "markdown",
    "prefix": "frontmatter",
    "body": [
      "---",
      "author: $1",
      "pubDatetime: $CURRENT_YEAR-$CURRENT_MONTH-${CURRENT_DATE}T$CURRENT_HOUR:$CURRENT_MINUTE:$CURRENT_SECOND.000$CURRENT_TIMEZONE_OFFSET",
      "modDatetime: $3",
      "title: $4",
      "featured: ${5|false,true|}",
      "draft: ${6|true,false|}",
      "tags:",
      "  - $7",
      "description: $8",
      "---"
    ],
    "description": "Adds the frontmatter block for the AstroPaper Blog post"
  },
  "Blog Template": {
    "scope": "markdown",
    "prefix": "template",
    "body": [
      "${1:frontmatter}",
      "",
      "${2: Introductory Sentence}",
      "",
      "## Table of contents",
      "",
      "## ${3: heading 1}"
    ],
    "description": "Adds the template for the AstroPaper Blog post. You will need to trigger the snippet modal on the 'frontmatter' line to insert the other snipper."
  },
  "damoclesgilName": {
    "prefix": "dg",
    "body": ["Dâmocles Gil Marçal $1"],
    "description": "My name"
  },
  "ParagraphWithBlockOfCode": {
    "prefix": "###",
    "body": [
      "",
      "### ${1}",
      "",
      "${2}",
      "",
      "```javascript",
      "${3}",
      "```",
      ""
    ],
    "description": "Item Post with block of code",
    "scope": "markdown"
  }
}

Fonts Family

Actually, I’m using ‘Input Mono’, but I’m like too the other fonts.

📄 vscode file: settings.json

  "editor.fontFamily": "Input Mono, monospace",
  // "editor.fontFamily": "FiraMono Nerd Font",
  // "editor.fontFamily": "SpaceMono Nerd Font",
  // "editor.fontFamily": "FiraCode Nerd Font",
  // "editor.fontFamily": "Operator Mono Lig",
  // "editor.fontFamily": "AnonymicePro Nerd Font",
  // "editor.fontFamily": "Operator_Mono",
  // "editor.fontFamily": "Inconsolata Nerd Font Mono",

Extensions

📄 vscode file: extensions.json

{
  "recommendations": [
    // themes & icons and vsCode Visuals
    "antfu.icons-carbon",
    "antfu.theme-vitesse",
    "akamud.vscode-theme-onedark",
    "file-icons.file-icons",
    "antfu.vite",
    "antfu.where-am-i",
    "antfu.open-in-github-button"
    "sainnhe.gruvbox-material",

    // life savers!
    "dbaeumer.vscode-eslint",
    "GitHub.copilot",
    "usernamehw.errorlens",
    "streetsidesoftware.code-spell-checker-portuguese-brazilian",
    "streetsidesoftware.code-spell-checker",

    // if you using a libdrary
    "antfu.iconify", // if you use the libray iconify
    "bradlc.vscode-tailwindcss", // if you using tailwindcss
    "apollographql.vscode-apollo", // if you using apollo
    "vue.vscode-typescript-vue-plugin", // if you using vue
    "astro-build.astro-vscode", // if you using astro
    "dsznajder.es7-react-js-snippets", // if you using react

    // up to you
    "eamodio.gitlens",
    "EditorConfig.EditorConfig",
    "github.vscode-github-actions",
    "GitHub.vscode-pull-request-github",
    "johnsoncodehk.vscode-tsconfig-helper",
    "mpontus.tab-cycle",
    "naumovs.color-highlight",
    "WakaTime.vscode-wakatime",
    "znck.grammarly",
    "catppuccin.catppuccin-vsc-icons"

    // other extensions
    "visualstudioexptteam.vscodeintellicode",
    "visualstudioexptteam.intellicode-api-usage-examples",
    "esbenp.prettier-vscode",
    "vscode-icons-team.vscode-icons",
    "christian-kohler.path-intellisense",
    "davidanson.vscode-markdownlint",
    "ms-vscode.vscode-typescript-next",
    "whizkydee.material-palenight-theme",
    "be5invis.vscode-custom-css",
    "tabnine.tabnine-vscode",
    "xabikos.javascriptsnippets",
    "waderyan.gitblame",
    "sdras.vue-vscode-snippets",
    "formulahendry.auto-rename-tag",
    "alefragnani.bookmarks",
    "jdinhlife.gruvbox",
    "unifiedjs.vscode-mdx",
    "pulkitgangwar.nextjs-snippets",
    "styled-components.vscode-styled-components",
  ]
}

🎨 Links VSCode Extensions: Themes and Icons

⚙️ Links VSCode Extensions

⭐ References that I based on