Himainhouse - Web Development Helper Extension

Extension VSCode untuk mempermudah development web dengan fitur-fitur untuk HTML, CSS, JavaScript, SQL, PHP, dan Laravel.

✨ Extension Pack Included

Saat install Himainhouse, extension-extension berguna ini akan otomatis terinstall:

✅ Auto Close Tag - Otomatis close HTML/XML tag
✅ Auto Rename Tag - Rename tag HTML secara otomatis
✅ Live Server - Launch development local server dengan live reload
✅ PHP Intelephense - PHP code intelligence
✅ ESLint - JavaScript linter
✅ Error Lens - Highlight error inline
✅ HTML CSS Class Completion - CSS class autocomplete untuk HTML

🚀 Fitur

Commands

Extension ini menyediakan beberapa command yang bisa diakses melalui Command Palette (Ctrl+Shift+P atau Cmd+Shift+P):

Himainhouse: Format HTML - Format dokumen HTML (Shortcut: Ctrl+Shift+H atau Cmd+Shift+H)
Himainhouse: Format CSS - Format dokumen CSS
Himainhouse: Format SQL Query - Format SQL query dengan indentasi yang rapi
Himainhouse: Wrap with Div - Bungkus kode terpilih dengan tag <div> (Shortcut: Ctrl+Shift+W atau Cmd+Shift+W)
Himainhouse: Create HTML5 Boilerplate - Buat template HTML5 lengkap
Himainhouse: Insert Laravel Blade Directive - Pilih dan insert Laravel Blade directive
Himainhouse: Insert PHP Tag - Insert PHP tag dengan berbagai format

Snippets

Extension ini menyediakan ratusan snippets untuk mempercepat coding:

HTML Snippets

html5 - HTML5 boilerplate lengkap
divc - Div dengan class
img - Image tag
form - Form element
table - Table structure
nav - Navigation menu
card - Card component
Dan masih banyak lagi...

CSS Snippets

flex - Flexbox container
grid - Grid container
media - Media query
shadow - Box shadow
trans - Transition
anim - CSS animation
center - Center element absolutely
btnstyle - Button styling

JavaScript Snippets

cl - Console.log
fn - Function declaration
af - Arrow function
asyncfn - Async function dengan try-catch
fetch - Fetch API request
afetch - Async fetch
listen - Event listener
qs - Query selector
foreach - ForEach loop
map - Array map
filter - Array filter

PHP Snippets

php - PHP tags
echo - PHP echo
func - PHP function
class - PHP class
foreach - PHP foreach loop
try - Try-catch block
mysqli - MySQLi connection
pdo - PDO connection
session - Start session
dump - var_dump

Laravel Blade Snippets

extends - @extends
section - @section
yield - @yield
include - @include
if - @if statement
foreach - @foreach loop
csrf - @csrf token
method - @method
auth - @auth directive
guest - @guest directive
route - Route helper
asset - Asset helper

SQL Snippets

select - SELECT statement
insert - INSERT statement
update - UPDATE statement
delete - DELETE statement
createtable - CREATE TABLE
join - INNER JOIN
leftjoin - LEFT JOIN
groupby - GROUP BY
orderby - ORDER BY

📦 Instalasi

Dari VSIX (Recommended)

Download file .vsix
Buka VSCode
Tekan Ctrl+Shift+P dan ketik "Install from VSIX"
Pilih file .vsix yang sudah didownload

Development

Clone repository ini
Buka folder extension di VSCode
Jalankan npm install
Tekan F5 untuk menjalankan extension dalam Development Host

🎯 Cara Menggunakan

Menggunakan Command

Tekan Ctrl+Shift+P (Windows/Linux) atau Cmd+Shift+P (Mac)
Ketik "Himainhouse"
Pilih command yang ingin digunakan

Menggunakan Snippets

Mulai ketik prefix snippet (misalnya html5)
Tekan Tab atau pilih dari autocomplete
Isi placeholder dengan nilai yang diinginkan
Tekan Tab untuk berpindah ke placeholder berikutnya

Beberapa command juga tersedia di context menu (klik kanan):

Format HTML (untuk file HTML)
Format CSS (untuk file CSS)
Format SQL (untuk file SQL)
Wrap with Div (untuk HTML dengan selection)

⌨️ Keyboard Shortcuts

Ctrl+Shift+H (atau Cmd+Shift+H di Mac) - Format HTML
Ctrl+Shift+W (atau Cmd+Shift+W di Mac) - Wrap with Div

🛠️ Development

Prerequisites

Node.js (v16 atau lebih baru)
npm
Visual Studio Code

Setup

# Install dependencies
npm install

# Compile extension
npm run compile

# Watch mode (auto-compile saat ada perubahan)
npm run watch

# Run tests
npm test

Testing Extension

Tekan F5 di VSCode untuk membuka Extension Development Host
Test fitur-fitur extension
Check console untuk debug messages

📝 Struktur Project

Himainhouse/
├── src/
│   ├── extension.ts      # Main extension code
│   └── test/             # Test files
├── snippets/             # Snippet definitions
│   ├── html.json
│   ├── css.json
│   ├── javascript.json
│   ├── php.json
│   ├── laravel-blade.json
│   └── sql.json
├── package.json          # Extension manifest
├── tsconfig.json         # TypeScript config
└── README.md            # Documentation

Requirements

VSCode versi 1.109.0 atau lebih baru
Node.js untuk development

Release Notes

0.0.1

Initial release dengan fitur:

Commands untuk format HTML, CSS, SQL
Wrap with Div command
HTML5 boilerplate generator
Laravel Blade directive inserter
PHP tag inserter
Snippets lengkap untuk HTML, CSS, JS, PHP, Laravel Blade, dan SQL
Keyboard shortcuts
Context menu integration
Extension pack dengan 7 extension berguna

📦 Cara Install

Install dari VSCode Marketplace (Recommended)

Buka VSCode
Tekan Ctrl+Shift+X untuk buka Extensions
Search "Himainhouse"
Klik Install

Install dari VSIX File

Download file himainhouse-0.0.1.vsix
Buka VSCode
Tekan Ctrl+Shift+P dan ketik "Install from VSIX"
Pilih file .vsix yang sudah didownload

Install via Command Line

code --install-extension himainhouse-0.0.1.vsix

📤 Cara Publish Extension

Lihat dokumentasi lengkap di PUBLISHING.md untuk:

Setup Personal Access Token
Create Publisher Account
Package dan Publish ke Marketplace
Update Extension
Dan tips lainnya

💡 Tips

Gunakan snippets untuk mempercepat coding
Shortcut keyboard sangat membantu untuk command yang sering digunakan
Format code secara teratur untuk menjaga kualitas kode
Untuk Laravel development, gunakan blade snippets untuk mempercepat pembuatan views
Live Server (dari extension pack) otomatis terinstall untuk preview HTML real-time

Selamat Coding! 🚀

Himainhouse Extension Pack

Baden Nugraha