COOL IT IDEAS AND STUFF
8 Useful VSCode Add-Ons New Front-end Developers Should Absolutely Download
27-Nov-19
คัมภีร์เทพ IT
See the original english version Click here!
เมื่อพูดถึงการพัฒนา Web ในสมัยก่อนที่ยังไม่มี Code Editor ที่มันสมัยอย่างในตอนนี้ ทำให้การทำงานของ Developer ในยุคนั้นยังไม่ได้รับความสะดวกเท่าที่ควร แต่ปัจจุบันเราจะเห็นว่ามี Code Editor ต่าง ๆ ที่มี Feature น่าสนใจที่ช่วยให้ Developer ทำงานง่ายและสะดวกขึ้นมาก หนึ่งใน Editor ที่รับความนิยมมากก็คือ VSCode ดังนั้น เรามาดู 8 VSCode Add-Ons ที่ Front-end Developers ควรลองนำไปใช้งาน โดยเฉพาะคนที่เป็นมือใหม่
1. Atom Keymap
อาจยังมี Developer หลายคนที่เคยชินกับการใช้งาน Atom อยู่ ซึ่ง Extension นี้จะช่วยเพิ่ม Atom Keyboard Shortcuts ไปยัง VS Code หลังจากติดตั้ง Extension แล้ว ให้ทำการ Restart VS Code จากนั้น Keyboard Shortcuts ที่คุณคุ้นเคยจาก Atom ก็พร้อมใช้งานแล้ว
คุณเคยตัดสินใจเปลี่ยนชื่อ HTML Tag แล้วลืม Rename Closing Tag ไหม?
แน่นอนว่า คุณสามารถใช้เวลาอันมีค่าในการเขียน Code เพื่อมาพยายามหาและแก้ไข Tag ที่ไม่ถูกต้อง คุณสามารถ Run Code ของคุณผ่านเครื่องมือตรวจสอบความถูกต้องต่าง ๆ เพื่อไล่หาจุดที่คุณทำผิด หรือไม่ คุณเพียงแค่ติดตั้ง Extension นี้และปล่อยให้มัน Rename Closing Tag ให้คุณเอง
Extension นี้ จะช่วยใส่สีให้กับพวกวงเล็บ/ปีกกา และช่วยแสดงให้คุณเห็นว่า ส่วนของ Code ของคุณ มีจุดเริ่มต้นและสิ้นสุดที่ตรงไหน
สำหรับคนที่อาจเป็นมือใหม่ หรือยังไม่คุ้นเคยกับ JavaScript สักเท่าไรนัก Extension นี้ ถือเป็นตัวช่วยในการเขียน Code ของคุณได้เป็นอย่างดี สีของวงเล็บจะช่วยให้คุณเห็นปัญหา และ Debug Code ของคุณได้เร็วยิ่งขึ้น
4. IntelliSense for Class Names
บ่อยครั้งไหม ที่คุณต้องใช้ความพยายามในการจำชื่อของ Class ที่มีจำนวนมากหรืออาจมีชื่อคล้าย ๆ กันในระหว่างการ Coding
เป็นที่รู้กันว่า ในฐานะของ Developer บางวันพวกเราก็สมองแล่น แต่ก็มีบางวันที่รู้สึกตื้อ ๆ ซึ่งแน่นอนว่า การได้ความช่วยเหลือเล็ก ๆ น้อย ๆ ถือเป็นเรื่องที่ดีกับ Developer
หากคุณติดตั้ง Extension นี้ จะช่วยให้คุณสามารถเข้าถึง Autocomplete Feature ที่จะช่วยแสดงรายชื่อ Class ที่ Match กันให้กับคุณ เพียงคุณพิมพ์ชื่อเริ่มต้นของ Class ก็ทำให้ชีวิตคุณง่ายขึ้นแล้ว
5. Live Server
Extension นี้ จะทำการเพิ่มปุ่มที่ด้านล่างหน้าจอของ Code Editor ซึ่งจะให้คุณเริ่ม Development Server แบบ Live ได้ มันมี Automatic Reload Feature และทำงานร่วมกันได้ทั้งกับ Dynamic และ Static Pages
เมื่อคุณ Launch Server แล้วทำการเปลี่ยนแปลงหรือแก้ไข Code ก็จะสามารถดูได้ทันทีว่า เกิดอะไรขึ้นกับ Page บ้าง
เมื่อคุณทำงานกับ Code Editor ไปนาน ๆ คุณอาจต้องการ Customize หรือปรับแต่ง Space การทำงานของคุณในแบบที่คุณต้องการเพื่อให้สามารถทำงานได้อย่างะสะดวกที่สุด
บางครั้งเมื่อเรามองที่หน้าจอเป็นเวลานาน ๆ ก็อาจทำให้ตาเมื่อยล้าได้ ดังนั้น สิ่งสำคัญก็คือ จะดีแค่ไหนหากคุณสามารถปรับแต่งเครื่องมือบนหน้าจอของคุณที่ทำให้มองง่ายและสบายตาขึ้น
Material Theme จะเป็นตัวช่วยที่ดีของคุณ จะทำให้คุณใช้งานง่าย มันมีทั้ง File และ Folder Icons มีทั้ง Dark และ Light Theme ให้คุณได้เลือกใช้ ถือเป็นเครื่องมือที่คุณควรมีไว้ เมื่อใช้งาน VSCode
Prettier เป็น Extension ที่ช่วยให้คุณประหยัดเวลาในเรื่องการจัดระเบียบ Code ของคุณ เมื่อคุณกด Save มันก็จะทำงานกับการเยื้อง, Semicolons, Spacing, Quotes รวมทั้งอื่น ๆ อีกมากมาย ให้กับคุณ
คุณสามารถ Set ให้มันทำตาม Style Rules ที่เฉพาะเจาะจง หรือใช้งานตามค่าที่ Default ไว้ก็ได้ มันเหมาะอย่างยิ่งสำหรับการสร้างมาตรฐานให้กับ Code จาก Source อื่น ๆ หรือ ทำการเปลี่ยนแปลงให้อย่างรวดเร็วตาม Style ที่คุณต้องการ
8. Simple Icons
แม้ File และ Folder Icons ที่อยู่ใน Material Theme จะยอดเยี่ยมอยู่แล้ว แต่บางครั้งคุณอาจจะอยากสลับสับเปลี่ยนมันบ้าง ซึ่ง Simple Icons จะช่วยให้คุณทำการเปลี่ยนแปลง Icons ต่าง ๆ สำหรับ VSCode ได้
มันจะทำให้ File Explorer ของคุณมีความน่าสนใจยิ่งขึ้นและช่วยให้สามารถคุณค้นหาประเภทของ File ได้ภายในพริบตา
หากคุณเริ่มต้นใช้งาน VSCode ในฐานะ Front-end Developers หวังว่าบทความนี้จะช่วยเป็นแนวทางเบื้องต้นให้คุณได้ว่า จะเลือกใช้ Extensions, Themes และ Tools บ้าง และขอแนะนำให้คุณค้นหา Tools ที่เหมาะกับงานของคุณ เพื่อช่วยให้คุณสามารถเพิ่มประสิทธิภาพการทำงานของคุณ
ที่มา: https://medium.com/
รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert
|
|
อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ
|
|
บทความล่าสุด