Home » Laravel » เซตเครื่อง Visual Studio Code กับ Laravel
Visual Studio Code + laravel

หลังจากไม่ได้เล่น laravel ตั้งแต่ version 4 ก็อยากลองกลับมาเล่นอีกครั้ง โอ้โห version ล่าสุด 5.6 มาไกลมาก พอลองเล่นไปได้ซักพักรู้สึกขัดใจว่าทำไมมันเขียนแล้วไม่ลื่นๆเหมือน golang หรือ javascript ที่มีทั้งตัว format จัด code ตอน save แถม snippet เต็มไปหมดเราจึงไม่รอช้าหา extension ต่างๆมาลงเพื่อให้เขียนได้สะดวกสบายที่สุด แต่!! กว่าจะหาจนถูกใจหมดไปหลายชั่วโมงเอาเวลาไปเขียน code คงเสร็จก่อนฮ่าๆ เอาละเพื่อไม่ให้เพื่อนๆเสียเวลาแบบผมเรามาเริ่มกันเลย

ผมใช้ mac ในการตั้งค่าต่างๆ ถ้าเป็น windows ก็จะตั้งค่าคล้ายๆกันแนะนำให้ลองอ่าน doc ของแต่ละ extension ครับ ถ้าตัวไหนมี config ผมจะลง code config ไว้ให้ถ้าไม่มีก็ไม่ต้อง setting อะไรเพิ่มครับ

vscode extension

PHP IntelliSenseสำหรับการ auto complete code php บางส่วนเพราะต่อให้เป็น laravel เราก็ยังต้องเขียน function php อยู่ดี และ สามารถกด cmd + คลิกก็จะวิ่งไปหา class นั้นได้เลยกดหา function, class ง่ายชีวิตดี๊ดีย์

Laravel 5 Snippets ถ้าใครต้องการ snippet เช่น route, view, middleware ก็สามารถใช้ตัวนี้ได้เลยแต่บาง snippet เราสร้างเอาใน vscode น่าจะสะดวกกว่า (แต่ติดตัวไว้สบายใจ ฮ่าๆ)

Laravel Artisanหมดปัญหาเรื่อง php artisan make:controller เพราะแค่เรา command + shift + p แล้วพิม make ทุกคำสั่งจะมาอยู่ตรงหน้าเราใส่แค่ชื่ออย่างเดียวง่ายไปอีก

Laravel Blade Snippets ตัวนี้จะคล้ายกับ snippets ที่แนะนำก่อนหน้านี้แต่ตัวนี้จะทำให้ syntax highlight ของไฟล์ .blade.php ถูกต้องมองเห็นสีของ blade syntax ต่างๆ

phpfmt — PHP formatter ตัวเด็ดต้องมาช้าหน่อย extension นี้จะเป็นตัว format code ของ php ให้อยู่ใน format สวยงามแถมยังแจ้ง error ด้วยคล้ายๆ jslint แค่ save ตัว code ของคุณจะสวยงาม วิธีตั้งค่าก็เซตตามนี้ครับ

"[php]": {
"editor.formatOnSave": true
},

ถ้าใครใช้ mac แล้ว install ผ่าน brew หรือ php ที่ติดเครื่องมาไม่ต้องเซต path อะไรเพิ่มเติมแต่ถ้าเป็น windows ต้องเซต path ของ php.exe สามารถทำตาม document ได้เลยครับ

HTML CSS Supportแถมอีกตัวสำหรับตัวนี้ถ้าเกิดเรามี ไฟล์ css ในโปรเจคมันจะไปค้นหา class มาให้เราสามารถพิมพ์ชื่อ class ในไฟล์ blade.php แล้วจะมี class sugguest ขึ้นมาให้เลือกเพิ่มความสะดวกสบายไปอีก 10 ระดับ

ปัญหาระดับชาติที่กว่าจะแก้ได้

ผมไม่แน่ใจว่าหลายๆท่านที่ใช้ laravel ใน vscode จะแก้ปัญหานี้ด้วยวิธีไหนแต่ถ้ามีวิธีที่ง่ายกว่า comment บอกได้เลยนะครับเดี๋ยวผมอัพเดทบทความ

ปัญหาก็คือถ้าเราพิม {{}} ใน tag html ตัว tag นั้นจะขยับไปข้างหน้าแล้วเราจะต้องไปที่หน้าสุดแล้วกด tab จัดใหม่ทุกครั้งเจ้าตัวปัญหานี้แหละถึงเกิดบทความนี้ 555 เราสามารถแก้ได้ด้วยการเพิ่ม setting นี้ลงไปครับ

"[blade]": {
"editor.autoIndent": false,
},
"[php]": {
"editor.insertSpaces": false,
"editor.formatOnSave": true,
"editor.tabSize": 4,
"editor.autoIndent": false,
},

ในส่วนของ php ผมปิด insert space บรรทัดสุดท้ายของไฟล์ และ set tabSize เป็น 4 ตามมาตราฐานการเขียน php แบบใหม่สุดท้ายสำคัญมาก

"editor.autoIndent": false

ให้เซตทั้งสองภาษาทั้ง blade และ php ก็จะสามารถเขียน {{}} แบบไม่ขยับ หรือต้องมานั่งจัด code ทุกครั้งที่พิมพ์แล้ว

สำหรับใครที่เซต

"files.associations": {
"*.blade.php": "html",
"*.tpl": "html"
}

แบบนี้อาจจะมีปัญหาตรงที่ blade ไม่โชว์ highlight เช่น @if @section พวกนี้จะทำให้อ่าน code ยากมากถ้าใครอยากเห็น tag highlight ถูกต้องแนะนำให้ลบออกครับ

เกี่ยวกับผู้เขียน

Itthipat Thitsarak

สวัสดีครับผม อิทธิพัทธ์ (เป้) เป็น Freelance Web developer ชอบหาเทคนิคต่างๆที่ทำให้ชีวิต Programmer ง่ายขึ้นโดย Blog นี้จะ สอน Laravel, Vuejs, CSS, HTML 5 และอื่นๆ ที่เกี่ยวกับการทำเว็บไซต์

ขอบคุณทุกคนที่ติดตาม และอ่านบทความของผมครับ หากใครมีคำถามหรืออยากให้ผมเขียนเกี่ยวกับเรื่องอะไรเพิ่มเติม สามารถแสดงความคิดเห็นไว้ที่ใต้บทความ หรือส่งเรื่องเข้ามาที่ Email ได้เลยครับ หัวข้อไหนน่าสนใจ ผมจะหยิบมาเขียนบทความให้ได้อ่านกันเรื่อยๆครับ

Scroll to Top