COOL IT IDEAS AND STUFF
Top VS Code Extensions in 2022
01-Jul-22
คัมภีร์เทพ IT
See the original english version Click here!
Extensions อยู่ใน VS Code Marketplace เพื่อปรับปรุงและเพิ่มประสิทธิภาพการทำงานของคุณ มันเต็มไปด้วย Shortcuts, Popup Texts, Themes, Icons, Live Servers และอื่น ๆ อีกมากมาย ดังนั้นสิ่งเหล่านี้จึงเป็นประโยชน์อย่างมากสำหรับ Developers และบทความนี้ก็เป็น 7 VS Code Extensions มีประโยชน์ สำหรับใช้งานในปี 2022
GitHub Copilot เป็น Artificial Intelligence ที่จะช่วยให้ Code ของคุณมีความถูกต้องและแม่นยำยิ่งขึ้น Copilot สามารถช่วยเขียน Code Scope, Function, Condition ให้กับคุณได้แทบจะทุกอย่างตาม Comment แต่ละบรรทัด
ตัวอย่างของสิ่งที่ GitHub Copilot สามารถ Generate ได้
แม้ว่า GitHub Copilot จะให้บริการฟรีอยู่ในขณะนี้ แต่คุณต้องเข้าร่วม Waitlist ร่วมกับ Developers รายอื่น ๆ อีกนับพันนับหมื่นเพื่อที่จะสามารถเข้าถึงได้ การเข้าถึงนี้จะถูกจำกัดให้เฉพาะ Testers กลุ่มเล็ก ๆ ในระหว่าง Technical Preview ซึ่งคุณอาจจะต้องรอเป็นเดือน ๆ ถึงจะสามารถเข้าได้ ซึ่งแต่บางคนอาจได้เข้าเร็วช้าไม่เท่ากัน
Copilot สามารถถูกใช้เพื่อเขียนแม้กระทั้ง Projects ทั้งหมดแทนคุณ แต่ Software จะถูกสร้างขึ้นเพื่อช่วยให้ Code ของคุณถูกเขียนให้เสร็จ หรือเพื่อให้คุณได้สัมผัสกับ Solutions ใหม่ ๆ ดังนั้น จึงขอแนะนำให้ใช้มันเป็น Tool สำหรับการช่วยเหลือเท่านั้น (Helper Tool)
2. Git Lens
Git Lens เป็น Extension สำหรับ Projects ของคุณที่ใช้ Git เพื่อ Commit/Push Code ของคุณไปยัง 3rd Party Website ซึ่ง Extension นี้จะแสดงให้คุณได้เห็นว่า การ Commit ครั้งล่าสุดเกิดขึ้นเมื่อไร โดยใคร ในทุกบรรทัดของ Code และรวมทั้งข้อมูลอื่น ๆ ที่เกี่ยวกับการ Commit
Git Lens กำลังแสดงข้อมูลเกี่ยวกับการ Commit
ประวัติการ Commit ก็เป็นสิ่งที่ Extension นี้ ก็สามารถทำได้ง่ายเช่นกัน และในขณะที่ Browse อยู่ คุณสามารถเปรียบเทียบการ Commit แต่ละรายการเพื่อดูการเปลี่ยนแปลงระหว่างสิ่งเหล่านั้นได้อย่างชัดเจน
3. Import Cost
Import Cost เป็น Text Extension ที่เรียบง่าย ซึ่งมันมีงานที่ต้องทำเพียงอย่างเดียว โดยมันจะทำให้คุณทราบว่า Module ที่คุณ Import เข้ามา ใช้ Space เท่าใดบ้าง คุณสามารถสร้าง Colour Scheme ของคุณเองด้วย Extension นี้ได้ ตัวอย่างเช่น ขนาดของแต่ละ Modules จะมีขนาด เล็ก กลาง และใหญ่ ก็จะแสดงตามสีนั้น ๆ ไป นอกจากนี้คุณยังสามารถเลือกประเภทของ Bundle Size ที่คุณต้องการจะแสดง ไม่ว่าจะเป็น Minified, Compressed หรือว่าทั้ง 2 อย่าง
Compressed bundle size node.js packages
4. Live Server
Live Server เป็น Extension สำหรับ Front-End Development ซึ่งสามารถสร้าง Live Server ที่จะสามารถ Restart ได้ทุกครั้งที่คุณทำการเปลี่ยนแปลงใน Directory ของ Projects ของคุณและ Refresh Website เพื่อดูการเปลี่ยนแปลงเหล่านั้นได้ทันที
สิ่งที่คุณต้องทำก็คือ คลิกขวาที่ Directory ของคุณบน Root HTML File ของคุณ และเลือก Open with Live Server หรือกดปุ่ม Alt+L Alt+O ใน File นั้น หลังจากนั้น Extension จะเปิด Localhost Server บน Port 5500 โดยมี Content อยู่บน http://127.0.0.1:5500 ทุกอย่างรวมถึง Port ของ Host สามารถเปลี่ยนแปลงได้ในการ Setting Extension
Localhost บน Port 5500
5. Quokka.js
Quokka.js เป็น Tool ที่ช่วยเพิ่มประสิทธิภาพการทำงานสำหรับการสร้าง Prototype, การ Debug และการ Test JavaScript/TypeScript นอกจากนี้ Quokka ยังสามารถแสดงค่าจาก Variable, Console.log หรือจาก Functions ใน IDE ของคุณ ซึ่งสามารถช่วยปรับปรุงและเร่ง Development Process ให้เร็วขึ้นได้อย่างมาก แต่น่าเสียดายที่ Quokka ไม่ได้เปิดให้ใช้งาน Feature นี้ฟรีหลังจากที่คุณใช้งานผ่านไปสักระยะหนึ่งแล้ว และคุณจะต้องจ่ายเงินหากคุณต้องการใช้ Pro Version
ตัวอย่างของ quokka.js
6. REST Client
REST Client เป็น Extension ที่จะช่วยให้คุณส่ง Custom Requests ไปยังปลายทางด้วย Content Types, Authorizations หรือ Data ประเภทอื่น ๆ และรับ Information กลับมาจาก Request มีการพูดกันว่า Extension นี้กำลังจะเข้ามาแทนที่ Website Tools อย่าง Postman อย่างช้า ๆ ในการส่ง Requests คุณต้องสร้าง File ที่ลงท้ายด้วย .rest ใน Directory ของ Projects ของคุณ สำหรับ Syntax ของ Requests เหล่านี้มีดังนี้: {request-type} {destination}
ตัวอย่างเช่น
จากนั้น คุณสามารถเพิ่มประเภทของ Content ด้วยการพิมพ์ Content-Type: application/json หากคุณต้องการส่ง Data ใด ๆ ด้วย Request คุณจะต้องเว้นช่องว่าง 1 บรรทัดระหว่าง Request และ Data รวมทั้งสร้าง JSON Object ที่มี Data และนี่ก็คือตัวอย่างของ Full Request:
ตัวอย่าง REST Request
สิ่งที่คุณต้องทำหลังจากนั้น ก็เพียงแค่กด Send Request แล้ว Request ก็จะถูก Execute ใน Window อื่นภายใน IDE
Live Sass Compiler เป็น Extension ที่ค่อนข้างเรียบง่ายสำหรับภาษา SCSS ที่จะนำ File (ที่ลงท้ายด้วย .scss) ที่ถูกสร้างขึ้น และจะถูกแปลงไปเป็น .css File ปกติ หลังจากที่คุณทำการ Install Package นี้แล้ว ที่ด้านบน Toolbar จะปรากฏปุ่มใหม่ขึ้นมาพร้อมกับข้อความว่า Watch sass และหากคุณคลิกมัน มันก็จะเริ่มทำการแปลง File
Directory ของ Projects ที่มี .scss อยู่ 1 file ที่จะแปลงไปเป็น .css file
ที่มา: https://javascript.plainenglish.io/
รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert
|
|
อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ
|
|
บทความล่าสุด