VS Code: บทวิจารณ์เชิงลึกสำหรับนักพัฒนา WordPress

Microsoft ได้รับการลงโทษที่ไม่ดี หลายปีที่ผ่านมา พวกเขาได้รับชื่อเสียงว่าล้าหลังเล็กน้อยและไม่เป็นมิตรต่อผู้ใช้ หลายปีก่อนพวกเขาอาจสมควรได้รับมันด้วยซ้ำ แต่ไม่ใช่อีกต่อไป การลงทุนล่าสุดของ Microsoft เป็นแบบข้ามแพลตฟอร์ม ใช้งานง่าย และก้าวข้ามขีดจำกัดของเทคโนโลยี นั่นคือที่มาของ Visual Studio Code นับตั้งแต่เปิดตัวในปี 2015 VS Code ได้กลายเป็นตัวแก้ไขโค้ด defacto สำหรับนักพัฒนาจำนวนมาก โดยดึงเอา Sublime Text และ Atom เป็นตัวเลือกอันดับต้นๆ และนั่นก็พูดมาก มาดูกันว่าทำไม VS Code ถึงยอดเยี่ยมมาก และวิธีที่ Microsoft ได้รับความไว้วางใจทั้งหมดของเรากลับคืนมา

รหัส Visual Studio: โอเพ่นซอร์สและรักมัน

บนพื้นผิว Visual Studio Code ดูเหมือนเครื่องมือแก้ไขอื่นๆ ส่วนใหญ่ การเน้นไวยากรณ์ ธีมสีเข้ม ส่วนขยาย ฯลฯ แต่เมื่อคุณเจาะลึกลงไปอีกเล็กน้อย คุณจะเห็นว่าประสบการณ์ที่คุณได้รับใน VS Code นั้นไม่เหมือนกับเครื่องมือแก้ไขและ IDE อื่นๆ มากมาย ประสบการณ์ที่คุณได้รับใน VS Code นั้นราบรื่นและ — ขอโทษที่เล่นสำนวน — ประเสริฐ

ข้อดีที่ใหญ่ที่สุดที่ VS Code ทำได้คือโอเพ่นซอร์ส แต่แล้วอีกครั้ง Atom ก็เช่นกัน (และในทางเทคนิคแล้ว Microsoft ก็เป็นเจ้าของเช่นกัน เพราะพวกเขาซื้อ GitHub) ยิ่งไปกว่านั้น Microsoft ได้เปิดตัวภายใต้ลิขสิทธิ์ MIT ซึ่งเป็นสิทธิ์อนุญาตโอเพ่นซอร์สที่ผ่อนปรนและเปิดกว้างที่สุด สำหรับบริษัทที่จดสิทธิบัตรและทรัพย์สินทางปัญญาในอดีตได้ค่อนข้างแน่นหนา นี่เป็นก้าวย่างที่ ยิ่งใหญ่

เนื่องจากการอนุญาตให้ใช้สิทธิ์นี้ VS Code จึงสั่งการชุมชนนักพัฒนาที่ไม่ยอมใครง่ายๆ ที่ไม่เพียงแต่ใช้ซอฟต์แวร์สำหรับชีวิตการทำงานของพวกเขาเท่านั้น แต่ยังมีส่วนสนับสนุนตัวแก้ไขเองหรือส่วนขยายและปลั๊กอินบางตัวที่พร้อมให้ปรับแต่งได้ มีการถกเถียงกันเกี่ยวกับความกว้างของใบอนุญาต MIT สำหรับ Visual Studio Code แต่นั่นไม่ควรส่งผลกระทบต่อผู้ใช้หรือนักพัฒนาส่วนใหญ่

IDE แบบ All-In-One?

นี่คือคำถามประจำชั่วโมง: VS Code เป็นโปรแกรมแก้ไขโค้ดหรือ IDE หรือไม่ มันมีการรวม Git ในตัว การเข้าถึงเทอร์มินัลและทุบตี คอนโซลการดีบัก และการเน้นไวยากรณ์แบบพิเศษและการเติมโค้ดให้สมบูรณ์ที่เรียกว่า IntelliSense

