บทความ IT เจ๋งๆ

วิธีเรียกดู GitHub Repos อย่างรวดเร็วด้วย VSCode

23-เม.ย.-21

คัมภีร์เทพ IT

การเรียกดู Projects ต่าง ๆ ใน GitHub ถือเป็นสิ่งที่ Software Developer ทำกันอยู่เป็นประจำอยู่แล้ว ซึ่ง GitHub เองก็พยายามปรับปรุงประสบการณ์การใช้งาน Web ด้วย Features ใหม่ ๆ อย่างต่อเนื่อง โดยในบทความนี้ก็จะมาบอกถึง วิธีเรียกดู GitHub Repos อย่างรวดเร็วด้วย VSCode

นี่คือ Features ที่เป็นที่นิยมใน GitHub:

  • การจัดการ Files บน GitHub
  • การ Navigate Code บน GitHub
  • การสร้าง Files ใหม่
  • การเพิ่ม File ลงใน Repository
  • การย้าย File ไปยัง Location ใหม่
  • การ Edit File ใน Repository ของคุณ
  • การ Edit File ใน Repository ของ User รายอื่น
  • การ Track การเปลี่ยนแปลงใน File
  • การ Delete File ใน Repository
  • การ Rename File
  • รับ Permanent Links เพื่อไปยัง File

ซึ่ง Features เหล่านี้ยอดเยี่ยมและมีประโยชน์อย่างมาก แต่อย่างไรก็ตามคิดว่า 90% ของเวลาที่เราใช้งาน มักต้องการเพียงแค่เรียกดู Code เป็นหลัก

นั่นคือเหตุผลที่ว่าทำไม GitHub ถึงสร้าง Navigating Code Features ขึ้นมา มันทำงานอย่างไร มันใช้ Tree-Sitter อยู่ภายใน มันเป็น Parser Generator Tool และ Incremental Parsing Library เพื่อสร้าง Syntax Tree ที่จะช่วยให้คุณสามารถ Navigate ไปมาระหว่าง Files ต่าง ๆ ได้ ลองอ่านที่นี่เพื่อดูรายละเอียดในเชิงลึกเกี่ยวกับ Tree-Sitter

เมื่อมีการวาง Mouse เหนือตัวแปร จะทำให้เห็น Insights เกี่ยวกับ Code และมี Links ไปยัง Source ของ File มันทำให้ง่ายต่อการ Navigate ระหว่าง Files ต่าง ๆ ใน Project เดียวกัน ถึงมันจะมีประโยชน์ แต่ก็ยังไม่เพียงพออยู่ดี มันยังอยู่ในขั้นเริ่มต้นและ Tool ก็ยังไม่สมบูรณ์แบบนัก

นั่นหมายความว่า มีหลายครั้งที่คุณจะต้อง Download ตัว Copy ของ Repository เพื่อเปิดมันใน Integrated Development Environment (IDE) ที่คุณอยากใช้ แต่บาง Repositories ก็ค่อนข้างหนักกว่า Repositories อื่น ๆ และมันก็คงไม่ค่อยดีนักที่ต้อง Download Source Code ออกมา

คำถามคือ ยังมีวิธีอื่นอีกไหม ที่คุณไม่ต้อง Download Repository แล้วยังสามารถเรียกดู Code ใน IDE ได้?

Github1s ถือเป็นตัวช่วยสำคัญ

Github1s ถูกสร้างขึ้นเมื่อไม่นานมานี้ ซึ่ง 1s ย่อมาจาก One Second (1 วินาที) ซึ่ง Github1s จะช่วยให้คุณสามารถเรียกดู GitHub Repo โดยใช้ Visual Studio Code นั่นเอง

การทำงานของมันเรียบง่ายมาก: เพียงแค่เพิ่ม 1s ลงใน GitHub Domain เท่านั้น อย่างเช่น หากคุณกำลังเรียกดู GitHub Repo นี้:

https://github.com/storybookjs/storybook

เพิ่ม 1s เข้าไป แล้วมันจะกลายเป็น:

https://github1s.com/storybookjs/storybook

มันสามารถใช้งานกับ Repo ต่าง ๆ ได้ ซึ่งคุณสามารถลองดูจากตัวอย่างได้ที่นี่

เรามาดูผลลัพธ์กัน:

