Templ Project Javascript Extension Pack

Essential JavaScript development environment for VSCode - runtime-agnostic tools for modern JavaScript development

📦 What's Included

This extension pack includes 9 carefully selected extensions to enhance your javascript development experience in vscode.

✅ Core Extensions (4)

These extensions are essential for javascript development:

• ESLint - Integrates ESLint JavaScript linting into VS Code
• Prettier - Code formatter - Code formatter using prettier for consistent code style
• JavaScript Debugger - Built-in JavaScript debugger for VS Code
• Babel JavaScript - Syntax highlighting for today's JavaScript

💡 Additional Extensions (5)

These extensions provide extra functionality and convenience:

• IntelliCode - AI-assisted development for JavaScript
• Import Cost - Display import/require package size in the editor
• Quokka.js - JavaScript and TypeScript playground in your editor
• Bun for Visual Studio Code - VS Code extension for Bun
• Deno - Deno support for Visual Studio Code

🚀 Installation

Method 1: Install from Marketplace

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

Method 2: Install via Command Line

code --install-extension @templ-project/javascript-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 javascript development:

javascript.preferences.quoteStyle

"javascript.preferences.quoteStyle": "single"

Use single quotes for JavaScript imports and strings

javascript.suggest.autoImports

"javascript.suggest.autoImports": true

Enable auto-import suggestions for JavaScript

javascript.updateImportsOnFileMove.enabled

"javascript.updateImportsOnFileMove.enabled": "always"

Automatically update imports when files are moved

eslint.validate

"eslint.validate": [
  "javascript",
  "javascriptreact"
]

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

[javascript]

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

JavaScript-specific editor settings

⌨️ Recommended Keybindings

• Force format document with Prettier: ctrl+shift+f
• Fix ESLint problems in current file: ctrl+shift+e

📝 Extension Details

🏷️ Categories

📄 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: 9
• Required Extensions: 4
• Optional Extensions: 5
• Target IDE: vscode
• Language Focus: javascript

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