ความรู้

5 Extension ที่จะช่วยให้เขียนโค้ดได้ดีขึ้น

192
คัดลอกลิงค์
คัดลอกลิงค์
แจ้งตรวจสอบ
5 Extension ที่จะช่วยให้เขียนโค้ดได้ดีขึ้น

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

Advertisement

Advertisement

เอาล่ะค่ะ หลังจากที่เราเกริ่นมานานแล้ว เราไปดูกันเลยดีกว่าว่ามี extension ตัวไหนบ้าง let’s go

1. VScode Icons

vscode-icons vscode-icons เป็นสิ่งที่จะช่วยให้คนที่กำลังเขียนโปรแกรมอยู่ แยกแยะไฟล์ต่าง ๆ ได้ง่ายยิ่งขึ้น การเขียนโปรแกรมสมัยนี้กว่าจะได้ออกมา 1 ชิ้นงาน บางชิ้นอาจจะต้องใช้ภาษาโปรแกรมหลายภาษาเขียน และอาจจะต้องมีไฟล์ต่าง ๆ มาช่วยในการทำนู้นนี้ และแต่ละไฟล์อาจจะมีนามสกุลไม่เหมือนกัน เพราะฉะนั้นเวลาที่เราอยากจะเข้าไปแก้ไขสิ่งต่าง ๆ ในไฟล์นั้นอาจจะต้องใช้เวลาในการหาไฟล์มากขึ้น เพราะไม่มีสัญลักษณ์บอก มีเพียงนามสกุลของไฟล์เท่านั้นที่บอก แถมเจ้าตัวหนังสือที่เป็นนามสกุลไฟล์ก็ตัวเล็กนิดเดียว แต่ถ้าเพื่อน ๆ ติดตั้งเจ้า vscode-icons เพื่อน ๆ จะสามารถแยกไฟล์ต่าง ๆ ได้ง่ายขึ้นโดยที่ไม่ต้องมานั่งดูนามสกุลไฟล์ เพราะมันจะขึ้นเป็น icon มาให้เราได้เห็นเลย

Advertisement

Advertisement

2. Auto Close Tag

auto close tag Auto Close Tag เป็น extension ตัวนึงที่ไม่ว่าใครก็ตามที่กำลังเขียนเว็บด้วย HTML ควรที่จะติดตั้งไว้ใน ide vscode เพราะมันจะช่วยให้เพื่อน ๆ เขียน HTML ได้ง่ายขึ้น นั่นก็คือ Auto Close Tag จะช่วยเขียนการปิด tag HTML ที่เพื่อน ๆ ลืมเขียน หรือขี้เกียจเขียนนั่นเองค่ะ เช่นเพื่อน ๆ ต้องการที่จะใช้ tag p เพื่อเป็นการเขียนตัวหนังสือ เพื่อน ๆ ก็แค่พิมพ์

แล้วทาง extension จะปิด tag ให้เราเองค่ะ ทำให้ได้โค้ด

แบบนี้เลยค่ะ  

3. Auto Import

auto import Auto Import เป็นอีก extension ที่คนใช้เยอะมากเลยค่ะ เพราะมันจะช่วย import library หรือ package หรือ module ต่างให้เองค่ะ อย่างตัวเราเองก็ใช้ตัวนี้อยู่เพราะว่า เราชอบลืม import module ที่เราต้องใช้งานค่ะ โค้ดเรานี่แดงจนแสบตากันเลย เพียงเพราะเราลืม import ค่ะ จนทำให้เราอารมณ์เสียในการเขียนโค้ดไปเลยค่ะ แต่พอเรามาเจอ extension ตัวนี้ เราบอกได้เลยว่าเราเขียนโค้ดสนุกขึ้นมาก ๆ เพราะไม่ต้องมานั่งกังวลว่าลืม import อะไรเข้ามาไหม extension ตัวนี้เราแนะนำเลยค่ะเพื่อน ๆ ไปลองติดตั้งกันดูนะคะ

Advertisement

Advertisement

4. Auto Rename Tag

auto rename tag Auto Rename Tag เป็นอีก extension ที่เราชอบมาก ๆ เลยค่ะ extension นี้เหมาะกับคนที่กำลังเขียน HTML สุด ๆ ไปเลยค่ะ เพราะหลายคนจะเจอปัญหาเมื่อต้องการแก้ tag อะไรสักอย่างใน HTML ซึ่งเวลาเราเขียนโค้ด โค้ดมันจะเยอะมาก ๆ จนเราไม่รู้ว่า tag ไหนเป็นตัวปิด tag ไหนเป็นตัวเปิด เราจะงงกันมาก ซึ่งเจ้าตัว Auto Rename Tag นี่แหละค่ะ จะไปช่วยเพื่อน ๆ แก้ tag ค่ะ เช่นเพื่อน ๆ แก้ tag สักตัวนึงไม่ว่าจะเป็น tag เปิดหรือปิด อีก tag นึงจะถูกแก้โดยอัตโนมัติค่ะ เจ๋งใช่มั้ยค่ะ ไปลองติดตั้งกันดูนะคะ

5. JavaScript (ES6) code snippets

es6 JavaScript (ES6) code snippets ตัวนี้ใครที่กำลังเขียน JavaScript อยู่แล้วล่ะก็ ห้ามพลาดเด็ดขาดเลยค่ะ เพราะมันจะช่วยเพื่อน ๆ เยอะมากค่ะ JavaScript (ES6) code snippets จะช่วยให้เพื่อน ๆ เขียนโค้ด JavaScript ได้เร็วขึ้นมาก ๆ เลยค่ะ เพราะเราสามารถเขียนตัวอักษรย่อนิดเดียว ทาง JavaScript (ES6) code snippets ก็จะช่วยแปลงให้เป็นโค้ดเต็มให้ได้ค่ะ เช่น เราพิมพ์ว่า clg ก็จะถูกแปลงเป็น console.log(object) มันเจ๋งมาก ๆ ใช่มั้ยค่ะเพื่อน ๆ ลดเวลาในการเขียนโค้ดได้เยอะมาก ลองไปใช้กันดูนะคะ

เป็นยังไงกันบ้างคะ เพื่อน ๆ 5 extension ที่เราแนะนำไป เพื่อน ๆ ลองไปติดตั้งแล้วใช้งานกันได้เลยนะคะ เจอกันบทความหน้านะคะ byebye

รูปภาพหน้าปก รูปภาพโดย Ferenc Almasi จาก Unsplash

รูปภาพที่ 1 รูปภาพโดย SONE4EVA

รูปภาพที่ 2 รูปภาพโดย SONE4EVA

รูปภาพที่ 3 รูปภาพโดย SONE4EVA

รูปภาพที่ 4 รูปภาพโดย SONE4EVA

รูปภาพที่ 5 รูปภาพโดย SONE4EVA

คัดลอกลิงค์
คัดลอกลิงค์
แจ้งตรวจสอบ

ความคิดเห็น

กรุณาเข้าสู่ระบบเพื่อทำการคอมเม้นต์