One Pack Master

Overview

One Pack Master is a carefully curated VS Code extension pack designed to supercharge your development workflow. This collection includes the most essential extensions that every developer needs, from code formatting and linting to productivity tools and themes.

Perfect for:

• Frontend Developers working with JavaScript, TypeScript, and modern frameworks
• Full-Stack Developers who need comprehensive tooling
• Teams looking to standardize their development environment
• Beginners who want a ready-to-use setup

What's Included

This extension pack automatically installs the following essential extensions:

Styling & Frameworks

• Tailwind CSS IntelliSense - Intelligent autocomplete, syntax highlighting, and linting for Tailwind CSS

Code Quality & Formatting

• ESLint - Find and fix problems in your JavaScript/TypeScript code
• Prettier - Code formatter for consistent code style

Productivity & Editing

• Auto Import - ES6, TS, JSX, TSX - Automatically finds, parses and provides code actions for all available imports
• Auto Rename Tag - Automatically rename paired HTML/XML tags
• Code Spell Checker - Spelling checker for source code

Git & Version Control

• GitLens - Supercharge Git capabilities in VS Code

Development Server

• Live Server - Launch a development local server with live reload feature

UI & Themes

• Material Icon Theme - Material Design icons for VS Code

AI Assistant

• GitHub Copilot - AI pair programmer that helps you write code faster

Installation

Via VS Code Marketplace

1. Open VS Code
2. Go to Extensions (Ctrl+Shift+X or Cmd+Shift+X)
3. Search for "One Pack Master"
4. Click "Install"

Via Command Line

code --install-extension devLocifer.one-pack-master

Quick Start

After installation, all extensions will be automatically installed and ready to use. Here are some quick tips to get started:

1. Open a project - The extensions will automatically detect your project type
2. Configure Prettier - Add a .prettierrc file for consistent formatting
3. Set up ESLint - Add an .eslintrc file for code linting rules
4. Start Live Server - Right-click on an HTML file and select "Open with Live Server"

Recommended Settings

Add these settings to your VS Code settings.json for the best experience:

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "tailwindCSS.includeLanguages": {
    "html": "html",
    "javascript": "javascript",
    "css": "css"
  },
  "material-icon-theme.activeIconPack": "react",
  "liveServer.settings.donotShowInfoMsg": true
}

Perfect For

• React/Next.js projects
• Vue.js applications
• Svelte/SvelteKit projects
• HTML/CSS/JavaScript development
• TypeScript projects
• Tailwind CSS styling
• Node.js backend development

Contributing

Found a bug or have a suggestion? We'd love to hear from you!

• Issues: Report bugs or request features
• Email: diazdjul19@gmail.com

License

This extension pack is released under the MIT License.

Author

Diaz Djuliansyah

• Email: diazdjul19@gmail.com
• Publisher: devLocifer