คำแนะนำและเคล็ดลับ VSCode สำหรับผู้ใช้ระดับสูง

เหตุใดฉันจึงอยากเป็นผู้ใช้ระดับสูงของ Visual Studio

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

นักพัฒนามักจะมองหาบล็อกใหม่ที่จะทำให้พวกเขาทำงานได้ดีขึ้น ไม่ว่าคุณจะใช้ IDE อะไร อาจมีบล็อก: สมัครสมาชิก!

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

ฉันจะเป็นผู้ใช้ระดับสูงของ VSCode ได้อย่างไร

นี่คือสิ่งที่ทำให้ผู้ใช้ทั่วไปแตกต่างจากผู้ ใช้ ระดับสูง:

• ความรู้ที่ใกล้ชิดเกี่ยวกับ IDE ของคุณ: VSCode มีเอกสารประกอบที่ยอดเยี่ยม อ่านเลย!
• การ ปรับแต่ง: ผู้ใช้ระดับสูงปรับแต่งเวิร์กโฟลว์เพื่อให้เหมาะกับความต้องการเฉพาะของพวกเขา
• ทำงานที่น่าเบื่อและซ้ำซากทั้งหมดให้เป็น อัตโนมัติ
• ปรับปรุงเวิร์กโฟลว์ของคุณอย่างต่อเนื่อง และติดตามวิวัฒนาการของ IDE ของคุณ

ในบทความนี้ ฉันตั้งใจจะอธิบายวิธีที่ฉันได้กล่าวถึงแต่ละประเด็นเหล่านี้ด้วยตัวเอง และเตรียมความรู้ที่จะช่วยให้คุณทำด้วยตัวเอง สิ่งที่ฉันทำอาจไม่ได้ผลสำหรับคุณ อย่างน้อยก็ไม่ใช่ทั้งหมด ผู้คนทำงานในสภาพแวดล้อมและโครงการที่แตกต่างกัน (สำหรับฉัน ส่วนใหญ่ทำงานกับ React.js และ TypeScript บน Windows) แต่แนวทางโดยรวมนั้นใช้ได้สำหรับทุกคน

ทดสอบกับ Jest

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

วิดีโอด้านล่างแสดงให้เห็นว่าสิ่งที่คุณต้องทำคือคลิกขวาที่ชื่อทดสอบแล้วใช้เมนูบริบทเพื่อเรียกใช้

การทดสอบกับ Pact

ส่วนที่ใช้เวลานานที่สุดในการเขียนแบบทดสอบสัญญาคือเนื้อหาที่ตรงกัน ฉันแก้ปัญหานี้โดยสร้างตัวอย่างข้อมูลที่เป็นประโยชน์เพื่อทำให้การกระทำซ้ำๆ เกิดขึ้นโดยอัตโนมัติ นี่คือบางส่วนที่ฉันสร้างขึ้น อย่าลังเลที่จะใช้มัน (เช่น เพียงคัดลอกและวางลงใน /snippets/typescript.json ของ /snippets/typescript.json )

วิดีโอด้านล่างแสดงวิธีใช้ตัวอย่างเหล่านี้:

1. เลือกรายการประเภทเดียวกันทั้งหมด เช่น เลือกสตริง เวลา และค่าอื่นๆ ทั้งหมด
2. ใช้การโยงคีย์ที่กำหนดไว้ล่วงหน้า หรือเรียกใช้ Insert Snippet และเลือกข้อมูลโค้ดที่เกี่ยวข้อง หรือเพียงแค่เริ่มพิมพ์คำนำหน้าของข้อมูลโค้ดที่คุณต้องการใช้

Git

นักพัฒนาส่วนใหญ่ใช้ Git และ GitHub ทุกวัน และฉันก็เช่นกัน อย่างไรก็ตาม ฉันพยายามหลีกเลี่ยงการใช้เทอร์มินัลหรือ github.com

GitHub Pull Requests and Issues ช่วยให้ฉันเปิด แก้ไข และตรวจสอบ PR ได้อย่างสะดวกสบายจาก VSCode ฉันพบว่า IDE ของฉันเป็นที่ที่ดีกว่าในการตรวจสอบโค้ดมากกว่าเว็บหรือแอปเดสก์ท็อปของ GitHub นักพัฒนาบางคนอาจไม่เห็นด้วย แต่ฉันขอขอบคุณในความสม่ำเสมอและความสะดวกสบายในการทำใน IDE ของฉัน

