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

บทความนี้เป็นของคุณ Aman Mittal ซึ่งได้แชร์ประสบการณ์เกี่ยวกับ วิธีปรับแต่ง VSCode เพื่อให้พร้อมกับการใช้งาน สำหรับตัวเขาเอง ซึ่งมีทั้ง Themes ที่เลือกใช้, การปรับแต่ง VSCode รวมทั้ง Extensions ที่เขามักใช้งานบ่อย เชื่อว่าน่าจะเป็นแนวทางให้ผู้ที่ใช้ VSCode ได้ลองนำไปประยุกต์ใช้

เมื่อเร็ว ๆ นี้ คุณ Aman อยู่ที่สนามบิน Boryspil ประเทศยูเครน ขณะที่กำลังทำงานกับ Blog อยู่ VSCode ของเขาก็เกิดไม่ทำงานขึ้นมา ซึ่งมันไม่ใช่แค่ครั้งเดียว แต่เกิดขึ้น 2 ครั้งภายในครึ่งชั่วโมง บทความบางส่วนถูกบันทึกอัตโนมัติ (AutoSaved) แล้ว แต่บางส่วนก็หายไปเลย ตอนแรกเขารู้สึกแย่ ว่าทำไมมันถึงต้องมาเสียตอนที่กำลังทำงานอยู่ด้วย หลังจากที่เปิดตัว Editor ขึ้นมาใหม่ เขาก็รู้สึกหัวเสียเพราะต้องกลับมาเขียนบทความในส่วนที่หายไปใหม่อีกครั้ง

จากประสบการณ์ที่เจอก่อนหน้านี้ เขารู้สึกว่ามี Extensions อยู่หลายตัวที่ยังไม่ได้ใช้เพราะว่าเขาไม่ได้ใช้งานในบาง Frameworks ในช่วงไม่กี่เดือนที่ผ่านมา (อย่างเช่น Angular) คุณ Aman จึงต้องหาวิธีรับมือที่ให้ดีกว่าเดิม บน Network ที่ไม่ปัญหา แต่ต้องเข้าสู่ระบบทุก ๆ 30 นาทีเนื่องจากข้อจำกัดของ WIFI เขาจึงติดตั้ง VSCode ใหม่อีกครั้ง

VSCode ใช้ Electron เป็นพื้นฐานในการทำให้สามารถใช้งาน Cross-Platform และทำงานบน macOS, Windows และ Linux ได้ มันมันถูกสร้างขึ้นโดยใช้ Node.js และมีการสนับสนุนที่ดีเยี่ยมสำหรับ JavaScript Developer มันรวดเร็วเมื่อเทียบกับ Editor (Atom) และ IDE (Webstorm) ที่เขาเคยใช้ก่อนหน้านี้

Themes

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

• fairyFloss (เนื่องจากมี Background ที่สวย)
• Dracula Official (ใช้ Theme นี้กับ iTerm เพื่อ Setup และ Switch การทำงานกับ fairyFloss)
• Night Owl (อยากลองใช้อะไรใหม่ ๆ ดู)
• Material-Icon-Theme (สำหรับ File icons)

การปรับแต่ง VSCode

ต่อไปคุณ Aman ก็ทำการเปลี่ยนแปลงแก้ไขบางสิ่งที่เขาพอจะจำได้จากการ Setting ในครั้งก่อนหน้านี้

• ทำการ Set ให้ Tab แบ่งเป็น 2 ส่วน
• ทำการ Enable emmet สำหรับ HTML และ JavaScript
• ทำการ Enable autoSave โดยตั้ง Delay ไว้ 5 วินาที
• ใช้ Terminal setup และ shell  (zsh) ของระบบปฏิบัติการ
• เปิดให้มีการจัดรูปแบบของ Source Code โดยอัตโนมัติก่อนที่จะ Save File เมื่อมีการกดปุ่ม Save File และเปิดให้สามารถวาง Code Snippet ที่มาจากที่อื่นได้อีกด้วย
• ปิด minimap ลง เพื่อประหยัดพื้นที่ของหน้าจอและทุกวันนี้ Code ที่เราเขียนนั้นเป็น Module อยู่แล้ว ทำให้จำนวนบรรทัดของ Code ต่อ File นั้นไม่มาก จึงไม่จำเป็นต้องใช้ minimap
• ทำการ Enable wordwrap

Extensions ที่มักใช้งาน

ขั้นตอนต่อไปคือ การทำให้ Editor นี้ทำงานได้อย่างไร้ปัญหา พร้อมมีการ Maintain ที่ยอดเยี่ยมและเตรียมพร้อมสำหรับ Extensions ฟรี

• :emojisense:
• Bracket Pair Colorizer
• Code Spell Checker (คุณ Aman เขียน Blog posts ต่างๆ ใน VSCode)
• Code:: Stats (เป็น Stats Tool ขนาดเล็ก)
• ESLint
• Indent 4-to-2 (เปลี่ยนการจัดย่อหน้าจาก Tab 4 spaces ไปเป็น 2 spaces แทน)
• expressjs (Snippets Package ที่คุณ Aman เขียนขึ้นเอง)
• markdownlint (บางครั้ง คุณ Aman ก็เขียน Markdown ในหนึ่งวัน มากกว่า JavaScript Code)
• GitHub Pull Requests
• GraphQL (เผยแพร่โดย Prisma)
• Import Cost
• npm Intellisense
• Path Intellisense
• pug (Snippet อีกตัวหนึ่งของคุณ Aman เอง สำหรับ JADE และ Pug Template Languages, สำหรับบาง Projects ที่เก่าแล้ว)
• IntelliSense for CSS class names
• React Native Tools
• Todo Tree
• Version Lens
• Settings Sync (หนึ่งใน Extension ที่สำคัญ สำหรับหัวข้อนี้)
• Word Count
• Prettier — Code formatter (ขาดสิ่งนี้ไม่ได้เลย)

สำหรับ Prettier คุณ Aman ชอบที่จะใช้การ Configure เป็นของตัวเอง ตามด้านล่างนี้:

นี่คือการ Setup ที่ คุณ Aman ใช้สำหรับการทำงานกับ JavaScript, NodeJS, React และ React Native หวังว่าบทความนี้น่าจะเป็นประโยชน์สำหรับคนที่กลำงัใช้งาน VSCode อยู่ หรืออยากลองใช้งาน VSCode ขอให้มีความสุขกับการ Coding!!!

ที่มา:  https://hackernoon.com/