My Custom Extension Pack
A personal collection of useful VS Code extensions curated for enhanced productivity and development experience.
Description
This extension pack includes 111 carefully selected extensions covering:
- PHP Development: Laravel tools, PHP IntelliSense, debugging, and code formatting
- JavaScript/React: Snippets, IntelliSense, JSX support, and React development tools
- Python: Debugging, linting, environment management, and IntelliSense
- HTML/CSS: Class completion, tag suggestions, live preview, and formatting
- Git & Version Control: Enhanced GitLens, history visualization, and collaboration tools
- Productivity: Code formatting, snippets, themes, and general workflow improvements
- Web Development: Live server, API testing, and browser preview tools
Included Extensions
File & Project Management
0xtanzim.filetree-pro - Enhanced file tree view
alefragnani.project-manager - Project management
alefragnani.bookmarks - Code bookmarks
angelluisalmaraz.project-colorize - Project color coding
aaron-bond.better-comments - Enhanced comments
esbenp.prettier-vscode - Code formatting
formulahendry.auto-close-tag - Auto close tags
formulahendry.auto-rename-tag - Auto rename tags
oderwat.indent-rainbow - Indentation visualization
bracketpaircolordlw.bracket-pair-color-dlw - Bracket pair coloring
streetsidesoftware.code-spell-checker - Spell checking
usernamehw.errorlens - Inline error highlighting
PHP Development
bmewburn.vscode-intelephense-client - PHP IntelliSense
devsense.intelli-php-vscode - PHP intelligence
devsense.phptools-vscode - PHP tools
devsense.profiler-php-vscode - PHP profiling
junstyle.php-cs-fixer - PHP code formatting
mehedidracula.php-namespace-resolver - Namespace resolution
mohamedbenhida.laravel-intellisense - Laravel IntelliSense
onecentlin.laravel-blade - Blade support
onecentlin.laravel5-snippets - Laravel snippets
ryannaddy.laravel-artisan - Laravel artisan commands
shufo.vscode-blade-formatter - Blade formatting
tal7aouy.php - PHP support
vsc-snippets.vsc-php-snippets - PHP snippets
xdebug.php-debug - PHP debugging
xdebug.php-pack - XDebug tools
zobo.php-intellisense - PHP IntelliSense
austenc.laravel-docs - Laravel documentation
cjhowe7.laravel-blade - Laravel Blade
JavaScript/React Development
dsznajder.es7-react-js-snippets - React/Redux snippets
rodrigovallades.es7-react-js-snippets - ES7+ React snippets
mgmcdermott.vscode-language-babel - Babel JavaScript support
ofhumanbondage.react-proptypes-intellisense - React PropTypes
planbcoding.vscode-react-refactor - React refactoring
skyran.js-jsx-snippets - JavaScript/JSX snippets
steoates.autoimport - Auto import
xabikos.javascriptsnippets - JavaScript snippets
xabikos.reactsnippets - React snippets
alduncanson.react-hooks-snippets - React Hooks snippets
angelorafael.jsx-html-tags - JSX HTML tags
influrium.haxe-jsx - Haxe JSX support
wix.vscode-import-cost - Import cost visualization
Python Development
ms-python.python - Python support
ms-python.vscode-pylance - Python IntelliSense
ms-python.debugpy - Python debugging
ms-python.vscode-python-envs - Python environments
donjayamanne.python-environment-manager - Python environment management
donjayamanne.python-extension-pack - Python extension pack
kevinrose.vsc-python-indent - Python indentation
nikolapaunovic.tkinter-snippets - Tkinter snippets
njpwerner.autodocstring - Auto docstring generation
batisteo.vscode-django - Django support
HTML/CSS & Web Development
bradlc.vscode-tailwindcss - Tailwind CSS IntelliSense
ecmel.vscode-html-css - HTML CSS support
pranaygp.vscode-css-peek - CSS peek definition
zignd.html-css-class-completion - CSS class completion
anderseandersen.html-class-suggestions - HTML class suggestions
anteprimorac.html-end-tag-labels - HTML end tag labels
bradgashler.htmltagwrap - HTML tag wrapping
anbuselvanrocky.bootstrap5-vscode - Bootstrap 5 support
heybourn.headwind - Tailwind CSS class sorting
ritwickdey.liveserver - Live server
techer.open-in-browser - Open in browser
cirlorm.mobileview - Mobile preview
dheovani.svg-viewer - SVG viewer
purocean.drawio-preview - Draw.io diagrams
pomdtr.excalidraw-editor - Excalidraw editor
Git & Version Control
eamodio.gitlens - Enhanced Git capabilities
donjayamanne.githistory - Git history
mhutchie.git-graph - Git graph visualization
codezombiech.gitignore - Gitignore support
ms-vsliveshare.vsliveshare - Live collaboration
vsls-contrib.codetour - Code tours
Productivity & Utilities
github.copilot - AI pair programmer
github.copilot-chat - AI chat assistant
christian-kohler.npm-intellisense - npm IntelliSense
christian-kohler.path-intellisense - Path IntelliSense
formulahendry.code-runner - Code runner
adpyke.codesnap - Code screenshots
adam-bender.commit-message-editor - Commit message editor
cmstead.js-codeformer - JavaScript code transformation
cmstead.jsrefactor - JavaScript refactoring
dbaeumer.vscode-eslint - ESLint integration
rvest.vs-code-prettier-eslint - Prettier ESLint
editorconfig.editorconfig - EditorConfig support
eriklynd.json-tools - JSON tools
aykutsarac.jsoncrack-vscode - JSON visualization
britesnow.vscode-toggle-quotes - Toggle quotes
jasonlhy.hungry-delete - Enhanced delete
kisstkondoros.vscode-gutter-preview - Gutter preview
loczek.next-js-ts-snippets - Next.js snippets
manishsencha.readme-preview - README preview
naumovs.color-highlight - Color highlighter
nucllear.vscode-extension-auto-import - Auto import
rangav.vscode-thunder-client - API client
shd101wyy.markdown-preview-enhanced - Enhanced Markdown preview
shellomo.frontend-power-pack - Frontend power pack
shellomo.js-snippets-pro - JavaScript snippets
vitest.explorer - Vitest testing
wallabyjs.quokka-vscode - Live JavaScript/TypeScript scratchpad
wware.snippet-creator - Snippet creator
ms-vscode.js-debug-nightly - JavaScript debugging
digitalbrainstem.javascript-ejs-support - EJS support
wholroyd.jinja - Jinja template support
idleberg.icon-fonts - Icon fonts
helixquar.randomeverything - Random utilities
ttoowa.in-your-face-incredible - Fun enhancements
tonybaloney.vscode-pets - Virtual pets
Themes & Icons
pkief.material-icon-theme - Material icon theme
whizkydee.material-palenight-theme - Material Palenight theme
Installation
From VS Code Marketplace
- Open VS Code
- Go to Extensions (Ctrl+Shift+X)
- Search for "My Custom Extension Pack"
- Click Install
Via VSIX File
- Download the
.vsix file from the Releases page
- Open VS Code
- Run the command:
Extensions: Install from VSIX...
- Select the downloaded
.vsix file
Via Command Line
code --install-extension your-name.my-custom-extension-pack
Development & Publishing
Prerequisites
- Node.js installed on your system
- Visual Studio Code
Installation of vsce
npm install -g @vscode/vsce
Packaging the Extension
- Navigate to the extension directory:
cd "path/to/your-extension"
- Package the extension:
vsce package
This will create a .vsix file in your directory.
Publishing to VS Code Marketplace
- Login to your Visual Studio Marketplace account:
vsce login your-publisher-name
- Publish the extension:
vsce publish
Updating the Extension
- Update the version in
package.json
- Run
vsce package to create a new VSIX file
- Run
vsce publish to publish the update
Configuration
Most extensions in this pack work out-of-the-box, but some may require additional configuration:
- GitHub Copilot: Requires GitHub Copilot subscription
- PHP Debugging: Requires XDebug to be installed and configured
- Live Server: Port can be configured in settings
- Tailwind CSS: Requires Tailwind CSS project setup
Contributing
This is a personal extension pack. Feel free to fork and create your own version by modifying the extensionPack array in package.json.
License
This extension pack is distributed under the MIT License. Individual extensions may have their own licenses.
Support
For issues with specific extensions, please refer to their respective repositories. For issues with this extension pack itself, please file an issue in the repository.