ทั้งหมดที่ทำได้ทันทีจากการดาวน์โหลด โดยไม่มีส่วนขยายหรือการปรับแต่งใดๆ เลย โดยปกติ ฟีเจอร์ประเภทดังกล่าวจะติดตั้งและอัปเดตโดยทีมพัฒนาอย่างเป็นทางการแล้วจะมีให้ในแอประดับพรีเมียม เช่น PhpStorm แต่ด้วย VS Code…บรรทัดนั้นจะเบลอ มันมีคุณสมบัติเหมือน IDE มากมาย

แต่ในท้ายที่สุดก็ไม่ได้ค่อนข้าง IDE เต็ม คุณไม่ได้รับการปรับโครงสร้างโค้ดเริ่มต้น การอัปเดตเฉพาะภาษาอย่างเป็นทางการ และการป้องกันในอนาคต และสิ่งอื่น ๆ ที่ IDE สามารถดำเนินการได้ ที่กล่าวว่ามี Visual Studio IDE เป็นผลิตภัณฑ์ระดับพรีเมียมที่แยกจากกันซึ่ง Microsoft ทำมาหลายปีแล้ว และ Visual Studio Code เป็นเพียงสมาชิกอีกรายหนึ่งของตระกูล Visual Studio ดังนั้น หากคุณกำลังมองหา IDE แบบหนาเต็มรูปแบบ คุณสามารถรับได้จาก MS แต่นี่เป็นวินาทีที่ใกล้เคียงกันจริงๆ

นอกจากนี้ยังมี Visual Studio IDE เป็นสาเหตุที่ devs เรียกว่า VS Code หรือเพียงแค่ Code แทนที่จะเป็น Visual Studio มันจะสับสนเกินไปเป็นอย่างอื่น

รหัส VS: ออกจากกล่อง

ถ้าตอนนี้คุณยังไม่ได้เดา มีหลายส่วนที่ประกอบเป็น VS Code เริ่มต้นด้วยการดูพื้นฐานและวิธีการทำงานทั้งหมดก่อนเพิ่มส่วนขยายหรือปรับแต่งอะไรก็ตาม

เมื่อคุณเปิดตัวแก้ไขเป็นครั้งแรก คุณจะสังเกตเห็นสองสิ่ง:

• เลย์เอาต์และการออกแบบนั้นคล้ายกับเครื่องมือแก้ไขอื่นๆ ดังนั้นจึงเป็นที่คุ้นเคยสำหรับคนส่วนใหญ่
• โหลดได้เร็วกว่าโปรแกรมแก้ไขโค้ดอื่น ๆ ส่วนใหญ่ (Atom เรากำลังมองไปในทิศทางของคุณ)

เมื่อคุณรู้สึกทึ่งกับการตอบสนองเสร็จแล้ว เราสามารถย้ายไปที่แถบด้านข้างทางซ้ายได้ นี่คือที่ที่เครื่องมือเพิ่มเติมส่วนใหญ่ที่มาพร้อมกับ VS Code จะใช้งานได้

ไอคอนเริ่มต้นที่ด้านข้างแต่ละอันจะเปิดขึ้นคอลัมน์ใหม่เมื่อคลิกซึ่งสามารถปรับขนาดและปรับแต่งได้

1. Explorer

มุมมองเริ่มต้นของคุณใน VS Code จะเป็นแท็บ Explorer ในนั้น คุณจะเห็นส่วนที่เรียกว่า Open Editors ซึ่งเป็นคำแสลงของ VS Code สำหรับเอกสาร แต่ละไฟล์ที่คุณเปิดถือเป็นตัวแก้ไขใหม่ ดังนั้นหากคุณเปิดไฟล์ .css 8 ไฟล์ คุณจะเห็นรายชื่อบรรณาธิการ 8 ไฟล์

