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

9 VS Code Extensions ที่มีประโยชน์ต่อการพัฒนา Web

24-ส.ค.-22

คัมภีร์เทพ IT

เชื่อว่า Web Developers ต้องเคยผ่านการพัฒนา Website แรกกันมาแล้วทุกคน และตอนที่ยังเป็นมือใหม่อยู่ ก็คงเจอปัญหาในการพัฒนา Web หลายอย่างและยังไม่ค่อยรู้จัก Tools ต่าง ๆ นัก ดังนั้น ในบทความนี้จะมาแนะนำ 9 VS Code Extensions ที่มีประโยชน์ต่อการพัฒนา Web โดยเฉพาะสำหรับคนที่ยังเป็นมือใหม่อยู่

1. Live Server

นี่คือสิ่งสำคัญของการพัฒนา Web ที่คุณแทบจะขาดไม่ได้เลย มันเป็นหนึ่งใน VS Code Extensions ที่ได้รับความนิยมมากที่สุดตัวหนึ่ง ดังนั้นหากคุณยังไม่มี Extension นี้ ขอแนะนำให้ติดตั้งมันด่วนที่สุด

Screenshot by Writer

Key Features

  • ช่วยให้คุณเห็น Web Application ที่คุณกำลังพัฒนาอยู่
  • แสดงผลของการเปลี่ยนแปลงใน Code ของคุณแบบ Real-Time

Video Tutorial

Pro Tip

หากต้องการใช้ประโยชน์อย่างเต็มที่จาก Extension นี้ ขอแนะนำว่า อย่าลืมเปิดการใช้งาน Autosave ด้วย

2. Bracket Pair Colonizer

เมื่อคุณเขียนอะไรลงใน CSS หรือ JavaScript คุณอาจจะมีการใช้งานวงเล็บเป็นจำนวนมากบนหน้าจอ Computer ของคุณอย่างหลีกเลี่ยงไม่ได้ และเชื่อว่าโดยทั่วไปแล้ว คงไม่มีใครที่สามารถเขียน Code ที่ Clean อย่างหมดจดในการเขียนครั้งแรก และวงเล็บเหล่านั้นก็อาจทำให้คุณรู้สึกสับสนได้ง่าย และ Extension นี้ก็สามารถช่วยแก้ไขปัญหานั้นได้

Screenshot by Writer

Key Features:

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

Video Tutorial

3. CSS Peek

ในขณะที่อยู่ระหว่างการพัฒนา Web คุณอาจเกิดความสับสนใน HTML และ CSS Files ของคุณอยู่ไม่น้อย และมันอาจสร้างความรำคาญใจอย่างยิ่งให้กับคุณ กรณีที่ต้องสลับไปมาระหว่าง File ทั้ง 2 Files และ CSS Peek ก็ถูกสร้างขึ้นมาเพื่อแก้ไขปัญหาที่น่าหงุดหงิดนี้

Key Features:

  • แสดง CSS ที่นำไปใช้กับ HTML Code ของคุณ
  • คุณสามารถแก้ไข CSS ได้เองด้วย

Video Tutorial:

4. Auto Close Tag

ด้วยเหตุผลบางอย่าง ในบางครั้ง VS Code คุณก็อาจลืมปิด HTML Tags ไปบ้าง แต่ตอนนี้ไม่ต้องกังวล เพราะเรามี Extension นี้ มาช่วยแก้ปัญหานี้

Screenshot by Writer

Key Features:

  • ช่วยปิด HTML Tags ให้คุณ (ทำให้คุณทำงานสบายขึ้นอีกหน่อย)

Video Tutorial:

5. Prettier

โดยธรรมชาติของมนุษย์ มักชื่นชมกับความงามในโลกใบนี้ อย่างไรก็ตาม การสร้างสิ่งที่สวยงาม โดยเฉพาะ Code นั้น เป็นสิ่งที่ทำได้ไม่ง่ายนัก นั่นคือสิ่งที่ Prettier (เปรียบเหมือน Photoshop สำหรับ Code) ได้เข้ามาช่วยเหลือในเรื่องนี้

Screenshot by Writer

Key Features:

  • ช่วยตรวจสอบให้แน่ใจว่า Code ของคุณมี Format ที่ถูกต้อง
  • ช่วยตรวจสอบให้แน่ใจว่า มีการจัด Format ของ Code ให้สอดคล้องกันทั้งหมด
  • ให้ความใส่ใจเป็นพิเศษกับความยาว Code แต่ละบรรทัด ที่เหมาะสมที่สุด

Video Tutorial:

Pro Tip

นี่เป็นสิ่งมหัศจรรย์อย่างมากสำหรับ Developers ไม่ว่าจะทำงานบน Web Application หรือบนอย่างอื่นก็ตาม

6. JavaScript (ES6) Code Snippets

JavaScript เป็นหนึ่งในภาษาที่ได้รับความนิยมมากที่สุดตัวหนึ่งที่ใช้ในการพัฒนา Web เมื่อทำงานกับ Frameworks ต่าง ๆ การทำให้กระบวนการเขียน JavaScript Code เป็นแบบอัตโนมัติ (แม้จะเพียงแค่บางส่วน) สามารถช่วยประหยัดเวลาในการเขียน Code ได้อย่างมาก

Screenshot by Writer

Key Features:

  • ช่วยให้สามารถเข้าถึง Shortcuts ต่าง ๆ สำหรับการ Imports, Exports, Class Helpers, Console Methods และอื่น ๆ อีกมากมาย

Video Tutorial:

7. ES7 React/Redux/React-Native Snippets

การที่ต้องทำงานกับ React เป็นครั้งแรก คุณอาจจำเป็นต้องเรียนรู้เกี่ยวกับ React เป็นอย่างมาก และทำให้การพัฒนา Web ต้องใช้เวลานานกว่าที่ควรจะเป็น และ Snippets จาก Extension นี้ ก็ช่วยลดความยุ่งยากและเวลา ที่ต้องใช้ในการเรียนรู้ไปได้ในระดับหนึ่งเลยทีเดียว

Screenshot by Writer

Key Features:

  • อนุญาตให้เข้าถึง Shortcuts มากมายสำหรับ Methods, Imports, Exports รวมทั้งอื่น ๆ ใน React, Redux และ React Native

Video Tutorial:

8. Intellisense for CSS Class Names in HTML

นี่เป็นอีกหนึ่ง Extension ที่เกี่ยวข้องกับ CSS ที่ทำให้กระบวนการพัฒนา Web มีความง่ายและสะดวกขึ้นอีกเล็กน้อย

Key Features:

  • Autocompletes CSS Class Definitions

Video Tutorial:

9. Path Intellisense

เมื่อเขียน Code สำหรับ Website เชื่อว่าคงมีหลาย Files ที่คุณต้องทำงานด้วย รวมทั้งมีการ Embed ไว้ใน Files อื่น ๆ ด้วย Extension นี้จึงเข้ามาช่วยทำให้คุณทำงานกับ Files ต่าง ๆ เหล่านั้นได้รวดเร็วขึ้นกว่าเดิม

Key Features:

  • ช่วย Autocompletes Filenames ให้ โดยมีการให้คำแนะนำทางเลือกอื่น ๆ หาก File แรกถูกปฏิเสธ

Video Tutorial:

ที่มา: https://code.likeagirl.io/

 

 

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

 

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

เพิ่มเพื่อน

 

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

ประเภทบทความ