บทความ IT เจ๋งๆ
9 VS Code Extensions ที่ควรระวัง(สักนิด) หากคิดจะใช้งาน
25-พ.ค.-22
คัมภีร์เทพ IT
หากคุณกำลังใช้ VS Code เชื่อว่าคุณน่าจะใช้หนึ่งใน Extensions ในบทความนี้ แต่คุณรู้หรือไม่ว่าพวกมันไม่ได้มีแค่เพียงประโยชน์ แต่มันมีส่วนทำให้ IDE ของคุณช้าลงหรือเปลือง Memory ซึ่งมันทำให้ชีวิตของคุณซับซ้อนกว่าเดิม และในบทความนี้ก็คือ 9 VS Code Extensions ที่ควรระวัง(สักนิด) หากคิดจะใช้งาน
ก่อนอื่นเรามาดูเหตุผลกันว่า ทำไม VS Code Extensions บางตัวถึงต้องระวัง หากคุณคิดจะใช้งานพวกมัน
- พวกมันเพิ่มการทำงานของ CPU
- พวกมันทำให้คุณทำงานช้าลง: มี Extensions จำนวนมากที่ถูก Load เมื่อ VS Code เริ่มทำงาน ซึ่งสาเหตุนี้อาจทำให้ Start-up Time ของคุณช้าลง หากคุณติดตั้ง Extensions ไว้มากเกินไป
- พวกมันทำงานซ้ำซ้อนกับ Built-in Functionality ของ VS Code: มี Extensions บางตัว ที่ทำในสิ่งที่ VS Code สามารถทำได้ในตัวมันเองอยู่แล้ว ซึ่งคุณไม่จำเป็นต้องติดตั้ง Extensions เหล่านั้นเพิ่มเลย
เรามาดูกันว่า มี Extensions ใดบ้าง ที่คุณควรระวัง หากคิดจะใช้งานมัน
1. Auto Close Tag
Installed: 7,152,000+ ครั้ง
Link: VS Code Marketplace
ในฐานะของ Developer ก่อนหน้านี้คุณคงจินตนาการไม่ออกว่าจะทำงานโดยไม่มี Feature นี้ได้อย่างไร และสาเหตุที่หลาย ๆ คนใช้ Extension นี้มาเป็นเวลานาน ก็เพราะ VS Code ไม่รองรับ Function นี้ในสมัยก่อน
แต่ตอนนี้ VS Code สามารถทำสิ่งนี้ได้แล้ว และมันเป็นค่า Default ที่ถูกเปิดใช้งานอยู่แล้ว อย่างไรก็ตาม คุณสามารถทำให้มันใช้งานได้ด้วยการ Set ค่า settings.json File ได้ดังนี้
2. Auto Rename Tag
Installed: 9,141,000+ ครั้ง
Link: VS Code Marketplace
สำหรับ Extension นี้ ก็ค่อนข้างมีเรื่องราวที่คล้ายกับ Extension ที่แล้ว คือเมื่อก่อน VS Code ยังไม่รองรับ แต่ตอนนี้มันรองรับแล้ว อย่างไรก็ตาม มันสามารถใช้งานได้เฉพาะกับ HTML Files ณ ตอนนี้ (นอกจากนี้ยังมี Open Issue เพื่อเพิ่มการรองรับไฟล์ JSX Files)
ในการใช้งาน Feature นี้ คุณต้องใช้การ Set ค่า ดังต่อไปนี้
3. Bracket Pair Colorizer
Installed: 4,795,000+ ครั้ง
Link: VS Code Marketplace
ดังที่เราได้เห็นจากจำนวนการติดตั้ง Extension นี้ได้รับความนิยมมากพอสมควร และก็ไม่น่าแปลกใจเลยที่มันจะได้รับความนิยม
Bracket Pair ช่วยให้จับคู่วงเล็บที่คู่กันด้วยสีที่เหมือนกัน สิ่งนี้มีประโยชน์มากในหลาย ๆ สถานการณ์
แต่ตอนนี้ Function นี้ได้รับการรองรับโดย VS Code แล้ว และในการใช้งาน คุณอาจต้องแก้ไข settings.json ดังต่อไปนี้
4. Settings Sync
Installed: 3,209,000+ ครั้ง
Link: VS Code Marketplace
หากคุณกำลังใช้ Editor บนหลาย ๆ Devices หรือหากคุณต้องการ Save การตั้งค่าต่าง ๆ ของคุณ แต่คุณอยากเปลี่ยนไปใช้ Devices อื่น ๆ ของคุณ Setting Synchronization สามารถช่วยได้มากในทั้ง 2 กรณี
แน่นอนว่ามี Extension สำหรับจัดการการตั้งค่าการ Sync แต่ VS Code ก็มีการรองรับการตั้งค่าการ Sync ใน Devices ต่าง ๆ การตั้งค่าจะ Link เข้ากับ GitHub หรือ Microsoft Account และคุณสามารถ Config. ค่า Types ที่ควรจะถูก Sync
Captured by author
5. Path Intellisense
Installed: 7,103,000+ ครั้ง
Link: VS Code Marketplace
Extension นี้จะช่วยค้นหา, Parses และจัดเตรียม Code Actions และ Code Completion สำหรับการ Imports ที่มีอยู่ทั้งหมด มันสามารถช่วย Auto-Completes File Names ให้เมื่อเราเขียน Import Statements และในฐานะ Developer เชื่อว่าคงมีหลายคนที่ชอบมัน
แต่เมื่อคุณอ่านคำแนะนำในการติดตั้ง Extension นี้แล้ว จะมีข้อความระบุไว้ว่า ให้ปิดการใช้งาน Auto-Complete ของ VS Code นั่นคงทำให้บางคนสงสัยว่า ทำไมเราถึงใช้ Built-in Auto-Completion ไม่ได้
เราสามารถทำได้ โดยใช้การ Set ค่า ดังต่อไปนี้
6. NPM
Installed: 5,193,000+ ครั้ง
Link: VS Code Marketplace
Extension นี้มีวิธีการ Run NPM Scripts ที่ถูกกำหนดไว้ใน package.json โดย Scripts จะสามารถ Run ได้โดยตรงจาก Editor ของคุณ ซึ่งเชื่อว่าคุณมักจะ Run Scripts ได้โดยตรงจาก Console ซึ่งแน่นอนว่า Extension นี้มีประโยชน์มาก
แต่อย่างไรก็ตาม คุณสามารถทำสิ่งเดียวกันได้ใน VS Code ได้โดยการเปิด NPM Scripts Panel
Captured by author
7. Auto Import
Installed: 2,223,000+ ครั้ง
Link: VS Code Marketplace
Extension นี้จะช่วยค้นหา, Parses และจัดเตรียม Code Actions และ Code Completion สำหรับการ Imports ที่มีอยู่ทั้งหมด มันใช้งานได้กับทั้ง JavaScript และ TypeScript
แต่อันที่จริง คุณคงยังไม่รู้ว่า Extension นี้ มันไม่จำเป็นเลย เพราะเราสามารถทำสิ่งเดียวกันได้โดยใช้ การตั้งค่า VS Code ดังต่อไปนี้
8. HTML Snippets
Installed: 7,875,000+ ครั้ง
Link: VS Code Marketplace
Extension นี้ช่วยให้คุณ Generate HTML Snippets ต่าง ๆ ได้ และตามจริงแล้ว เราคงไม่ต้องพูดอะไรมากเกี่ยวกับเรื่องนี้ เรามาฟังสิ่งที่คนที่สร้างมัน พูดถึงเรื่องนี้กันดีกว่า
"ให้ปิดการใช้งาน Extension นี้ เนื่องจากตอนนี้มันจะไปขัดแย้งกับ VS Code HTML Extension ที่มีอยู่" (ที่มา: VS Code Marketplace)
VS Code มี Built-in Emmet Support ซึ่งหมายความว่า เราสามารถใช้ Emmet Abbreviations ที่มีอยู่ทั้งหมดได้
Captured by author
9. Lorem Ipsum
Installed: 411,000+ ครั้ง
Link: VS Code Marketplace
Lorem Ipsum เป็น Extension มีประโยชน์ ซึ่งสามารถ Generate Dummy Text เมื่อเราต้องการ มันจะช่วยคุณประหยัดเวลาในการ Copy-Paste ได้มาก แต่ตอนนี้คุณอาจไม่จำเป็นต้องใช้มันแล้ว เพราะมันมีเหตุผลที่ดีสำหรับสิ่งนั้น
Lorem Ipsum สามารถถูก Generate ได้โดยใช้ Emmet และอย่างที่เราทราบกันดีอยู่แล้วว่า Emmet มีการรองรับใน VS Code อยู่แล้ว
ในการ Generate Dummy Text คุณจะต้องพิมพ์ lorem ตามด้วยกดปุ่ม Tab หรือปุ่ม Enter
Captured by author
สรุป
เราจำเป็นต้องรักษา Working Environment ให้เหมาะสม และสิ่งสำคัญอีกข้อก็คือ เราต้องตรวจสอบให้แน่ใจว่า มันจะสามารถทำงานได้อย่างราบรื่น ซึ่งด้วยการลบ Extensions ที่ไม่จำเป็นออกไป เราสามารถบรรลุทั้ง 2 อย่างได้
แต่เมื่อคุณทำการลบ Extensions เหล่านั้นออกไปแล้ว แน่นอนว่ามันจะช่วยให้เราจัดการ Environment ได้ดีขึ้น แต่เราก็ต้องมีการติดตามผลด้วย และก่อนที่คุณจะติดตั้ง Extensions ใด ๆ ในอนาคต คุณควรตรวจสอบก่อนว่า ตัว VS Code เอง มีการรองรับ Function การใช้งานที่คุณต้องการอยู่หรือไม่
ที่มา: https://javascript.plainenglish.io/
รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert
|
|
อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ
|
|
บทความล่าสุด