VScode 1

13 VScode extensions ที่ทำให้คุณเขียนโปรแกรมง่ายขึ้น

8 minutes read
VScode 1
Share on facebook
Share on twitter
Share on telegram
Share on linkedin
Share on email
แนะนำ VScode extensions 13 ตัว ที่จะมาเพิ่มประสิทธิภาพการทำงานของเราให้ง่ายขึ้น มีตั้งแต่ตัวช่วย format โค้ดไปยัน auto complete

VScode extensions แนะนำจาก Designil วันนี้ทีมงานได้รวบรวมมาทั้งหมด 13 ตัวที่ไม่ใช่เพียงแค่ช่วยให้งานของคุณ productive มากขึ้น แต่ยังช่วยให้การเขียนโปรแกรมง่ายขึ้นอีกด้วยนะเออ ด้วยความที่การเขียนโปรแกรมเป็นสิ่งที่ยากในการเรียนรู้สำหรับหลายคน(รวมทั้งแอด) แอดเลยอยากให้บทความนี้เป็นเหมือนตัวช่วยให้เพื่อนๆ สนุกกับการเขียนโปรแกรมมากขึ้น ต้องบอกได้เลยว่าโหลดเถอะพี่ขอ!!!

1. Auto-Close Tag

auto close tag vscode extensions
Auto Close Tag

เป็น Extension ที่สามารถสร้าง close tag อัตโนมัติ ช่วยลดระยะเวลาในการเขียน code ลงได้ ถือเป็น Extensions ที่ได้รับความนิยมมากตัวนึง ใครจะเริ่มเขียนโปรแกรมจะต้องโหลดมาใช้อย่างไม่ต้องสงสัย


2. Terminal

Terminal vscode extensions
Terminal

เป็น Extension ที่สามารถทำให้เรารัน terminal command ได้ใน text editor โดยตรง นั่นแสดงว่าเราสามารถทำอะไรได้หลายอย่างใน text editor เช่น รัน command ทั้งหมด ใน text editor, ดู output ใน Output window เป็นต้น


3. Bracket Pair Colorizer

Bracket Pair Colorizer vscode extensions
Bracket Pair Colorizer

Extension ที่จะช่วยจับคู่วงเล็บเปิด-ปิดด้วยการใช้สีอันหลากหลาย ซึ่งผู้ใช้สามารถกำหนดตัวอักษร และ สี เองได้ด้วย ทำให้เราไม่ต้องเสียเวลาปวดหัวมองหาวงเล็บอีกต่อไป ต้องบอกว่าเลยว่าหลังจากโหลดมาใช้ code เราจะน่ามองขึ้นเยอะ


4. Prettier

Prettier vscode extensions
Prettier

Extension ที่จะช่วยจัดรูปแบบอัตโนมัติให้ code ของคุณเโดยป็นไปตามรูปแบบที่ต้องการ เพื่อให้คุณอ่านง่ายขึ้น ทั้งยังรองรับหลายภาษาไม่ว่าจะเป็น JavaScript, CSS, HTML, TypeScript, JSON


5. Path Intellisense

Path Intellisense vscode extensions
Path Intellisense

ใครเคยมีปัญหาลืมชื่อไฟล์ path ขณะกำลังนำมาใช้บ้าง ยกมือขึ้น แอดก็เช่นกัน แต่ต่อจากนี้ปัญหาจะหมดไปกับ Path Intellisense ที่จะช่วยแสดงไฟล์ path ที่คุณต้องการให้อัตโนมัติ ต่อจากนี้คุณไม่ต้องจำ file path อีกต่อไปเพราะ Path Intellisense จะเป็นคู่มือช่วยคุณเอง


6. Javascript ES6 Code Snippets / Snippets

Snippets vscode extensions
JavaScript (ES6) Code Snippets

นี่คือีกหนึ่ง Extension ที่จะทำให้คุณเขียน code ไวมากขึ้น กับ Snippets ที่จะให้เราสามารถพิมพ์ตัวย่อสำหรับ syntax JavaScript ES6 ได้ เช่น imp => import fs from fs , imd => import {rename} from fs ซึ่งตัว extension นี่ยังรองรับภาษา TypeScript, React, HTML, Vue ด้วย ถือเป็น extension ที่ควรมีติดเครื่องอย่างยิ่งเพราะจะลดระยะเวลาการเขียนลงได้เยอะมาก


