TypeScript Extension Pack for Vscode

Essential TypeScript development environment for VSCode - comprehensive tooling for type-safe development

📦 What's Included

This extension pack includes 2 carefully selected extensions to enhance your typescript development experience in vscode.

✅ Core Extensions (2)

These extensions are essential for typescript development:

• TypeScript Language Features - Enhanced TypeScript language support with auto-import and intellisense
• json2ts - Convert JSON object to typescript interfaces

🚀 Installation

Method 1: Install from Marketplace

1. Open Vscode
2. Go to Extensions view (Ctrl+Shift+X / Cmd+Shift+X)
3. Search for "TypeScript Extension Pack for Vscode"
4. Click "Install"

Method 2: Install via Command Line

code --install-extension @templ-project/typescript-extension-pack

Method 3: Install from VSIX

1. Download the latest .vsix file from Releases
2. Open Vscode
3. Run Extensions: Install from VSIX... command
4. Select the downloaded file

⚙️ Configuration

After installation, you may want to configure some settings for optimal typescript development:

typescript.preferences.quoteStyle

{
  "typescript.preferences.quoteStyle": "single"
}

Use single quotes for TypeScript imports and strings

typescript.suggest.autoImports

{
  "typescript.suggest.autoImports": true
}

Enable auto-import suggestions for TypeScript

typescript.updateImportsOnFileMove.enabled

{
  "typescript.updateImportsOnFileMove.enabled": "always"
}

Automatically update imports when files are moved

eslint.validate

{
  "eslint.validate": ["typescript","typescriptreact"]
}

File types to validate with ESLint

eslint.format.enable

{
  "eslint.format.enable": false
}

Disable ESLint as formatter (use Prettier instead)

eslint.codeActionsOnSave.rules

{
  "eslint.codeActionsOnSave.rules": ["*"]
}

ESLint rules to fix on save

[typescript]

{
  "[typescript]": {"editor.defaultFormatter":"esbenp.prettier-vscode","editor.formatOnSave":true,"editor.codeActionsOnSave":{"source.fixAll.eslint":"explicit"},"editor.tabSize":2,"editor.insertSpaces":true}
}

TypeScript-specific editor settings

mcp.servers.enabled

{
  "mcp.servers.enabled": true
}

Enable MCP servers for enhanced language support

mcp.trace.server

{
  "mcp.trace.server": "off"
}

Trace MCP server communication (off, messages, verbose)

⌨️ Recommended Keybindings

• Force format document with Prettier: ctrl+shift+f
• Fix ESLint problems in current file: ctrl+shift+e
• Go to TypeScript definition: f12

📝 Extension Details

🏷️ Categories

typescript types development linting formatting intellisense

📄 License

Extension Pack License

This extension pack is licensed under the MIT License - see LICENSE.md for details.

Third-Party Extension Licenses

Important: Each extension included in this pack has its own license terms. templ-project is not responsible for the licensing, functionality, or security of third-party extensions.

Disclaimer

• We do not guarantee the functionality, security, or compatibility of included extensions
• We are not responsible for any issues caused by third-party extensions
• Users install and use extensions at their own risk
• Please review each extension's license and privacy policy before use

🤝 Contributing

Found an issue or want to suggest an extension? Please open an issue or submit a pull request.

📊 Extension Pack Stats

• Total Extensions: 2
• Required Extensions: 2
• Optional Extensions: 0
• Target IDE: vscode
• Language Focus: typescript

This extension pack is maintained by templ-project and updated regularly to include the most useful typescript development extensions.