จากนั้นคุณมีรายการ โปรแกรมที่ เปิดอยู่ซึ่งอาจสร้างไฟล์ที่จะแก้ไขด้วย VS Code สำหรับตัวอย่างนี้ คุณจะเห็นสิ่งเดียวที่ฉันเปิดในพื้นหลังคือ Snagit ด้านล่างนั้นคือ เค้าร่าง ที่แสดงโครงกระดูกของไฟล์ปัจจุบัน เมื่อคุณได้ไฟล์ขนาดใหญ่และต้องการดูโครงสร้างทั้งหมดจากบนลงล่าง มุมมอง เค้าร่าง จะทำงานได้ราบรื่นกว่าแผนที่ย่อทางด้านขวาของหน้าจอเล็กน้อย

2. ค้นหา

คุณลักษณะการ ค้นหา ใน VS Code เป็นปรากฎการณ์ ไม่ใช่ว่ามันมีประสิทธิภาพมากกว่าบรรณาธิการคนอื่น ๆ (เพราะฉันต้องซื่อสัตย์ที่นี่: ฉันชอบ Find/Replace ใน Sublime Text) เพราะมันง่ายและโปร่งใสกว่าตัวแก้ไขอื่นๆ

เมื่อคุณทำการค้นหา ข้อความค้นหาแต่ละรายการของคุณจะอยู่ที่ด้านล่างสุดของคอลัมน์ทางขวา จากนั้น คุณสามารถคลิกที่อินสแตนซ์เดียวเพื่อเน้นตำแหน่งของข้อความค้นหาภายในไฟล์ (หากคุณ CTRL/CMD-Click จะเป็นการเปิดอินสแตนซ์ที่สองของไฟล์ที่เน้นบรรทัดที่เลือกใหม่)

หากคุณเลือกที่จะ แทนที่ คำในฟิลด์ที่สอง ผลลัพธ์จะแสดงข้อความค้นหาที่เป็นสีแดง ขีดฆ่า และแทนที่ด้วยสีเขียวในผลลัพธ์ เมื่อคุณคลิกที่ค้นหา/แทนที่ในผลลัพธ์ ความแตกต่างที่เปรียบเทียบจะปรากฏขึ้นเพื่อแสดงตัวอย่างการเปลี่ยนแปลง คุณลักษณะนี้มีประโยชน์มากจนคุณจะสงสัยว่าคุณจะมีชีวิตอยู่โดยปราศจากมันได้อย่างไร

3. Git

ฉันจะเริ่มต้นด้วยการบอกว่าฉันอาจมีอคติในแนวทางของฉันกับ Git ฉันมักจะเป็นผู้ใช้บรรทัดคำสั่ง/ทุบตี และไคลเอนต์กราฟิกสำหรับ Git ไม่เคยรู้สึกว่าใช่สำหรับฉันจริงๆ การรวม Git จำนวนมากกับบรรณาธิการและ IDE อื่น ๆ นั้นไม่ใช่ถ้วยชาของฉัน อย่างไรก็ตาม การใช้งาน VS Code เป็นลูกผสมระหว่างบรรทัดคำสั่งและ GUI และใช้งานได้ดีอย่างน่าประหลาดใจ ไม่ว่าคุณจะชอบ Git เวอร์ชันใด รับมัน… รุ่น ของ Git?

ส่วนเกี่ยวกับการรวม Git ใน VS Code คือใช้งานได้ คอลัมน์ด้านซ้ายที่ปรากฏขึ้นเมื่อคุณคลิกไอคอน Git เป็นตัวบ่งชี้สถานะของการซื้อคืนของคุณ คุณสามารถคลิกจุดไข่ปลา (…) เพื่อตรวจสอบคำสั่ง Git ที่ปกติจะต้องพิมพ์โดยเฉพาะ คุณสามารถเพิ่ม คอมมิต พุช หรือแม้แต่แก้ไขไฟล์ที่จัดฉากของคุณ และทำงานในสาขาต่างๆ ผ่านเมนูบริบทได้

นอกจากนี้ คุณมีตัวเลือกในการเปิด bash terminal ในตัวแก้ไขเอง มีเมนู Terminal ในแถบนำทาง และเมนูใน VS Code นั้นรวดเร็ว สะอาด ราบรื่น และใช้งานได้ดีโดยไม่ต้องปรับแต่ง คุณสามารถแยกออกเป็นหลายคอลัมน์ได้หากจำเป็น และเปิดไดเรกทอรีต่างๆ ไว้ในเทอร์มินัลต่างๆ ที่คุณสามารถสลับไปมาระหว่างเมนูแบบเลื่อนลงได้

