10 VS Code Extensions I Actually Use

These are the VS Code extensions I keep installed across machines. Short notes on what each one does and why I use it.

1. JSON to TS

Generates TypeScript interfaces from a JSON object. Select the object, run the command, get the interfaces. Saves the tedious work of typing them out by hand.

Example usage:

// From this JSON
{
  "name": "John Doe",
  "age": 30,
  "addresses": [
    {
      "street": "123 Main St",
      "city": "Boston"
    }
  ]
}

// To this TypeScript interface
interface Address {
  street: string;
  city: string;
}

interface User {
  name: string;
  age: number;
  addresses: Address[];
}

2. VSCode Random

Generates random test data inside the editor. Names, emails, phone numbers, addresses, UUIDs. Handy when you need to seed a form or fixture without leaving VS Code.

3. Intellicode

AI code completion from Microsoft. Suggestions come from patterns in open-source repos on GitHub, so the recommendations tend to match common usage for whatever framework you’re in.

• Code completion
• Context-aware suggestions
• Framework-specific recommendations

4. Tabnine

Another AI completion tool. Worth trying alongside Intellicode to see which one suits your workflow.

• Autocompletion
• Test generation
• Code explanations
• Full-line and full-function completion
• Multi-language support

5. Codeium

Similar to Tabnine and free for individual developers.

• Natural language to code
• Refactoring suggestions
• Code explanations
• Context-aware completions

6. Prettier

Formats code on save. The standard for keeping style consistent across a project.

// .prettierrc
{
  "semi": true,
  "trailingComma": "es5",
  "singleQuote": true,
  "printWidth": 80,
  "tabWidth": 2,
  "endOfLine": "auto"
}

7. Markdown Preview Enhanced

Good if you write Markdown often. Live preview, custom CSS, math equations, diagrams, and several export formats.

8. Bookmark

Drop markers in your code so you can jump back later. Useful when navigating a large file or tracking a half-finished task.

• Ctrl + Alt + K: Create/remove bookmark
• Ctrl + Alt + L: Jump to next bookmark
• Ctrl + Alt + J: Jump to previous bookmark

9. Code Spell Checker

Catches spelling mistakes as you type. Splits camelCase so it works on variable names, and you can add project-specific words to a custom dictionary.

{
  "cSpell.words": ["tailwindcss", "nextjs", "spotify"],
  "cSpell.language": "en,pt"
}

10. Snippets

Custom snippets cut down on boilerplate. Here’s a React functional component snippet I use:

{
  "React Functional Component": {
    "prefix": "rfc",
    "body": [
      "interface ${1:${TM_FILENAME_BASE}}Props {",
      "  $2",
      "}",
      "",
      "export function ${1:${TM_FILENAME_BASE}}({ $3 }: ${1:${TM_FILENAME_BASE}}Props) {",
      "  return (",
      "    <div>",
      "      $4",
      "    </div>",
      "  )",
      "}"
    ]
  }
}

Wrap up

That’s what I have installed. If you use something I’m missing, let me know.