Laravel Snippets
VS Code snippets for Laravel and Vue development
Features
This extension provides code snippets for:
- PHP: Laravel controllers, models, and database-related code.
- JavaScript: Vue.js components and Vuetify UI components.
Installation
- Open Visual Studio Code.
- Go to the Extensions view (Ctrl+Shift+X).
- Search for "Laravel Snippets".
- Click Install.
Alternatively, you can install it from the VS Code Marketplace.
Usage
หลังจากติดตั้งส่วนขยายแล้ว สนิปเพ็ตจะพร้อมใช้งานในไฟล์ PHP และ JavaScript ของคุณ โดยทั่วไปให้พิมพ์คีย์เวิร์ด (prefix) ของสนิปเพ็ตเพื่อเรียก IntelliSense แล้วเลือกสนิปเพ็ตที่ต้องการเพื่อแทรกโค้ดอัตโนมัติ
ด้านล่างเป็นคำอธิบายวิธีการใช้งานสำหรับแต่ละรูปแบบเป็นภาษาไทย พร้อมเคล็ดลับและตัวอย่างสั้น ๆ
Controller (PHP): ใช้สร้างโครงสร้างคอนโทรลเลอร์ของ Laravel อย่างรวดเร็ว
- ตัวอย่างการใช้งาน: เปิดไฟล์คอนโทรลเลอร์ใน
app/Http/Controllers แล้วพิมพ์ prefix ของคอนโทรลเลอร์ (ตัวอย่าง: lar-controller) เพื่อเรียกสนิปเพ็ตที่สร้างเมธอดพื้นฐานเช่น index, show, store, update, destroy พร้อมการใช้งาน Request และ Response
- เคล็ดลับ: ปรับ namespace และชื่อคลาสตามโปรเจ็กต์หลังแทรกสคริปต์ หากต้องการเพิ่ม middleware หรือ type-hinting ให้แก้โค้ดที่แทรกไว้ทันที
Model (PHP): สร้างโครงร่าง Eloquent Model พร้อมการกำหนด fillable, casts, และความสัมพันธ์พื้นฐาน
- ตัวอย่างการใช้งาน: ในโฟลเดอร์
app/Models สร้างไฟล์ใหม่หรือเปิดไฟล์ที่มีอยู่ แล้วพิมพ์ prefix เช่น lar-model เพื่อแทรกโครงสร้างของโมเดลพร้อมตัวอย่าง protected $fillable และเมธอดความสัมพันธ์เช่น hasMany/belongsTo
- เคล็ดลับ: อัปเดตชื่อตาราง (
protected $table) หรือความสัมพันธ์ให้ตรงกับชื่อโมเดลและ foreign key ในฐานข้อมูลของคุณ
Database (PHP): รวมสนิปเพ็ตสำหรับ migration, seeder และ schema definition
- ตัวอย่างการใช้งาน: ในโฟลเดอร์
database/migrations สร้างไฟล์มิกเกรชันใหม่แล้วพิมพ์ prefix เช่น lar-migration เพื่อแทรกโครงร่าง up/down พร้อมตัวอย่างคอลัมน์เช่น string, integer, timestamps
- เคล็ดลับ: ตรวจสอบให้แน่ใจว่าใช้
php artisan migrate หลังแก้ไขมิกเกรชัน และใช้สนิปเพ็ต lar-seeder เมื่อสร้าง seeder ใน database/seeders
Vue (JavaScript): สนิปเพ็ตสำหรับสร้าง component ของ Vue (Options API / Composition API ขึ้นกับสนิปเพ็ตที่กำหนด)
- ตัวอย่างการใช้งาน: สร้างไฟล์
.vue ใหม่นอก resources/js หรือที่ต้องการ แล้วพิมพ์ prefix เช่น vue-component เพื่อแทรกโครงสร้าง component ที่มี <template>, <script>, และ <style>
- เคล็ดลับ: ตรวจสอบว่าโครงการของคุณใช้ Vue 2 หรือ Vue 3 และเลือกสนิปเพ็ตที่ตรงกับ API ที่ใช้ หากส่วนขยายมีหลายรูปแบบ (Options/Composition) ให้ดูในไฟล์
snippets/vue.json
Vuetify (JavaScript): สนิปเพ็ตสำหรับองค์ประกอบ UI ของ Vuetify เช่น v-btn, v-card, v-data-table
- ตัวอย่างการใช้งาน: ภายใน component ให้พิมพ์ prefix เช่น
vuetify-card หรือ v-btn เพื่อแทรก markup ของ Vuetify พร้อม props ตัวอย่างและ event binding
- เคล็ดลับ: ปรับ props ให้เข้ากับธีมของโปรเจ็กต์และตรวจสอบว่า Vuetify ถูกติดตั้งและตั้งค่าในโปรเจ็กต์ของคุณ
เพิ่มเติม
- ดู prefixes และสนิปเพ็ตทั้งหมด: เปิดโฟลเดอร์
snippets/ ในรีโพเพื่อดูไฟล์ JSON ของสนิปเพ็ต แต่ละไฟล์มีชื่อคีย์ (prefix) และรหัสตัวอย่างที่สอดคล้องกัน
- แก้ไขสนิปเพ็ต: หากต้องการปรับแต่งสนิปเพ็ต ให้แก้ไฟล์ภายในโฟลเดอร์
snippets/ แล้วติดตั้งส่วนขยายใหม่ (ระหว่างพัฒนาใช้ F1 → Developer: Reload Window ใน VS Code)
- คำแนะนำการใช้: เริ่มพิมพ์ prefix ในไฟล์ที่เหมาะสม (PHP สำหรับ Laravel, JavaScript/Vue สำหรับ component) แล้วใช้ IntelliSense เพื่อเลือกสนิปเพ็ต หากต้องการให้สนิปเพ็ตแทรกค่าเริ่มต้นที่ต่างกัน ให้ปรับ placeholder ภายใน JSON ของสนิปเพ็ต
หากต้องการ ผมสามารถเพิ่มตารางสรุป prefix ของสนิปเพ็ตและตัวอย่างการขยาย (expanded example) ให้ใน README โดยอ่านไฟล์ในโฟลเดอร์ snippets/ เพื่อดึง prefix จริง ๆ — แจ้งผมได้ถ้าต้องการให้ผมทำขั้นตอนนั้น
Contributing
Contributions are welcome! If you have suggestions for new snippets or improvements, please:
- Fork the repository.
- Create a new branch for your feature.
- Make your changes.
- Submit a pull request.
License
This project is licensed under the MIT License. See the LICENSE.md file for details.
