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

สำหรับ Developer ที่ใช้งาน VS Code ในการทำงาน นี่คือ 10 VS Code Extensions ที่ช่วยเปลี่ยนชีวิต Dev ของคุณ ซึ่งเป็น 10 Extensions ที่ทำให้การเขียน Code ของคุณสนุกและง่ายขึ้น พร้อมทั้ง Bonus อีก 2 Extensions ที่คุณไม่ควรพลาด

1. SCSS IntelliSense

การสร้างตัวแปรใน SCSS นั้น ไม่ใช่เรื่องน่าสนุกสักเท่าไหร่

2. Auto Rename Tag

หากไม่คำนึงถึง Framework ที่คุณเลือกใช้ การเขียน Front-end Code ใน HTML (หรือ JSX) ก็อาจทำให้คุณเกิดความเหนื่อยล้าได้จากการที่คุณมี 50 บรรทัดระหว่าง Opening Tag และ Closing Tag ของคุณ บางครั้งคุณอาจต้องการเปลี่ยน H2 เป็น H3 บางทีคุณอาจต้องการเปลี่ยน Div ไปเป็น Span หรือไม่ว่าจะด้วยวิธีใดก็ตาม คุณจะพบว่าการหา Closing Tag นั้นเป็นเรื่องที่ยาก เว้นเสียแต่ว่าคุณจะใช้ Plugin นี้

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

3. Duplicate Action

 แต่หากคุณต้องการที่จะใช้มัน Duplicate Action Extension ก็น่าจะเป็นคำตอบที่ดีที่สุดในเรื่องนี้

4. CodeStream

พูดง่าย ๆ มันก็เปรียบเหมือน //comments นั่นเอง

คุณชอบใช้งาน IDE ไหม คุณใช้ Trello, Slack, Asana, Bitbucket และ Microsoft Teams บ้างไหม CodeStream รองรับ Tools และ IDEs ต่าง ๆ เป็นจำนวนมาก ซึ่งจะช่วยให้คุณสามารถติดตามประเด็นต่าง ๆ ได้โดยไม่ต้องออกจาก Coding Environment ของคุณ นั่นหมายถึง คุณจะได้ลื่นไหลกับการทำงานได้มากขึ้น และใช้เวลาน้อยลงในการหาวิธีที่จะอธิบายปัญหา/ประเด็นของเพื่อนร่วมงานของคุณในแต่ละวัน

5. Night Owl

นี่เป็นหนึ่งใน Theme ที่ได้รับความนิยมมากที่สุดตลอดกาลเท่าที่เคยมี IDE มา โดยมันปกป้องสายตาของคุณในพื้นหลังสีทึบและทำให้สบายตามากขึ้นด้วยโทนสีน้ำเงินของ Night Owl

6. Color Highlight

จะมีใครสักกี่คนที่สามารถจำ HEX Codes ได้?

VS Code จะช่วยทำให้เรามีกล่องสีเล็ก ๆ เพื่อใช้อ้างอิง แต่มันก็ไม่ถึงขนาดไล่โทนสีแบบละเอียดยิบมากมายนัก Color Highlight จะช่วยให้คุณเห็นตัวอย่างสีของแต่ละ HEX Codes ได้

7. SVG Preview

VS Code มี Built-in Image Preview Window แต่เมื่อคุณคลิกที่ .svg File มันจะแสดง Code ให้คุณเห็นได้อย่างง่ายดาย

ด้วย SVG Preview คุณจะเห็น Side Window ที่จะช่วยแสดงตัวอย่างรูปภาพของคุณ รวมทั้งแม้แต่การ Update ในกรณีที่คุณทำการเปลี่ยนแปลง SVG Code

ตอนนี้คุณไม่จำเป็นต้องเปิด Sketch หรือ Illustrator เพื่อทำการแก้ไข SVG ของคุณ แต่คุณสามารถทำการเปลี่ยนแปลงแก้ไขใน VS Code ได้โดยตรง

8. i18n Ally

