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

VSCode เป็น Open-Source และ Cross-Platform Editor ที่เป็นที่ชื่นชอบของเหล่า Programmer โดยเฉพาะใน Web Development community เพราะมันทั้งใช้งานได้รวดเร็ว, ปรับแต่งได้ และมี Feature ต่างๆ มากมาย ซึ่งวันนี้ทีมงานมีบทความของ Arfat Salman ซึ่งจะมาบอกเกี่ยวกับ 12 JavaScript VSCode Extensions ที่จะช่วยให้การพัฒนาเว็บไซต์ของคุณ มีความรวดเร็วและสะดวกมากยิ่งขึ้น มาดูกันครับว่ามีอะไรบ้าง

1. Quokka.js

Quokka.js JavaScript และ TypeScript นั่นหมายถึงว่า มันจะ Run Code ของคุณทันทีที่คุณพิมพ์ Code รวมทั้งแสดงผลการ Execution ต่างๆ ใน code editor หลังจากติดตั้ง Extension นี้แล้ว คุณสามารถกด Ctrl/Cmd(⌘) + Shift + P เพื่อแสดง Command Palette จากนั้นพิมพ์ Quokka เพื่อเรียกดู list ของ Command ที่ใช้งานได้ เลือกและ Run JavaScript File command ใหม่ คุณสามารกด ⌘ + K + J เพื่อเปิด File ได้โดยตรง และสิ่งที่คุณพิมพ์ใน File นี้จะถูก Execute ในทันที

Extensions อื่นๆ ที่คล้ายกัน

• Code Runner  : รองรับหลายภาษาเช่น C, C + +, Java, JavaScript, PHP, Python, Perl, Perl 6 และอื่น ๆ
• Runner

2. Bracket Pair Colorizer & Indent Rainbow

วงเล็บและวงเล็บปีกกา ถือเป็นสิ่งที่จำเป็นต้องใช้ในหลายๆ ภาษา Programming ซึ่ง Bracket Pair Colorizer and Indent Rainbow ถือเป็นตัวช่วยที่ดี ถึงแม้ Extension ทั้งคู่จะแตกต่างกันแต่มันก็ช่วยให้ดูสวยงามและเขียน Code ได้ง่ายขึ้น เพราะมันมีสีสันและแสดงให้เห็น Block ต่างๆ ได้ง่ายขึ้น ลองดูตัวอย่างเปรียบเทียบด้านล่าง

ตัวอย่างรูปเมื่อไม่ได้ใช้ Indent Rainbow and Bracket Pair Colouriser

เมื่อใช้ Indent Rainbow and Bracket Pair Colouriser

3. Snippets

Snippets เป็น Shorthands ของ Editor ดังนั้น แทนที่จะเขียน import React from 'react'; คุณสามารถพิมพ์ imr และกด Tab เพื่อขยายตัว Snippet และในทำนองเดียวกัน clg จะกลายเป็น console.log อันที่จริงมี Snippet มากมายสำหรับรองรับการใช้งานทั้ง Javascript (หรือภาษาอื่นๆ), React, Redux, Angular, Vue, Jest 

ตัวอย่าง Snippet Extensions ที่แนะนำ

• JavaScript (ES6) code snippets
• React-Native/React/Redux snippets for es6/es7
• React Standard Style code snippets

4. Todo Highlighter

หากคุณกำลัง Code อยู่ แล้วคิดว่าอยากจะมีอะไรเตือนไว้ หรือ มีคำอธิบาย (Annotation) ไว้สักหน่อยแล้วละก็ มี Extension ที่ช่วย Hilight พวก TODOs/FIXMEs หรือ Annotation อะไรก็ตามใน Code ของคุณ ด้วยสีสันที่สะดุดตา ซึ่ง Feature เด่นๆ คือ List Highlighted annotations มันช่วยแสดงรายการ TODOs ทั้งหมดใน Output Console

 

Extensions อื่นๆ ที่คล้ายกัน

• Todo+
• Todo Parser

5. Import Cost

Extension นี้ จะช่วยให้คุณสามารถดู Size ของ Module ที่ Import เข้ามา มันช่วยคุณได้อย่างมากโดยเฉพาะ Webpack คุณสามารถดูว่า คุณกำลัง Import Libraries ทั้งหมดหรือเฉพาะบาง Utility แต่ปัญหาหนึ่งคือ มันไม่แสดง Cost ของ File หรือ Module ที่กำหนดเอง

6. REST Client

ในฐานะของ Web Developer มักจะต้องการทำงานร่วมกับ REST API เพื่อตรวจสอบ URLs และ responses ต่างๆ และ  Postman ก็จะถูกใช้งานด้วย แต่จะดีกว่าไหมถ้า Editor ของคุณสามารถทำแบบเดียวกันได้ง่ายกว่า นั่นคือ REST Client ซึ่งมัน ช่วยให้คุณสามารถส่ง HTTP request และดู response ต่างๆ ใน Visual Studio Code ได้โดยตรง

