Contents

10 เคล็ดลับการเพิ่มผลผลิตที่จำเป็นสำหรับ Visual Studio Code

Visual Studio Code เป็นโปรแกรมแก้ไขข้อความการเขียนโปรแกรมที่ดีที่สุดอย่างง่ายดาย สำหรับหลาย ๆ คน มันมาแทนที่ Sublime Text เป็นตัวแก้ไขที่พวกเขาเลือก มันเป็นแอป JavaScript ที่ใช้อิเล็กตรอน แต่เร็วปานสายฟ้าและไม่มีปัญหาด้านประสิทธิภาพเหมือนกับแอป JavaScript อื่นๆ

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

เชี่ยวชาญ Command Palette ใน VS Code

/th/images/vscode-command-palette.jpg

Sublime Text และ TextMate รุ่นก่อน ทั้งคู่มียูทิลิตี้ที่น่าสนใจที่เรียกว่า “ชุดคำสั่ง” เครื่องมือที่เป็นนวัตกรรมใหม่นี้ช่วยให้ผู้ใช้ดำเนินการคำสั่งต่างๆ ได้อย่างรวดเร็วผ่านการป้อนข้อมูลด้วยตนเอง ช่วยลดความจำเป็นในการนำทางที่ยุ่งยากด้วยเคอร์เซอร์หรือเมาส์

การใช้ชุดคำสั่งช่วยให้เวิร์กโฟลว์มีประสิทธิภาพมากขึ้นเมื่อนำทางผ่านงานต่างๆ ภายในสภาพแวดล้อมการเขียนโปรแกรมของคุณ ด้วยการใช้แป้นพิมพ์ลัด Control + Shift + P หรือ Command + Shift + P เราสามารถเข้าถึงรายการการกระทำที่มีอยู่มากมายซึ่งจัดหมวดหมู่ภายใต้หัวข้อต่างๆ เช่น “ไฟล์” “Git” “Terminal” และอื่นๆ อีกมากมาย ฟังก์ชั่นของพาเล็ตช่วยให้ผู้ใช้สามารถป้อนการกระทำที่ต้องการได้โดยเพียงพิมพ์ออกมา ขณะเดียวกันก็อัปเดตตัวเลือกที่แสดงแบบเรียลไทม์ สิ่งนี้จะช่วยเพิ่มความคล่องตัวให้กับกระบวนการค้นหาและดำเนินการฟังก์ชันเฉพาะ เพิ่มประสิทธิภาพการผลิตโดยรวม

ตั้งค่าโฟลเดอร์โครงการทำงาน

/th/images/project-directory-set-vs-code.jpg

เมื่อคลิกที่"Explorer"ภายในแถบนำทางด้านข้าง แผงใหม่จะปรากฏขึ้น แผงดังกล่าวประกอบด้วยสองส่วนที่แตกต่างกันซึ่งสามารถเข้าถึงได้โดยการคลิกที่เมนูจุดไข่ปลาและเลือก"Open Editor"หรือโดยให้แสดงเป็นตัวเลือก ส่วนเหล่านี้เรียกว่า"Open Editor"ซึ่งแสดงรายการไฟล์และเอกสารที่เปิดอยู่ในปัจจุบัน และ"ไม่มีโฟลเดอร์ที่เปิดอยู่"มันเป็นสิ่งหลังที่ดึงดูดความสนใจของเรา

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

ดูหลายไฟล์พร้อมกัน

/th/images/viewing-files-side-by-side-vs-code.jpg

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

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

การผสมผสานฟังก์ชันใหม่ที่เรียกว่า"แผงไดนามิก"แอปพลิเคชันจะปรับความกว้างของแผงเอกสารที่เปิดอยู่อย่างชาญฉลาด หากขนาดไม่เพียงพอสำหรับการดูที่สะดวกสบายในขณะที่เพ่งความสนใจไปที่เอกสารดังกล่าว การปรับปรุงที่ใช้งานง่ายนี้อาจพิสูจน์ได้ว่าน่าสนใจเป็นพิเศษสำหรับผู้ใช้ที่รักษาความละเอียดหน้าจอไว้ที่ประมาณ 720p

แก้ไขหลายบรรทัดพร้อมกัน

/th/images/multiple-cursors-vs-code.jpg

วิธีหนึ่งคือการสร้างพอยน์เตอร์หลายตัวโดยใช้แป้นพิมพ์ลัดโดยกดปุ่ม “Alt” พร้อมกัน (หรือ “Option” สำหรับผู้ใช้ Mac) ในการจัดการเหตุการณ์ต่างๆ ที่เกิดขึ้นในเอกสารอย่างมีประสิทธิภาพ เมื่อคลิกที่ตำแหน่งต่างๆ ภายในข้อความ ตัวชี้เพิ่มเติมเหล่านี้จะถูกสร้างขึ้นทุกครั้งที่แตะ ช่วยให้แก้ไขได้สะดวกยิ่งขึ้นเมื่อจัดการกับข้อความที่กว้างขวาง

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

ไปที่คำจำกัดความ

/th/images/go-to-definition-vs-code.jpg

เมื่อพบตัวแปรหรือวิธีการที่ไม่คุ้นเคยระหว่างการเขียนโปรแกรมหรือการเขียนสคริปต์ เราสามารถใช้ตัวเลือกที่สะดวกอย่างใดอย่างหนึ่งจากสองตัวเลือกได้ ประการแรก โดยการวางเคอร์เซอร์ไว้เหนือองค์ประกอบดังกล่าวแล้วกด F12 ผู้ใช้จะถูกส่งไปยังคำจำกัดความที่เกี่ยวข้องทันที ประการที่สอง การเลือกเอนทิตีที่ต้องการผ่านแป้นพิมพ์ลัด เช่น กดปุ่ม Control (Windows) หรือ Command (Mac) ค้างไว้ขณะคลิก จะนำผู้ใช้ไปยังคำจำกัดความที่ต้องการ