แต่ปัญหาเพียงอย่างเดียวก็คือ คุณไม่สามารถแก้ไขคำแปลภายใน File ที่คุณกำลังใช้งานอยู่ได้ โดยทั่วไปคุณจะต้องเปิด locales/language.json File จากนั้นจะ Scroll ลงไปยังจุดที่ต้องการ แล้วทำการ Edit ข้อความที่ต้องการตรงจุดนั้น (และเมื่อเวลาผ่านไป คุณก็จะลืมว่าคุณกำลังมองหาอะไรอยู่)

i18n Ally จะช่วยให้คุณเห็น ตัวอย่างของข้อความ ตามภาษาที่คุณใช้ มันจะช่วยให้คุณสามารถสร้าง Keys ใหม่, ดูรายการที่มีอยู่ และแก้ไขพวกมันทั้งหมดได้โดยตรงจากภายใน Template ของคุณ

นอกจากนี้ i18n Ally ยังมาพร้อมกับ Sidebar Display (ที่อยู่ด้านบน) ที่จะแสดงให้คุณเห็นว่า การแปล Project ของคุณใกล้จะเสร็จมากน้อยแค่ไหนแล้ว

9. Code Spell Checker

ในการทำงาน คุณมักจะเห็นว่ามีการสะกดคำผิดอยู่เป็นประจำ เช่น mesages และ defalt costants เป็นต้น

หวังว่าคุณจะไม่เป็นหนึ่งใน Developer เหล่านั้น เมื่อคุณใช้ Code Spell Checker จะช่วยทำให้ชีวิตทั้งของคุณเองและเพื่อนร่วมงานของคุณง่ายขึ้นมาก ที่สำคัญคือมันรองรับภาษาต่าง ๆ ทั้ง Dutch, Catalan, Czech, French, German, Russian, Spanish, Swedish รวมทั้ง Medical Term Dictionaries อีกด้วย

10. JavaScript Booster

คุณยังจำ งานที่แสนจะน่าเบื่อและต้องทำพวกมันซ้ำ ๆ อยู่บ่อย ๆ ใน JavaScript ได้บ้างไหม

ตอนนี้ เราสามารถทำงานเหล่านั้นได้โดยอัตโนมัติเพียงแค่คลิกเดียว เมื่อใดก็ตาม ที่คุณเห็นสัญลักษณ์รูปหลอดไฟเล็ก ๆ ปรากฏขึ้นทางด้านซ้าย คุณก็เพียงแค่กดมัน (หรือใช้ Custom Hotkey ก็ได้) เพื่อที่คุณจะได้วิธีที่ใช้ในการเปลี่ยนแปลง Code ภายใต้ Curser ของคุณ นอกจากนี้ มันยังรองรับ TypeScript อีกด้วย

BONUS

Synthwave ‘84

นี่คือสุดยอด Theme สำหรับการ Coding เลยก็ว่าได้ คุณสามารถเปิดเพลงของคุณแล้วเริ่มทำการ Coding อย่างมีความสุข

มันแตกต่าง Theme อื่น ๆ ตรงที่ Synthwave '84 อาจต้องใช้การปรับแต่งแก้ไขเล็กน้อยเพื่อเปิดใช้ Effect ข้อความที่เรืองแสง แต่หลังจากนั้น เชื่อว่าคุณจะเห็นด้วยว่ามันคุ้มค่ากับความพยายามของคุณ

VS Code Icons

ด้วย Users ปัจจุบันกว่า 4 ล้านคน คุณอาจจะกำลังใช้ Extension นี้อยู่แล้วก็ได้

หากคุณยังไม่เคยใช้งานมัน ก็เพียงแค่ Install มัน แล้วทำการค้นหาสิ่งที่คุณต้องการใน List ของ File และ Folder ได้เร็วขึ้นกว่าเดิมถึง 10 เท่า

ด้วย Icon ที่ไม่ซ้ำกันซึ่งมีไว้สำหรับ File แต่ละประเภท จะทำให้การค้นหา File ที่แสดงเป็นรูปภาพ และขั้นตอนการค้นหานั้นง่ายขึ้นกว่าเดิม

ที่มา:  https://medium.com/  และ  https://medium.com/

 

 

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

 

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

 

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

• ไม่ควรใช้ For Loop ใน Arrays 
• 7 Projects สนุก ๆ ที่สามารถใช้ฝึกฝนทักษะ Coding
• เคล็ดลับการจัดการกับ Configuration File ใน Python