เทอร์มินัลไม่เฉพาะ Git เช่นกัน มันใช้งานได้ดีกับคุณสมบัตินี้ มันให้ความรู้สึกเป็นธรรมชาติที่จะรวมไว้ที่นี่

4. Debug Console

Debug Console เป็นหนึ่งในคุณสมบัติเริ่มต้นใน VS Code ที่ทำให้โดดเด่นจากโปรแกรมแก้ไขโค้ดอื่นๆ ในขณะที่เขียนนี้มี สภาพแวดล้อมการดีบัก 171 แบบที่พร้อม ให้ติดตั้งภายใน VS Code พวกเขาไม่ได้นับ แต่ฉันต้องการทราบและคิดว่าคุณทำเช่นกัน ดังนั้นฉันจึงนับด้วยตนเอง

ภายในผลลัพธ์ คุณจะพบโปรแกรมแก้ไขข้อบกพร่องสำหรับทุกสิ่งเท่าที่จะจินตนาการได้ JavaScript, CoffeeScript, Coffee, Java…สคริปต์แบรนด์คาเฟอีนทั้งหมดจริงๆ คุณได้รับสภาพแวดล้อม LUA และ Python และ Ruby, Docker, PHP, SASS, LESS และ…ทุกอย่าง ในบรรดาภาษาโปรแกรมที่คลุมเครือและ/หรือเสียทั้งหมดที่ฉันพยายามค้นหาโปรแกรมแก้ไขข้อบกพร่อง QBasic เป็นเพียงภาษาเดียวที่ไม่มีผลลัพธ์ใดๆ และไม่มีใครใช้มันเป็นเวลานานมาก ฉันคิดว่าคุณคงรู้สึกลำบากใจที่จะหาบางสิ่งในการใช้งานสมัยใหม่ที่ไม่มีใน Extensions Marketplace

5. ตลาดส่วนขยาย

จากทั้งหมดที่กล่าวมา การมองลึกลงไปใน Extensions Marketplace จะทำให้คุณมีแนวคิดเกี่ยวกับเครื่องมือที่คุณคาดหวังได้จากชุมชนการพัฒนาของบรรณาธิการ คุณสามารถเห็นได้จากภาพหน้าจอด้านบนที่มีการติดตั้งหลายล้านรายการที่มีส่วนขยายบางรายการ และหากคุณไม่แน่ใจว่าจะเริ่มต้นจากที่ใด การจัดเรียงตามการ ติดตั้ง หรือตาม ความนิยม อาจเป็นทางออกที่ดีที่สุดของคุณ

คุณสามารถเรียงลำดับและค้นหาโดยใช้คีย์เวิร์ดโดยใช้พารามิเตอร์ @sort แต่คุณยังสามารถคลิกจุดไข่ปลา (2) เพื่อดูรายการดรอปดาวน์ที่มีตัวเลือกทั้งหมดของคุณ ตัวเลือกสำหรับจัดการส่วนขยายที่คุณติดตั้งไว้ก็มีอยู่ที่นี่เช่นกัน

เมื่อคุณพบสิ่งที่คุณต้องการติดตั้งแล้ว ก็ทำได้ง่ายมาก คลิกปุ่ม ติดตั้ง สีเขียว

จากนั้นคุณจะต้อง โหลด ตัวแก้ไข VS Code ใหม่เพื่อสิ้นสุดการติดตั้ง

แค่นั้นแหละ. เมื่อเสร็จแล้ว ส่วนขยายของคุณก็พร้อมใช้งาน แม้ว่าคุณอาจต้องการกลับไปที่แท็บ รายละเอียด เป็นครั้งคราวเนื่องจากมีการกล่าวถึงปัญหาต่างๆ ซึ่งมักจะผ่านแท็กที่อัปเดตและรหัสสี

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

แป้นพิมพ์ลัดและคีย์แมป