อีกทางหนึ่งอาจใช้แป้นพิมพ์ลัดที่สะดวกสบายในการกดปุ่ม"Alt"บวกกับปุ่ม"F12"หรือปุ่ม"Cmd"พร้อมกับปุ่ม"F12"บนคอมพิวเตอร์ Mac เพื่อเข้าถึงคำจำกัดความโดยไม่ต้องเปิดภายใน เอกสารต้นฉบับ คุณลักษณะนี้นำเสนอคำจำกัดความใต้ตำแหน่งของเคอร์เซอร์โดยตรงเพื่อความสะดวกและมีประสิทธิภาพยิ่งขึ้น

หากต้องการค้นหาตัวแปรหรือวิธีการแบบย้อนกลับ อาจใช้แป้นพิมพ์ลัดโดยกด"Shift + F12"การดำเนินการนี้จะแสดงอินสแตนซ์ทั้งหมดของเอนทิตีที่เลือกภายในโค้ดเบส รวมถึงอินสแตนซ์ที่ปรากฏที่ตำแหน่งเคอร์เซอร์ปัจจุบัน

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

เปลี่ยนชื่อรายการทั้งหมด

/th/images/rename-symbol-vs-code.jpg

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

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

หากต้องการแก้ไขข้อความภายในเอกสารปัจจุบันเพียงอย่างเดียว ให้ใช้ชุดแป้นพิมพ์ซึ่งประกอบด้วย Ctrl/Cmd + F2 เมื่อทำเช่นนั้น Visual Studio Code จะวางเคอร์เซอร์ไว้ข้างแต่ละอินสแตนซ์ทั่วทั้งไฟล์

ค้นหาไฟล์จำนวนมาก

/th/images/searching-across-working-directory-vscode.jpg

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

กดปุ่ม"Ctrl"หรือ"Command"ค้างไว้แล้วกด"F"เพื่อค้นหาคำเฉพาะภายในเอกสารปัจจุบัน ในขณะที่กดปุ่ม"Shift"และ"Cmd"หรือ"Control"พร้อมกันตามด้วยตัวอักษร"F” ช่วยให้สามารถค้นหาอย่างกว้างขวางทั่วทั้งเนื้อหางานที่ครอบคลุมภายในโปรเจ็กต์การทำงานปัจจุบัน รวมถึงไดเร็กทอรีย่อยที่ซ้อนกันทั้งหมด

ใช้ Command Line ใน VS Code

/th/images/integrated-terminal-vscode.jpg

VS Code มอบอินเทอร์เฟซเทอร์มินัลแบบรวมที่อนุญาตให้ผู้ใช้เข้าถึงเครื่องมือบรรทัดคำสั่งและดำเนินการคำสั่งภายในโปรเจ็กต์ของตน ลักษณะของเทอร์มินัลจะขึ้นอยู่กับระบบปฏิบัติการของผู้ใช้ บน Windows จะแสดงเป็น Command Prompt ในขณะที่บน macOS และ Linux จะแสดงเป็นพรอมต์ Bash ไม่ว่าระบบปฏิบัติการจะเป็นแบบใดก็ตาม เทอร์มินัลจะเปิดขึ้นในไดเร็กทอรีของโปรเจ็กต์การทำงานปัจจุบัน โดยมีเงื่อนไขว่าต้องมีอยู่แล้ว หรือตั้งค่าเริ่มต้นเป็นโฟลเดอร์หลักของผู้ใช้

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

ติดตั้งธีมใหม่ในรหัส VS

/th/images/changing-themes-vs-code.jpg

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

คุณสามารถค้นหาธีมใหม่ๆ ได้ใน VS Code Marketplace (ฟรี) หรือคุณสามารถค้นหาธีมเหล่านั้นได้โดยตรงใน VS Code ตรวจสอบรายชื่อธีม VS Code ที่ดีที่สุดของเราในกรณีที่คุณต้องการคำแนะนำ

ติดตั้งส่วนขยายของบุคคลที่สามในรหัส VS

/th/images/vscode-extensions-marketplace.jpg

ฟีเจอร์สำคัญสุดท้ายที่ต้องเน้นคือความสามารถในการขยายของ VS Code ผ่านส่วนขยายของบุคคลที่สาม เช่นเดียวกับธีม คุณสามารถค้นหาได้ใน VS Code Marketplace (ใช่ ธีมเหล่านี้ฟรีเช่นกัน) หรือคุณสามารถค้นหาได้ใน VS Code เข้าถึงแผงส่วนขยายด้วยแป้นพิมพ์ลัด Ctrl \+ Shift \+ X (หรือ Shift \+ Cmd \+ X )

ส่วนขยายทำหน้าที่เป็นวิธีการสำคัญในการเพิ่มประสิทธิภาพภายใน Visual Studio Code พื้นที่เก็บข้อมูลนี้ประกอบด้วยเครื่องมือมากมาย เช่น โค้ดลินเตอร์ ตัวดีบั๊ก ตัวจัดการตัวอย่าง การเพิ่มประสิทธิภาพสำหรับสภาพแวดล้อมการพัฒนาแบบผสานรวม (IDE) เครื่องมือก่อสร้าง และแม้แต่ส่วนเสริมบางตัวที่ใช้ประโยชน์จาก ChatGPT เพื่ออำนวยความสะดวกในการปรับปรุงกระบวนการเขียนโปรแกรมภายใน VS Code

Visual Studio Code เป็นโปรแกรมแก้ไขข้อความที่ดีที่สุด

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

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