Git ทำอะไรได้มากมาย แต่ฉันจำคำสั่งได้ไม่กี่คำ แต่ทำไมจำอะไรได้ในตอนแรก? การท่องจำแง่มุมที่ละเอียดมากเกินไปของกิจวัตรของคุณไม่ได้ผลมากเกินไป

GitLens แสดงคุณสมบัติที่น่าทึ่งมากมายเพียงปลายนิ้วสัมผัส ต้องขอบคุณมัน ฉันแทบไม่ต้องเอื้อมมือไปหาเทอร์มินัลเพื่อใช้ Git

การปรับแต่งเทอร์มินัล

ไม่ว่าคุณจะใช้ระบบปฏิบัติการใด คุณก็ทำได้ดีกว่าเทอร์มินัลเริ่มต้น ฉันใช้ Windows Terminal + cmder หากคุณเป็นผู้ใช้ Unix ให้ค้นหา iTerm (macOS) หรือ Oh My Zsh (Linux และ macOS) ฉันได้รวมเข้ากับ VSCode และเพิ่มนามแฝง (ทางลัด) มากมายที่ช่วยประหยัดเวลาในการเขียนคำสั่ง

ตัวอย่างเช่น:

• ys = yarn start - ช่วยฉันเริ่มต้นแอปด้วยตัวอักษรเพียงสองตัว
• del=RMDIR /S/Q $* && echo "Deleted Successfully!!!" - ลบไดเร็กทอรีที่ให้มาและแสดงข้อความแสดงความสำเร็จเมื่อเสร็จสิ้น
• gdab = git branch | grep -v "master" | xargs git branch -D gdab = git branch | grep -v "master" | xargs git branch -D - ลบสาขาในเครื่องทั้งหมดยกเว้น master

การบันทึกอักขระสองสามตัวที่นี่และอาจดูไร้สาระ แต่ฟีเจอร์ที่ช่วยประหยัดเวลาเหล่านี้รวมกันได้ในระยะยาว ฉันพบข้อได้เปรียบรองในการทำนามแฝง—การใช้เวลาน้อยลงในการพิมพ์ชื่อเหล่านั้นช่วยให้ฉันมีสมาธิและไม่สูญเสียความคิดเพราะฉันไม่ได้พยายามจำวิธีการเรียกใช้คำสั่ง

การสร้างรหัส

การสร้างส่วนประกอบ หน้า ฯลฯ ใหม่เป็นสิ่งที่ฉันทำอยู่บ่อยๆ และตรงไปตรงมา อย่างที่ผู้อ่านส่วนใหญ่จะรู้ แต่การสร้างโฟลเดอร์ใหม่และการเริ่มต้นไฟล์ในนั้นอาจเป็นเรื่องที่น่าเบื่อหน่าย ดังนั้นฉันจึงดำเนินการตามกระบวนการนี้โดยอัตโนมัติ

วิดีโอด้านล่างแสดง Supercharge React ที่ใช้งานอยู่ เมื่อใช้ New Component ฉันสามารถระบุชื่อและตำแหน่งของส่วนประกอบใหม่ได้ จากนั้นส่วนขยายจะเรียกใช้สคริปต์ที่สร้างโฟลเดอร์และเริ่มต้นส่วนประกอบใหม่นี้

IntelliSense

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

สามารถปรับแต่ง IntelliSense เพิ่มเติมเพื่อให้เหมาะกับขั้นตอนการทำงานและความชอบส่วนตัวของคุณ

แป้นพิมพ์ลัด

ฉันแน่ใจว่าคุณใช้ทางลัดเช่น Ctrl+S และ Ctrl+F ทั้งหมดนี้ได้รับการบันทึกไว้เป็นอย่างดี และถ้าคุณไม่คุ้นเคยกับทางลัดที่หลากหลายของ VSCode มากเกินไป เราขอแนะนำให้คุณเปลี่ยนสิ่งนี้และดำเนินการให้มากขึ้นเพื่อให้เชี่ยวชาญ การผูกมัดบางอย่าง clunky เกินไป? คำสั่งที่คุณเรียกมักจะใช้เวลานานเกินไปในการพิมพ์? เปิดตัวแก้ไขแป้นพิมพ์ของ VSCode เพื่อสร้างทางลัด

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

