มาทำ vscode ให้สวยขึ้นกันเถอะ 💛
ก็เค้าเบื่อสีเดิมนี่นา 😙
สวัสดีครับทุกคน ตอนนี้ทุกคนใช้ editor ตัวไหนในการเขียนโปรแกรมกันเอ่ย หลายคนอาจจะใช้ atom หลายคนอาจจะใช้ sublime text หลายคนอาจจะใช้ notepad หลายคนอาจจะใช้ vim ผมเองก็ยังลองมาไม่หมดหรอก มาตกเหวของ Visual Studio Code เอาซะก่อน
วันนี้เลยขออนุญาติพูดถึงแต่ vscode เนอะ ดังนั้น ชาว editor อื่นๆ อย่าน้อยใจ จุ๊บบบ 😘
อันนี้คือหน้าตาของ vscode ที่ใช้อยู่จ้า หน้าตาก็ไม่ได้แย่เนอะ สีดำเหมาะกับคนรุ่นใหม่ ตัดกับตัวอักษรสีสันสวยงาม
แต่ใช้มาสองสามปีมันก็เบื่อเหมือนกัน เลยไปคุ้ยๆมาว่าเราทำอะไรแก้เบื่อกับมันได้บ้าง
เปลี่ยน Theme ซะ 💛
ลองเลื่อนเม้าส์มาที่มุมล่างซ้าย มันจะมีรูปเฟืองอยู่ ลองกดละเลือกเมนู Color Theme
โดยพื้นฐานมันก็มี theme ทั่วไปให้เลือกอยู่แล้วแหละ แต่ว่าเราก็สามารถ load ลงมาเพิ่มได้นะ โดยผมมีแหล่งดู theme มาแนะนำ ลองเข้าเว็บนี้เลย https://vscodethemes.com/
สมมติว่าผมถูกชะตากับสีม่วง ก็จำชื่อมันมาเลย Noctis Viola
เหมือนว่า Noctis จะทำ theme ออกมาหลายสีเลย โหลดทีเดียวก็จะได้หมดเลย ดังนั้นให้ทำการกดที่ปุ่ม install สีเขียวๆ และกด reload เพื่อ restart โปรแกรม vscode ซะ
เมื่อกลับไปที่หน้าเลือก theme (Figure2 และ Figure3) ก็จะมี theme ล่าสุดมาให้เราเลือกใช้แล้ว
เปลี่ยน Icon ซะ 💛
จริงๆแล้วหากเราเปลี่ยน theme เป็น เราไม่ควรจะถามว่าเปลี่ยน icon ยังไงละนะ (คำใบ้อยู่ที่ Figure2 ให้เปลี่ยนจาก Color theme เป็น File Icon Theme)
ส่วนตัว icon ที่ชอบคือ Vscode Icons (ที่เห็นผมใช้ทุกรูปที่ผ่านมา) กับ Material Icon Theme ตามรูปด้านล่าง (Figure9)
สายรุ้งชนะทุกสิ่งอย่าง 💛
อันนี้ได้แรงบันดาลใจจาก developer หลายๆคนเลย ให้เราทำการ search หา Extension ว่า “rainbow” เราน่าจะเจออะไรคล้ายๆนี้
🌈 indent-rainbow
🌈Rainbow String
ผมขออนุญาติลง rainbow String แค่ตัวเดียวนะครับ
หลังจากที่เรากด install แล้ว ถ้าอ่านที่ extension ดีๆ ตัวนี้ต้อง configuration เพิ่มนิดนึงเนอะ
วิธีการ config คือ
คลิกที่ฟันเฟือง (ตัวเดียวกับ Figure2) คลิกที่ Menu Setting > หาจุดไข่ปลาที่มุมบนด้านขวา และเลือก open settings.json แบบรูป Figure 9 เลยจ้า
จากนั้น copy ใน configuration มาวางแบบนี้เลย ตามตัวอย่างคือ จะทำ rainbow ในไฟล์ที่มีนามสกุลดังกล่าว
จากนั้นให้ save ไฟล์ settings.json และปิดเปิดโปรแกรม vscode ใหม่
มันก็ควรขึ้นเป็นแบบนี้
แค่นี้ก็เรียบร้อยโรงเรียนอินเตอร์แล้วจ๊ะ 😘
เปลี่ยนฟ้อนต์สิ ชีวิตจะดจีย์… 💛
บางครั้ง สัญลักษณ์ก็พาเรางงได้เช่นกันในการเขียนโปรแกรมทั่วไป อย่างเช่นผมที่เขียน javascript เราจะเจอทั้ง arrow function (=>) ทั้ง มากกว่าเท่ากับ (> =) ทั้งน้อยกว่าเท่ากับ (< =)
หลายๆคนจึงคิดว่า ถ้ามีฟ้อนต์ที่มันทำให้อ่านง่ายกว่านี้คงดี และมันก็มีจริงๆ นั่นก็คือ Fira code
ก่อนอื่น download ฟ้อนต์ได้ที่นี่และติดตั้งลงเครื่องเลยครับ
ต่อไป ให้เข้าที่ settings.json แล้วเพิ่มไปดังนี้
"editor.fontFamily": "Fira Code",
"editor.fontLigatures": trueเมื่อกด save ฟ้อนต์ของเราก็น่าจะเปลี่ยนแล้วล่ะครับ 😃
[Edit1 September 25th, 2019]
เมื่อกลางเดือนกันยายนที่ผ่านมา Microsoft ปล่อยฟ้อนต์มาตัวหนึ่งชื่อ Cascadia Code สามารถลองใช้ได้นะครับ
ข้อควรระวัง
🎃 ระวังแต่งสวยเกินไปจนเพื่อนในทีมมาลอกวิธีแต่ง
🎃 ระวังแต่งจนไม่ทำงานทำการ
🎃 ระวังรก….
🎃 ระวังนะ แต่งมากๆระวังหน่วงๆ (ถ้า ram น้อย) โดยเฉพาะสายรุ้ง
และคุณล่ะ แต่งออกมาหน้าตาเป็นยังไง เอามาอวดและแบ่งปันกันมั้ยครับ 💙
พื้นที่แปะ Reference 💛
👉 review ทั้ง icon ทั้ง theme เลย ส่วนใหญ่ที่มีก็เป็นตัวที่นิยมๆอยู่แล้วเนอะ ลองไปตามรอยได้ครับ
👉 วิธี config ให้ indent สายรุ้งจากที่แรงไปแล้ว แรงขึ้นไปอีก
👉 awesome vscode
เพราะความสวยงามไม่ใช่ทั้งหมดที่จะทำให้เราสะดวกสบายในการทำงาน มีหลายๆอย่างที่ใน document บอกไว้ และมีประโยชน์มากสำหรับการใช้งาน vscode ร่วมกับสิ่งที่เราใช้ทำงาน
👉 ตัวอย่างของการลง Font Fira code เป็นภาษาไทยครับ
👉บทความเกี่ยวกับ Cascadia code :)