7. GitLens

Girlens vscode extensions
Gitlens

Extension ที่มีสรรพคุณมากมายเหลือคณานับ อย่างเช่น เวลาที่คนในทีมคุณ commit งานใหม่ Gitlens จะแสดง blame annotation ขึ้นมาติดกับ code ที่เปลียนแปลง ซึ่งจะแสดง ชื่อผู้เปลี่ยน, วันที่ commit และ message ด้วย

current line blame vscode extensions
Current line blame

นอกจากนี้ ยังมี feature ที่เมื่อเรา hover ผ่าน code GitLens จะแสดง tab ขึ้นมา ใน tab มีทั้งชื่อคน commit code นั้น, เวลาที่ commit และสามารถดู change ย้อนหลังได้อีกด้วย เรียกได้ว่าเหมาะสำหรับโปรเจ็คที่มีการทำงานหลายคนยิ่งนัก

hovers current line vscode extensions
Hovers current line

8. NPM Intellisense

NPM Interllisense
NPM Intellisense

Extension ที่ช่วย auto-complete ชื่อ package ที่เราเรียกใช้งานจาก npm packages ด้วยการ import หรือ require ทำให้เราไม่ต้องไปเสียเวลาจำ package ให้ปวดหัวอีกต่อไป


9. Auto Rename Tag

Auto Rename Tag vscode extensions
Auto Rename Tag

Extension ที่ช่วยเมื่อคุณกำลังแก้ไขชื่อ component tag เปิด/ปิด ให้แก้ไขแค่ทีเดียวพอ


10 . Better Comments

Better Comments vscode extensions
Better Comments

Extension ที่ทำให้ comment ของคุณมีหลายสี ทำให้สามารถจำแนก comment ต่างๆในการใช้งานได้ และยังช่วยให้ code ของคุณน่าอ่านขึ้นด้วย


11. Code Spell Checker

Code Spell Checker vscode extensions
Code Spell Checker

Extension ที่ช่วยตรวจสอบไวยกรณ์ภาษาอังกฤษใน code คุณ และ auto คำศัพท์ระหว่างที่คุณพิมพ์ สำหรับใครที่ทำงานกันด้วยภาษาอื่นเราก็สามารถดาวน์โหลดไวยกรณ์ภาษาอื่นได้เช่น French, Germany, Spanish แต่ไม่มีไทยนะ


12. Settings Sync

Setting Sync vscode extensions
Setting Sync

ในปีนี้ VScode extensions 2021 ที่มาแรงก็ต้อง Setting Sync แน่นอน สำหรับใครที่ใช้คอมพิวเตอร์หลายเครื่องในการทำงาน แล้วมักจะมีปัญหาในการตั้งค่า ใน VScode ทั้ง setting, theme, VScode extensions, file อยู่เสมอ ตัว Setting Sync จะช่วยอัพโหลดการตั้งค่าต่างๆ ของเราขึ้น GitHub ทำให้เราสามารถดาวน์โหลดการตั้งค่าของเราไปใช้ในคอมพิวเตอร์เครื่องอื่นได้


13. Quokka.js

Quokka.js vscode extensions
Quokka.js

Extension สุดท้ายสำหรับบทความนี้ ที่จะช่วยคุณมีความสุขกับการเขียน code มากขึ้น Quokka.js ทำให้เราสามารถดู return จาก function ได้ทันที โดยไม่สนใจ console.log() อีกต่อไป

main video
main video

นอกจากนี้สามารถเช็ค performance ของ function แบบ real-time ได้อีกด้วย(สุดยอด!!!)

สรุป

จะเห็นได้ว่า VScode extensions 2021 ที่ทาง designil ให้มาจะเป็นการพยายามแก้ไขปัญหาเล็กๆมากกว่า ทำให้เรามีเวลาไปแก้ไขปัญหาใหญ่ยิ่งขึ้นไปอีกได้ สุดท้ายนี้ ขอให้ทุกคนสนุกกับการเขียน code นะครับ

ขอบคุณเนื้อหาอ้างอิงจากเว็บไซต์

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

Share on facebook
Share on twitter
Share on telegram
Share on linkedin
Share on email