สิ่งที่จะนำเสนอในบทความนี้ครับ1) Extension และฟอนต์ ( font ) ที่ผมอยากจะแนะนำ2) วิธีติดตั้ง extension และนำไปใช้* ไม่ได้แนะนำ extension ที่ช่วยทำให้อ่านภาษาต่าง ๆ ได้ง่ายขึ้นนะครับ เกริ่นคร่าว ๆ ครับทุก ๆ อาชีพล้วนแล้วแต่มีเครื่องมือที่จำเป็นต่อการทำงานในสายงานของตนเอง และถ้าพูดถึงสายไอทีทุกคนคนอาจจะคิดว่าคือคอม แต่ถ้าเจาะลึกกว่านั้นก็คือ IDE นั้นเองครับ IDE (Integrated Development Environment) ก็คือโปรแกรมที่เอาไว้ใช้พัฒนาโปรแกรมต่าง ๆ อีกที ใช้การพัฒนาเว็บ ( Website ) หรือแอปพลิเคชันมือถือ ( Mobile Application) เป็นต้นIDE ณ ตอนนี้มีอยู่หลายเจ้ามาก ที่ได้รับความนิยมสูงสุด ณ ตอนนี้ก็คือ VScode ผมก็เป็นหนึ่งผู้ใช้เหมือนกัน เหตุผลที่ผมคิดว่าต้องติดตั้ง extension เพิ่มเติมVScode เป็น IDE หน้าตาสไตล์ minimal น้อย ๆ แค่พองามซึ่งช่วงแรกที่ใช้ผมก็ค่อนข้างชอบ แต่พอต้องเปิดใช้ทุกวันก็รู้สึกเบื่อเพราะหน้าตาที่ดูธรรมดา ๆ ไม่ชวนให้หลงไหลกับการใช้มัน และบางทีก็สับสนว่าไฟล์ ( file ) ตระกูลไหนเป็นตระกูลไหน เพราะทุกไฟล์ ( file ) มีไอคอน ( icon ) รูปแบบเดียวกันทำให้การเปิด VScode เป็นสิ่งทีไม่น่าอภิรมย์สักเท่าไรสำหรับผม สีสันจืด ๆ รูปแสดงไอคอน ( icon ) อะไรต่าง ๆ ก็ไม่มี เพราะฉะนั้นสิ่งผมทำในเวลาต่อมานั้นก็คือการดาวน์โหลด (download) extension มาตกแต่งให้ดูน่าใช้ โดยผมจะแนะนำ Extension ต่าง ๆ ที่ดึงดูด และทำให้ผมรู้สึกอยากจะใช้มันกัน เรื่มต้นกันด้วย Themeเปรียบเทียบง่าย ๆ ก็คือสีของอุปกรณ์นั้นเองครับ โดยส่วนตัวผมชอบให้มันเป็นออกเป็นสีสันมากกว่าแบบปกติ Theme ที่ผมเลือกใช้ก็คือ "one dark pro" ครับ สีสันดูสดใส และน่ามองมากกว่าแบบเดิมcredit: ขอบคุณรูปจาก VScode ของผู้เขียนเอง โดยปกติแล้วทาง VScode จะมี theme พื้นฐานมาให้ได้แก่ dark, dark+, light, monokai เป็นต้นcredit: ขอบคุณรูปจาก VScode ของผู้เขียนเอง วิธีการติดตั้ง Theme เรื่มกันด้วยการเปิด VScode หลังจากนั้นกดที่ไอคอน (Icon) ที่ผมวงไว้ครับ 1) กรอกคำว่า one dark pro แล้วกด enter ครับ กดคลิกเลือกอันที่ชื่อเดียวกับที่ผมวงครับผม และกดติดตั้ง (install) ครับผมcredit: ขอบคุณรูปจาก VScode ของผู้เขียนเอง 2) หลังจากติดตั้งเสร็จแล้วก็ตรงนำไปตั้งค่า VScode เราด้วยครับ โดยปกติแล้วเวลาดาวน์โหลด (download) เสร็จจะมี pop up เด้งออกมาถามเราว่าจะเอา theme นี้ไปใช้เลยไหม เราก็กด click บริเวณที่ผมวงเอาไว้ครับ เพื่อตกลงนำ theme ไปใช้ครับผมcredit: ขอบคุณรูปจาก VScode ของผู้เขียนเอง ** กรณีที่ไม่มีอะไรขึ้นเลย แม้จะโหลดเสร็จแล้วมี 2 วิธีครับ(ใช้คีย์ลัด กับวิธีธรรมดาครับ)1) ใช้วิธีแบบธรรมดา - กดเลือกไฟล์ (File) หลังจากนั้นเลือก Preferences และเลือก Color theme ครับ 2) ใช้คีย์ลัด กด ctrl + k หนึ่งทีครับหลังจากนั้นกด ctrl + t ครับ** ผลลัพธ์ของทั้ง 2 วิธีจะได้หน้าต่างแบบนี้โผล่ออกมาครับ และกดเลือก one dark procredit: https://code.visualstudio.com/docs/getstarted/themes ตามด้วยฟอนต์ ( Font )ฟอนต์ (Font) ฟอนต์ (font) ของตัวอักษรก็เป็นสิ่งจำเป็นครับ ผมใช้ JetBrains Mono ซึ่งอ่านง่ายมาก ๆ โดยทางเว็บไซต์ ( Website ) ระบุไว้ว่าสามารถอ่านได้ง่ายกว่าทุกฟอนต์ ( font ) ที่มีอยู่ตามท้องตลาด โดยทางทีมพัฒนาเขาได้คิดมาอย่างดีเลยว่าส่วนสูงของตัวพิมพ์ใหญ่ และตัวพิมพ์เล็กต้องเท่าไร องศาเท่าไรถึงจะอ่านได้ง่าย ซึ่งผมก็คิดว่าจริง หรือผมอาจจะอุปทานไปเองก็ได้* ณ ตอนนี้ฟอนต์ ( font ) ตัวนี้ยังไม่รองรับภาษาไทยนะครับถ้าสนใจสามารถเข้าไปอ่านข้อมูลเพิ่มเติม หรือดาวน์โหลด (download) ฟอนต์ ( font ) นี้ได้ฟรีในลิงก์ ( Link ) นี้เลยครับ https://www.jetbrains.com/lp/mono/ * เป็นลิงก์ ( Link ) จากเว็บไซต์ ( Website ) ของเจ้าของลิขสิทธิ์นี้โดยตรงครับ ไม่ต้องกลัวว่าละเมิดลิขสิทธิ์แต่อย่างใดcredit: รูปจาก https://www.jetbrains.com/lp/mono/ วิธีการติดตั้งฟอนต์ ( Font )1) เข้าไปตามลิงก์นี้ ( Link ) ครับผม https://www.jetbrains.com/lp/mono/ กดดาวน์โหลด (download) ตามที่ผมวงเล็บเอาไว้credit: รูปจาก https://www.jetbrains.com/lp/mono/ 2) หลังจากนั้นทำการแตกไฟล์ ( file ) หรือ unzip ไฟล์ ( file ) ที่เราดาวน์โหลด (download) และก็จะได้โฟลเดอร์ ( folder ) ที่ข้างในบรรจุฟอนต์ ( font ) เอาไว้ครับcredit: ขอบคุณรูปจาก Drive d ของคอมผู้เขียนเองครับ 3) ทำการเข้าไปในโฟลเดอร์ (folder) JetBrainMonocredit: ขอบคุณรูปจาก Drive d ของคอมผู้เขียนเองครับ 4) หลังจากนั้นเข้าไปในโฟลเดอร์ (folder) ที่มีชื่อว่า ttf ครับเพื่อทำการติดตั้งฟอนต์ (font) เมื่อเปิดเข้ามาก็จะเจอกับฟอนต์ ( font ) JetBrains Mono หลายแบบมาก มีทั้งเอียง ( italic ) และหนา ( bold )* โดยผมจะลงแค่ตัวธรรมดา ( Regular ) ครับ- กด คลิกขวา ไฟล์ที่ผม highlight ไว้ครับ แล้วจะมีคำว่า Install โผล่ออกมา และก็กด Install ครับเพื่อติดตั้งฟอนต์ (font) credit: ขอบคุณรูปจาก Drive d ของคอมผู้เขียนเองครับ 5) เมื่อติดตั้งเสร็จแล้วก็ต้องไปติดตั้งใน VScode ของเราต่อครับผมเข้าสู่หน้า setting เพื่อเปลี่ยนฟอนต์ - กดที่ File ครับหลังจากนั้นเลือก preferences และเลือก settings- จะได้หน้าแบบนี้โผล่ออกมาครับcredit: ขอบคุณรูปจาก VScode ของผู้เขียนเอง 6) ต่อมาทำการเลือกฟอนต์ ( font ) และเปลี่ยนขนาด- กดเลือก Text Editor และเลือก Font ครับ แล้วทางฝั่งขวามือจะเป็นแบบในรูปด้านล่างครับผม- ตรงช่อง Font Family ทำการกรอก JetBrains Mono ไว้หน้าสุดเพื่อให้เป็นฟอนต์ที่จะใช้เป็นอันแรก ( อย่าลืมเครื่องหมายจุลภาค , นะครับ ) หรือจะลบทั้งหมดแล้วเหลือแค่ JetBrains Mono ก็ได้ครับ- ตรงช่อง Font Size สามารถระบุขนาดของฟอนต์ (font) ได้ครับ* ทางเว็บไซต์ ( Website ) แนะนำว่าขนาดที่ดีสุดสำหรับฟอนต์นี้อยู่ที่ 13 ครับ ( แต่แล้วแต่คนชอบเลยครับ โดยผมชอบให้อยู่ที่ขนาด 14 มากกว่า)credit: ขอบคุณรูปจาก VScode ของผู้เขียนเอง ปิดท้ายด้วย Iconเบื่อไหมกับการที่มีแค่ชื่อในโฟลเดอร์ และทุกไฟล์ก็มีแค่ชื่อ จะดีกว่าไหมถ้าเกิดเขียนไฟล์JavaScript ก็มีไอคอน (icon ) JavaScript แสดง credit: ขอบคุณรูปจาก VScode ของผู้เขียนเอง credit: ขอบคุณรูปจาก VScode ของผู้เขียนเอง วิธีการติดตั้ง Material Icon Themeเรื่มกันด้วยการเปิด VScode หลังจากนั้นกดที่ไอคอน (Icon) ที่ผมวงไว้ครับcredit: ขอบคุณรูปจาก VScode ของผู้เขียนเอง 1)ต่อมากรอกคำว่า meterial icon ลงในช่องค้นหาครับ และกดเลือก Material Icon Theme และกด install ครับผมcredit: ขอบคุณรูปจาก VScode ของผู้เขียนเอง 2)พอติดตั้งเสร็จจะมี pop up เด้งขึ้นมาถามว่าอยากใช้ meterial icon theme ไหม กดคลิกช่อง Material Icon Theme เพื่อตอบตกลงครับcredit: ขอบคุณรูปจาก VScode ของผู้เขียนเอง ** กรณีที่ไม่มีอะไรโผล่ออกมาให้กดเลยสามารถเข้าไปตั้งค่าเองได้ครับผมกดเลือก FIle และเลือก Preferences และเลือก File Icon Theme ครับ และจะมีหน้าต่างโผล่ออกมาเป็นรายชื่อของ theme ที่เราสามารถนำไปใช้ได้ครับเลือก Material Icon Theme และกดคลิกซ้ายcredit: ขอบคุณรูปจาก VScode ของผู้เขียนเอง จบแล้วครับ...ถ้ามีคำถามอะไร ติดปัญหาตรงไหน หรืออยากจะติอะไรก็สามารถคอมเมนต์ทิ้งไว้ได้เลยครับ ขอบคุณครับ credit: รูปภาพปกจาก canva.com