อาจจะเป็นส่วนที่สำคัญที่สุดของการแก้ไขรหัสคือแป้นพิมพ์ลัดและ keymaps ทุกสิ่งที่เราพูดไปแล้วนั้นยอดเยี่ยมมาก และสิ่งเหล่านี้เป็นส่วนสำคัญต่อความสำเร็จของบรรณาธิการและโครงการ แต่เมื่อคุณคุ้นเคยกับคีย์แมปและนิ้วของคุณใช้ผ่านหน่วยความจำของกล้ามเนื้อ การสลับไปใช้คีย์แมปใหม่แทบจะเป็นไปไม่ได้เลย

อย่างดีที่สุด การแลกเปลี่ยนจะทำให้กำหนดการโครงการของคุณช้าลง และลดประสิทธิภาพของคุณ และที่แย่ที่สุด นิ้วที่โก่งของคุณส่งผลกระทบร้ายแรงต่อ codebase

ไม่ว่าคุณจะมาจากไหนเมื่อย้ายไปยัง VS Code ชุมชนก็พร้อมให้ความช่วยเหลือคุณ ไม่ว่าจะเป็นจาก VIM, Emacs, Sublime Text หรือแม้แต่ Notepad++ คุณสามารถเก็บปุ่มลัดและคีย์แมปที่คุณคุ้นเคยได้ คุณสามารถค้นหา Extensions Marketplace ด้วย @recommended:keymaps หรือไปที่ File – Preferences – Keymaps เพื่อแสดงรายการส่วนขยายที่พร้อมใช้งาน

และหากคุณไม่ต้องการทางลัดก็ไม่เป็นไร หากคุณรู้สึกว่าจำเป็นต้องปรับแต่งสิ่งใด ๆ (หรือเพียงแค่ต้องการสรุปว่าแป้นพิมพ์ลัดใดบ้างที่มีอยู่ใน VS Code โดยค่าเริ่มต้น) คุณสามารถไปที่ File – Preferences – Keyboard Shortcuts

อื่น ๆ. คุณสมบัติที่คุณควรรู้เกี่ยวกับ

จากภาพรวมทั่วไป ในตอนนี้ คุณน่าจะมองเห็นสิ่งที่ VS Code ส่วนใหญ่นำเสนอในฐานะเครื่องมือแก้ไขข้อความและโค้ดได้ ณ จุดนี้ ที่กล่าวว่ามีสิ่งที่เป็นประโยชน์จำนวนหนึ่งที่คุณควรรู้

1. เมนูการเลือก

สิ่งนี้มีประโยชน์ไม่ว่าคุณจะเป็นนักพัฒนาระดับใดก็ตาม แต่จะมีประโยชน์อย่างยิ่งหากคุณยังใหม่ต่อบรรณาธิการโดยทั่วไป เมนู การเลือก มีฟังก์ชันมากมายที่คุณจะพบว่ามีค่า

โดยเฉพาะอย่างยิ่ง การใช้ Add Cursors to Line Ends ในคลิกเดียวเป็นเรื่องที่ดี และสามารถเข้าไปในเมนูและ เลือก Select All Occurrences ของคำ วลี หรือตัวอย่างที่ไฮไลต์ภายในไฟล์ปัจจุบันได้ โปรแกรมแก้ไขส่วนใหญ่มีสิ่งเหล่านี้เป็นทางลัด แต่ไม่ใช่ทั้งหมดที่มีป้ายกำกับหรือพร้อมใช้งานอย่าง VS Code รู้สึกสดชื่นที่ได้เห็นพวกเขาอยู่ข้างหน้าเนื่องจากเป็นคำสั่งที่มีค่าและโดดเด่นที่สุดที่คุณจะใช้

2. เมนูเทอร์มินัล

เพียงเพราะคุณทำงานในโปรแกรมแก้ไขโค้ดไม่ได้หมายความว่าคุณเป็นวิซาร์ดบรรทัดคำสั่ง ที่จริงแล้ว คุณอาจดูบรรทัดคำสั่งและส่วนเทอร์มินัลด้านบนแล้ว และคิดว่าคุณไม่เคยใช้เลย

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