ตอนนี้คุณสามารถ Navigate Code โดยใช้ Visual Studio Code ได้แล้ว อย่างไรก็ตาม โปรดทราบว่าคุณจะไม่สามารถทำการ เปลี่ยนแปลง File, ใช้ Plugins, Debug Code หรือ Push Code ได้ เนื่องจากมันเป็นเพียง Read-Only Tool สำหรับใช้ในการเรียกดู Code เท่านั้น

แล้วมันทำงานอย่างไร

Github1s ได้รับแรงบันดาลใจจาก Code Server Project ซึ่งจะช่วยให้คุณ Run VS Code บน Computer เครื่องใดก็ได้และเข้าถึงพวกมันได้ใน Browser นั่นเป็นเพราะ VS Code สามารถถูกสร้างขึ้นสำหรับ Browser โดยคุณสามารถใช้งาน Github1s ได้บน VS Code 1.52.1

Project นี้กำลังได้รับความนิยมอย่างมาก โดยมันได้รับความนิยมกว่า 13k Stars ไปแล้ว

เรามาดูกันว่า ในเชิงลึกแล้ว มันทำงานอย่างไรจากคำอธิบายโดยละเอียดด้านล่างนี้:

“ด้วยความสามารถในการ Extend ของ VS Code ที่มีประสิทธิภาพและมีความยืดหยุ่น ทำให้เราสามารถใช้ VS Code Extension ที่มีความสามารถในการ Custom File IO โดยใช้ FileSystemProvider API ได้อย่างง่ายดาย มันมี Official Demo ที่ชื่อ vscode-web-playground ซึ่งมีการแสดงถึงวิธีการใช้งานของมัน

ในทางกลับกัน GitHub ก็มี REST API ที่มีประสิทธิภาพ ซึ่งสามารถใช้กับงานที่หลากหลายได้ รวมถึงการอ่าน Directories และอ่าน Files ได้อย่างไม่ต้องสงสัย

จากข้างต้น จะเห็นได้ชัดว่า แนวคิดหลักของ GitHub1s ก็คือ การใช้ VS Code Extension (รวมถึง FileSystemProvider) โดยใช้ GitHub REST API

….

GitHub1s เป็น Static Web App ดังนั้น เราจึงสามารถ Deploy มันบน GitHub Pages (gh-pages branch ของ Repository นี้) ได้และคุณสามารถใช้งานมันได้แบบฟรี ๆ สำหรับ Service ของ GitHub1s ก็มีความน่าเชื่อถือ (GitHub ก็มีความน่าเชื่อถือมาก) เนื่องจากไม่เห็นมีใครที่ต้องจ่ายค่าบริการ Web Hosting” - github.com/conwnet/github1s

ดังที่เห็นในคำอธิบายข้างต้นแล้ว ว่ามันมีความน่าเชื่อถือ เนื่องจากมันใช้เฉพาะ Static Page ของ Endpoints ของ GitHub อย่างไรก็ตาม ในขณะที่คุณใช้ API ของพวกมัน ก็โปรดจำไว้ว่า:

  • สำหรับ Unauthenticated Requests, อัตราขีดจำกัดของ GitHub จะอนุญาตให้มี Request ได้สูงสุด 60 Requests ต่อชั่วโมง
  • สำหรับ API Requests ที่ใช้ Authentication, คุณสามารถสร้าง Request ได้มากถึง 5,000 Requests ต่อชั่วโมง

ทำ Process ให้เป็นแบบ Automate ได้อย่างไร

มีอยู่ไม่กี่ Tools ที่คุณสามารถใช้เพื่อทำให้ Tasks ที่คุณมักทำอยู่บ่อย ๆ ให้เป็นแบบ Automate ซึ่งตัวเลือกที่น่าสนใจก็คือ Alfred มันเป็น Application สำหรับ macOS ซึ่งช่วยเพิ่มประสิทธิภาพของคุณด้วย Hotkeys, Keywords และ Text Expansion

เราสามารถสร้าง Command ได้อย่างง่ายดายเพื่อให้สามารถเปิด Github1s ให้เราได้ มาดูกันว่าเราจะสร้าง Shortcut ได้อย่างไรบ้าง:

  • เปิด Alfred
  • ค้นหา Preferences
  • ไปที่ Custom Searches Tab
  • คลิกที่ปุ่ม +
  • เพิ่ม Alias + Name + Web URL

ตอนนี้คุณสามารถใช้ Alfred Alias เพื่อเข้าถึง Function การทำงานของ Github1s ได้แล้ว

ที่มา:  https://betterprogramming.pub/

 

 

รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert

 

อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ

เพิ่มเพื่อน

 

บทความล่าสุด

ประเภทบทความ