7. Auto Close Tag & Auto Rename Tag

นับตั้งแต่มี React ในช่วงไม่กี่ปีที่ผ่านมา มีการใช้งาน Syntax (เหมือนอย่าง HTML) ในรูปแบบของ JSX มากขึ้น และแน่นอนเราต้อง Code ด้วย tags JavaScript และ Web Developer ก็ต้องการ Tool ที่สามารถสร้าง Tags ได้อย่างรวดเร็วและง่ายดาย ซึ่ง Emmet เป็นตัวอย่างที่ดีมากสำหรับการสร้าง VSCode นี้ แต่บางครั้งคุณต้องการเพียงอะไรที่เรียบง่าย เช่น auto tag closer ซึ่งจะสร้าง Tag ปิดให้ในขณะที่คุณพิมพ์ Tag เปิด และเมื่อคุณเปลี่ยน Tag นั้น ตัว Tag ปิดก็จะถูกเปลี่ยนแปลงโดยอัตโนมัติ ซึ่ง Extension ทั้งสอง (Auto Close Tag และ Auto Rename Tag) สามารถทำอย่างนั้นได้ นอกจากนี้มันยังทำงานร่วมกับ JSX และภาษาอื่นๆ ได้อีกมากมาย เช่น XML, PHP, Vue, JavaScript, TypeScript, TSX

ตัวอย่าง Auto Rename Tag

ตัวอย่าง Auto Close Tag

Extensions อื่นๆ ที่คล้ายกัน

• Auto Complete Tag : รวมฟังก์ชันการทำงานของทั้ง Auto Rename และ Auto Close Tag เข้าไว้ด้วยกัน
• Close HTML/XML tag

8. GitLens

GitLens ได้เพิ่มความสามารถของ Git โดยได้สร้างมันเพิ่มลงใน Visual Studio Code มันมี Feature ต่างๆ ที่น่าสนใจมากมาย เช่น code authorship shown via Code lens, commit search, history และ GitLens explorer โดยคุณสามารถอ่านคำอธิบายเพิ่มเติมเกี่ยวกับ Feature ต่างๆ ได้ที่นี่ บอกได้เลยว่าคุณควรติดตั้ง plugin นี้หากคุณใช้งาน Git

Extensions อื่นๆ ที่คล้ายกัน

• Git History
• Git Blame
• Git Indicators 
• Open in GitHub / Bitbucket / Gitlab / VisualStudio.com ! 

9. Git Project Manager

Git Project Manager (GPM) จะช่วยให้คุณสามารถเปิดหน้าต่าง (window) ใหม่ซึ่งเชื่อมไปยัง Git Repository ได้โดยตรง จากหน้าต่างของ VSCode เลย หลังจากคุณติดตั้ง Extension นี้แล้ว คุณต้องตั้ง gitProjectManager.baseProjectsFolders ก่อน

ตัวอย่าง

Extensions อื่นๆ ที่คล้ายกัน

• Project Manager 

10. Indenticator

Extension นี้ จะช่วยแสดงในเรื่องการจัดย่อหน้าต่างๆ ของ Code ที่คุณเขียน ให้เห็นเป็น Block ได้ชัดเจนขึ้น ลองดูที่นี่ 

Extensions อื่นๆ ที่คล้ายกัน

• Guides

11. VSCode Icons

Icon ที่ช่วยทำให้ Editor ของคุณ น่าใช้งานมากขึ้น

Extensions อื่นๆ ที่คล้ายกัน

• VSCode Great Icons
• Studio Icons

12. Dracula (Theme)

ถือเป็นอีกหนึ่ง Theme ที่น่าใช้งาน

 

ตัวช่วยอื่นๆ ที่เป็นประโยชน์กับคุณ

• Fira Code  : เป็น Font แบบ monospace (ขอขอบคุณ Rea Deimos)
• Live Server  : เป็น Local Server พร้อมด้วย Live Reload Feature สำหรับทั้ง Static & Dynamic page (ขอขอบคุณ  Dani Vijay)

หวังว่าบทความนี้น่าจะช่วยให้คุณรู้จัก Extension ที่มีประโยชน์และนำไปใช้งานมากขึ้นนะครับ

ที่มา:  https://codeburst.io/

 

 

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

 

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

 

บทความที่เกี่ยวข้อง

• สิ่งที่ได้ จากการเรียนรู้ Data Structure มาตลอดทั้งสัปดาห์
• ทำไมถึงควรทำ Test-Driven Development
• Python เป็นเครื่องมือสำหรับแก้ปัญหาต่างๆ