ทางลัดของเมาส์

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

ฉันไม่เพียงแต่ใช้เมาส์อย่างแข็งขันเท่านั้น แต่ยังปรับแต่งให้เหมาะกับเวิร์กโฟลว์ของฉันโดยใช้ Logitech Options ฉันตั้งโปรแกรมแป้นพิเศษบนเมาส์เพื่อดำเนินการคำสั่งบางอย่างใน VSCode

นี่คือวิธีที่คุณสามารถ "สอน" เมาส์ของคุณให้ทำมากกว่าแค่เลื่อนเคอร์เซอร์แล้วคลิก:

1. เลือก VSCode จากเมนูด้านบนขวา
2. คลิกที่ปุ่มที่คุณต้องการปรับแต่ง
3. เลือก การกำหนดการกดแป้นพิมพ์ จากรายการการดำเนินการทางด้านซ้าย
4. ป้อนทางลัดที่กำหนดไว้ล่วงหน้าใน VSCode

การตั้งค่าสำรองและซิงค์ข้อมูล

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

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

ส่วนขยาย VSCode ที่แนะนำ

ฉันได้กล่าวถึงส่วนขยายหลายตัวแล้วและอธิบายว่าฉันใช้งานอย่างไร ต่อไปนี้คือข้อสังเกตเด่นบางประการ:

• เซอร์ราวด์: ต้องการห่อโค้ดที่เลือกไว้ในฟังก์ชันลูกศรหรืออาจเป็นบล็อก try-catch หรือไม่? ส่วนขยายนี้จะทำเพื่อคุณ!
• ค้นหา node_modules: แม้ว่าคุณจะไม่ได้แยก node_modules จากตัวสำรวจของ VSCode เพื่อการเพิ่มประสิทธิภาพ โฟลเดอร์นั้นก็ใหญ่มากจนไม่สามารถนำทางได้ ส่วนขยายนี้ช่วยให้คุณค้นหาสิ่งที่ต้องการแทนการเลื่อนไปมาไม่รู้จบ
• Glean และ React Refactor มีเครื่องมือ refactoring ที่มีประโยชน์สำหรับไฟล์ JSX ของคุณ
• แท็กปิดอัตโนมัติจะเพิ่มแท็กปิดสำหรับไฟล์ HTML/JSX/TSX โดยอัตโนมัติ
• File Utils: วิธีที่สะดวกในการสร้าง ทำซ้ำ ย้าย เปลี่ยนชื่อ และลบไฟล์และไดเร็กทอรี มันยังปรับแต่งได้
• JavaScript Booster ดำเนินการปรับโครงสร้างทั่วไปบางอย่างโดยอัตโนมัติ

สรุป

อย่าเป็นผู้ใช้ทั่วไป เป็นผู้ใช้ที่มีอำนาจแทน ก้าวไปไกลกว่าคนอื่นเสมอและดูว่าจะพาคุณไปที่ใด จดบันทึกความไร้ประสิทธิภาพไว้เสมอและพยายามบรรเทา

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

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

เพื่อให้ง่ายขึ้น ฉันได้รวบรวมรายการส่วน ที่ต้องอ่านของเอกสารนี้:

• เคล็ดลับและคำแนะนำ: บางอย่างชัดเจนและคุณอาจรู้อยู่แล้ว แม้ว่าฉันจะรับประกันได้ว่าคุณจะพบสิ่งที่คุณไม่รู้จัก
• การแก้ไขแฮ็ก: การแฮ็กการแก้ไขเหล่านี้มีประสิทธิภาพอย่างไม่น่าเชื่อ และการเรียนรู้แฮ็กเหล่านี้จะเป็นประโยชน์กับคุณทุกวัน
• ย่อ/ขยายโค้ด: ลองใช้ทางลัดนี้เมื่อคุณจับคู่กับผู้พัฒนารายอื่น เพื่อสร้างความประทับใจให้พวกเขา!
• การโยงคีย์: เรียนรู้ว่าการโยงคีย์ทำงานอย่างไรและจะปรับแต่งได้อย่างไร นี่เป็นหนึ่งในเสาหลักของการเรียนรู้ IDE ของคุณ
• รองรับภาษาการเขียนโปรแกรมหลายร้อยภาษา: เรียนรู้ว่า VSCode มีคุณลักษณะเฉพาะใดบ้างสำหรับภาษาที่คุณเลือก