JavaScript Extension Pack for Vscode

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

Open Vscode
Go to Extensions view (Ctrl+Shift+X / Cmd+Shift+X)
Search for "JavaScript Extension Pack for Vscode"
Click "Install"

Method 2: Install via Command Line

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

Method 3: Install from VSIX

Download the latest .vsix file from Releases
Open Vscode
Run Extensions: Install from VSIX... command
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

Extension	Publisher	Description
ESLint	Microsoft	Integrates ESLint JavaScript linting into VS Code
Prettier - Code formatter	Prettier	Code formatter using prettier for consistent code style
JavaScript Debugger	Microsoft	Built-in JavaScript debugger for VS Code
Babel JavaScript	Michael McDermott	Syntax highlighting for today's JavaScript
IntelliCode	Microsoft	AI-assisted development for JavaScript
Import Cost	Wix	Display import/require package size in the editor
Quokka.js	Wallaby.js	JavaScript and TypeScript playground in your editor
Bun for Visual Studio Code	Oven	VS Code extension for Bun
Deno	Deno Land Inc.	Deno support for Visual Studio Code

🏷️ Categories

javascript es6 frontend web development linting formatting

📄 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.

Extension	Publisher	License	Description
ESLint	Microsoft	MIT	Integrates ESLint JavaScript linting into VS Code
Prettier - Code formatter	Prettier	MIT	Code formatter using prettier for consistent code style
JavaScript Debugger	Microsoft	MIT	Built-in JavaScript debugger for VS Code
Babel JavaScript	Michael McDermott	MIT	Syntax highlighting for today's JavaScript
IntelliCode	Microsoft	MIT	AI-assisted development for JavaScript
Import Cost	Wix	MIT	Display import/require package size in the editor
Quokka.js	Wallaby.js	Commercial	JavaScript and TypeScript playground in your editor
Bun for Visual Studio Code	Oven	MIT	VS Code extension for Bun
Deno	Deno Land Inc.	MIT	Deno support for Visual Studio Code

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.