บทความ IT เจ๋งๆ

มี Developer จำนวนมากเลือกที่จะใช้ Visual Studio Code เป็น IDE เพราะมันจะช่วยให้พวกเขาสามารถติดตั้ง Extensions ได้สะดวกขึ้น อีกทั้งยังไม่มีข้อจำกัดในเรื่องความหลากหลายของ Extensions อีกด้วย Developer ที่เลือกใช้ Tools ที่เหมาะสมจะทำให้การเขียน Code เป็นเรื่องสนุก ดังนั้นเรามาดู 7 VS Code Extensions ที่จะทำให้คุณอยาก Coding มากขึ้น กัน

1. REST Client

REST Client Extension ช่วยให้คุณสามารถส่ง HTTP Requests และดู Response ใน Visual Studio Code ได้โดยตรง ทำให้คุณไม่ต้องใช้ External Applications อื่น ๆ ในการส่ง HTTP Requests ไปยัง Server 

ด้วยจำนวนการติดตั้งมากกว่า 1,000,000 ครั้ง นี่คือ Extension ยอดนิยมที่ Developer หลายคนเลือกใช้ เนื่องจากมันเป็น Extension ที่ยอดเยี่ยมมาก

คุณจะรู้สึกว่าการส่ง Requests ไม่เคยเป็นสิ่งที่ทำได้ง่ายขนาดนี้มาก่อน ส่วน Syntax นั้นก็ Clean มากและมี Options มากมายที่คุณสามารถเลือกใช้ให้เหมาะกับความต้องการของคุณ สิ่งที่จำเป็นสำหรับ GET Request ง่าย ๆ ก็คือ Code เพียงบรรทัดเดียวที่มี GET Keyword ตามด้วย URL

2. CSS Peek

หากคุณเป็น Web Developer อยู่ CSS Peek ถือเป็น Tool ที่คุณควรใช้เป็นอย่างยิ่ง Extension นี้จะช่วยให้คุณสามารถเห็น CSS Rules ที่ใช้กับ Elements ใน HTML ของคุณ เพียงแค่วาง Mouse เหนือชื่อ Class หรือ ID ของ Element

จากด้านล่างนี้ จะแสดงให้คุณได้เห็นว่า Extension นี้ทำหน้าที่อะไร

แต่ Extension นี้สามารถทำได้มากกว่าแค่ให้คุณดูการจัด Style เท่านั้น Extension ยังมี “Go to” Feature ซึ่งจะช่วยให้คุณสามารถข้ามไปยัง CSS Rules ที่ใช้กับ Element ได้ทันที วิธีนี้จะช่วยให้คุณประหยัดเวลามากในการค้นหา Selectors ที่เหมาะสม

3. Beautify

หากคุณชอบ Clean Code มากกว่า คุณจะต้องชอบ Beautify อย่างแน่นอน Extension นี้จะช่วยให้คุณได้ Code ที่มีรูปแบบสวยงามและอ่านได้ง่าย ซึ่ง Beautify รองรับทั้ง JavaScript, HTML, CSS, Sass และ JSON

ส่วนที่ดีที่สุดเกี่ยวกับ Extension นี้ก็คือ Options ทั้งหมดสามารถ Customize ได้อย่างเต็มที่ เช่น ระยะของการเยื้อง และกรณีที่ File ควรจะจบในบรรทัดใหม่ หากคุณเขียน Code ในภาษา Programming มาหลายภาษาแล้ว Beautify ได้รับความคุ้มครอง เพราะมันสามารถที่จะ Customize Options ต่าง ๆ ได้ในแต่ละภาษา Programming 

ด้วยจำนวนการ Download มากกว่า 5,000,000 ครั้ง Extension นี้จึงอยู่ใน 20 อันดับแรกของ Extensions ที่ถูกติดตั้งมากที่สุด

4. Auto Rename Tag

แม้สิ่งที่ Auto Rename Tag Extension ทำนั้นจะเป็นสิ่งที่ทำกันได้ง่าย ๆ แต่ก็ดีมากหากคุณได้ใช้งานมัน เพราะ Extension นี้จะเปลี่ยนชื่อคู่ของ HTML Tags ให้โดยอัตโนมัติ หากคุณกำลังเปลี่ยนชื่อ Opening Tag มันก็จะเปลี่ยน Closing Tag ที่คู่กันให้ด้วย รวมทั้งในทางกลับกัน

แต่หากคุณต้องการเพิ่ม Closing Tag โดยอัตโนมัติ เมื่อพิมพ์ในวงเล็บปิดของ Opening Tag คุณควรดูที่ Auto Close Tag Extension การที่คุณติดตั้ง Extension ทั้ง 2 นี้จะมีประโยชน์ในการทำงานของคุณอย่างมาก และจะช่วยให้คุณเขียน HTML ได้อย่างมีประสิทธิภาพและสอดคล้องกันมากขึ้น

5. Quokka.js

Quokka.js ถือเป็น Playground ใน Editor ของคุณ ช่วยให้คุณสามารถเข้าถึง File ของ Project รวมทั้ง Run Code ของคุณในทันทีที่คุณพิมพ์และแสดงผลของการ Execution เป็นต้น ค่าต่าง ๆ ใน Code ของคุณจะได้รับการ Update ในทันที และจะแสดงผลใน IDE ที่อยู่ถัดจาก Code ของคุณในขณะที่คุณกำลังพิมพ์อยู่

6. Night Owl

หากคุณใช้เวลาทำงานใน VS Code มานาน แน่นอนว่า คุณคงอยากทำให้มันดูดีขึ้นด้วยการติดตั้ง Theme ที่เหมาะสมใช่ไหม 

หนึ่งใน Theme สวย ๆ ที่ Developer หลายคนใช้ ก็คือ Night Owl Theme ตามชื่อของ Theme นี้ มันได้รับการปรับแต่งมาอย่างดีสำหรับพวกเราที่ชอบเขียน Code ตอนช่วงดึก ๆ

7. JavaScript (ES6) Code Snippets

Extension สุดท้ายในบทความที่เรากำลังพูดถึงก็คือ JavaScript (ES6) Code Snippets Extension ซึ่ง Extension นี้มี Snippets มากมายที่คุณสามารถนำไปใช้เพื่อให้มันสร้าง ES6 Code Snippets ให้กับคุณ

ตัวอย่างเช่น การพิมพ์ clg แล้วกด Enter คุณจะสามรถเห็นผลลัพธ์ได้ใน console.log มันอาจใช้เวลาสักพักเพื่อทำความคุ้นเคยกับ Snippets ต่าง ๆ แต่เมื่อคุณเชี่ยวชาญแล้ว คุณก็จะสามารถพิมพ์ ES6 ได้อย่างรวดเร็ว

ที่มา:  https://levelup.gitconnected.com/ 

รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert

อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ

บทความล่าสุด

• 12 เทคนิคการเขียน JavaScript Code ให้สั้นกระชับ
• IT & Digital Events in October 2020
• 10 Shell Commands ที่ Developer ทุกคนต้องรู้จักไว้