เพียงแค่เข้าถึงสิ่งเหล่านี้ผ่านเมนูแทนที่จะต้องรู้คำสั่งเชลล์จะเปิดเทอร์มินัลและทุบตีและบรรทัดคำสั่งในลักษณะที่แอพจำนวนมากพลาดไป มันเป็นสิ่งเล็กๆ น้อยๆ ที่ทำให้ VS Code ดึงดูดใจทุกคน ไม่ใช่แค่ผู้เขียนโค้ดรุ่นเก๋าที่มาจาก VIM หรือ Emacs

3. โหมดเซน

ใต้เมนู View คุณจะพบเมนูย่อยที่เรียกว่า Appearance ที่มีตัวเลือก Toggle Zen Mode ตัวเลือกอื่นๆ ภายใต้ View นั้นคุ้มค่าที่จะลอง ดู และทดลองด้วย แต่ฉันต้องการเรียกความสนใจของคุณไปที่โหมด Zen เพราะฉันคาดว่าหลายคนไม่เคยลอง

ผู้แก้ไขหลายคนอาจเรียกชื่อนี้โดยใช้ชื่อต่างกัน แต่แนวคิดทั่วไปก็คือ คุณจะใช้ เฉพาะ เอกสารที่คุณกำลังแก้ไขให้เต็มหน้าจอ เท่านั้น มันแตกต่างจากโหมดเต็มหน้าจอตรงที่คุณไม่ต้องขยายแอพให้ใหญ่สุด แต่เป็นเอกสาร

การแสดงโหมดด้วยภาพหน้าจอนั้นทำได้ยาก เนื่องจากไม่สามารถแสดงได้ว่าโปรแกรมแก้ไข VS Code ครอบคลุม ทั้ง หน้าจอ แม้แต่ทาสก์บาร์ของ Windows และแท่นวาง MacOS ทุกพิกเซลของอสังหาริมทรัพย์บนหน้าจอถูกถ่ายโดยโปรเจ็กต์ปัจจุบันของคุณ เพื่อให้คุณได้จดจ่ออยู่กับมันและไม่มีอะไรอื่น

และหากไม่ใช่สำหรับคุณ เพียงกด ESC แล้วคุณจะกลับสู่มุมมองเดิม

มันอาจจะดูไม่มากและฉันก็เคยเป็นคนขี้ระแวง แต่หลังจากใช้คุณลักษณะที่คล้ายกันใน Scrivener เพื่อเขียนนิยาย ฉันเป็นผู้เปลี่ยนใจเลื่อมใส คุณสามารถเข้าสู่สถานะโฟลว์และทำสิ่งต่างๆ ให้เสร็จสิ้นได้ง่ายขึ้น ความรุ่งโรจน์มากมายสำหรับ VS Code สำหรับการนำโหมด Zen มาใช้ เพื่อให้เราสามารถเสียบหูฟังเอียร์บัดและทำงานโดยปราศจากสิ่งรบกวนได้ทุกเมื่อที่ต้องการ (หรือมากที่สุดเท่าที่เราจะทำได้)

ห่อ

เมื่อพิจารณาจากปัจจัยทั้งหมดแล้ว คุณจะละเลยที่จะไม่ดาวน์โหลด Visual Studio Code และลองใช้ดู Microsoft ได้นำเสนอสิ่งที่อาจเป็นตัวแก้ไขที่เสถียรที่สุด ได้รับการสนับสนุนมากที่สุด เร็วที่สุด และเป็นสัดส่วนตามสัดส่วนที่มีน้ำหนักเบา/มีคุณสมบัติหนัก นักเขียนโค้ดใหม่ นักพัฒนามากประสบการณ์ หรือมือสมัครเล่นที่ต้องการค้นหาเครื่องมือที่เหมาะสม…VS Code สร้างขึ้นโดยคำนึงถึงคุณเป็นหลัก ไม่ใช่เรื่องง่ายที่จะบรรลุผล แต่เนื่องจากมี VS Code จึงคุ้มค่ากับบิตและไบต์บนฮาร์ดไดรฟ์ของคุณ และอาจจะดูอย่างอื่นที่ Microsoft ถ้าคุณเคยเขียนมันออกไป

อะไรคือแง่มุมที่คุณโปรดปรานของ VS Code? คุณทำสวิตช์แล้วหรือยัง?