On this page, you can see the configuration of my VS Code editor and the extensions I use.

Catalin Pit's VS Code editor

My current VS Code theme:

Here is the list of the VS Code Extensions I use:

  • GitHub Copilot - Everyone knows GitHub Copilot, which is an AI coding tool that helps you with coding.
  • Thunder Client - Thunder Client is an extension for Visual Studio Code that enables you to make API calls straight from VS Code.
  • Cody AI - Cody is a free and open-source AI coding assistant similar to GitHub Copilot that helps you with coding. One of the best things about Cody is that it has knowledge of your entire codebase.
  • WakaTime - WakaTime is an open-source extension that automatically tracks the time you spend coding. It shows you how many hours you code daily, weekly, on average. It also shows you the languages you use the most, what files you worked on, and more.
  • Error Lens - Error Lens is an excellent extension that makes warnings and errors stand out more prominently. If there is a warning or error, it highlights the line and displays the warning/error.
  • ES7+ React/Redux/React-Native Snippets - This extension allows you to generate code snippets using shortcuts.
  • ESLint - Integrates ESLint into VS Code.
  • GitLens - GitLens integrates Git into VS Code by providing a visualization of the repository commit history, showing blame annotations and more.
  • Live Server - This lets you launch a local development server with a live reload feature for static and dynamic pages.
  • npm Intellisense - Provides autocomplete capability for npm modules in import statements.
  • Path Intellisense - Autocomplete for file names.
  • Pretty TypeScript Errors - TypeScript errors can get complex, messy and therefore ugly. This extension makes the errors prettier and more human-readable.
  • Prisma - It offers syntax highlighting, linting, autocomplete, formatting and more for Prisma code.
  • Quokka.js - Quokka gives you a JS/TS playground in the editor. It gives you instant feedback by showing the runtime values next to your code.
  • Tailwind CSS Intellisense - Autocomplete, syntax highlighting, and linting for TailwindCSS.
  • Docker - It's an extension for building, managing, and deploying Docker containers from your editor. It also enables you to debug a container.
  • GitHub Actions - It allows you to manage your workflows, see your run history and more.
  • Highlight Matching Tag - This extension highlights the matching tags. For example, it uses the same color to highlight a specific opening and closing tag, so you can find it easier.
  • Inline fold - It folds code such as TailwindCSS classes. You can unfold code by clicking on it.

Here's my settings.json file with the entire configuration:

{
  "editor.inlineSuggest.enabled": true,
  "editor.wordWrap": "on",
  "git.autofetch": true,
  "editor.cursorStyle": "line",
  "editor.cursorBlinking": "smooth",
  "editor.fontLigatures": true,
  "files.trimFinalNewlines": true,
  "files.insertFinalNewline": true,
  "editor.bracketPairColorization.enabled": true,
  "workbench.editor.highlightModifiedTabs": true,
  "emmet.preferences": {
    "output.inlineBreak": 3
  },
  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  },
  "editor.formatOnPaste": true,
  "editor.formatOnSave": true,
  "[prisma]": {
    "editor.defaultFormatter": "Prisma.prisma",
    "editor.formatOnSave": true
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "workbench.colorTheme": "Ayu Mirage Bordered",
  "workbench.iconTheme": "material-icon-theme",
  "editor.letterSpacing": 0.6,
  "editor.lineHeight": 32,
  "workbench.tree.indent": 15,
  "workbench.tree.renderIndentGuides": "always",
  "workbench.colorCustomizations": {
    "tree.indentGuidesStroke": "#b7f978"
  },
  "playwright.reuseBrowser": true,
  "playwright.showTrace": false,
  "editor.guides.bracketPairs": true,
  "editor.inlineSuggest.suppressSuggestions": true,
  "workbench.sideBar.location": "right",
  "editor.stickyScroll.enabled": true,
  "typescript.preferences.includePackageJsonAutoImports": "on",
  "javascript.suggest.paths": false,
  "typescript.suggest.paths": false,
  "editor.accessibilitySupport": "off",
  "debug.javascript.unmapMissingSources": true,
  "files.autoSave": "afterDelay",
  "editor.bracketPairColorization.independentColorPoolPerBracketType": true,
  "explorer.compactFolders": false,
  "gitlens.ai.experimental.provider": "openai",
  "gitlens.ai.experimental.openai.model": "gpt-4-1106-preview",
  "workbench.statusBar.visible": false,
  "editor.fontFamily": "'Monaspace Neon', monospace",
  "editor.fontSize": 14
}

Happy hacking!

Also, feel free to check out my .zshrc configuration and the tools I use.