COOL IT IDEAS AND STUFF

จากผลสำรวจ StackOverflow’s 2019 Developer Survey พบว่า Web Developer กว่า 55 เปอร์เซ็นต์ ใช้ Visual Studio Code การพัฒนาโดยใช้ Electron.js (ก่อนหน้านี้เรียกว่า Atom Shell เพราะเป็นเทคโนโลยีที่ขับเคลื่อน Atom Text Editor) ผ่าน VS Code ที่เป็น Source Code Editor ที่เต็มไปด้วย Feature ที่สามารถทำสิ่งต่าง ๆ ได้มากมาย และที่มันได้รับความนิยมมากก็เพราะ ความสามารถในการ Customize สิ่งต่าง ๆ ได้มากมายผ่าน Extensions และต่อไปนี้เป็น 7 VS Code Extensions ที่ช่วยทำให้ชีวิตคุณง่ายขึ้น โดยมีคุณ Jason Gomez เป็นเจ้าของบทความ

VS Code โดยหลัก ๆ แล้วถูกต้องสร้างขึ้นโดยใช้ Typescript และ Editor ของมันก็รองรับ JavaScript อีกด้วย แต่อย่างไรก็ตามยังมีหลายภาษา Extensions ที่พัฒนาความสามารถในหอีกหลาย ๆ ด้านของ Editor ตัวนี้ ภาษา Extensions ที่ได้รับความนิยมก็มีทั้ง Ruby, Python, C/C++ และ Java หากคุณเขียน Code โดยใช้ภาษาเหล่านั้น แน่นอนว่ามี Extensions อยู่ด้วย

ภาษา Extensions มีความยอดเยี่ยม ไม่เพียงเพิ่ม Feature พื้นฐานอย่าง Code Completion และ Syntax Highlighting แต่ยังช่วยให้คุณสามารถใช้ประโยชน์จาก Built-in Debugger ของ VS Code อีกด้วย นั่นหมายความว่า คุณจะสามารถกำหนด Breakpoints และสามารถเข้าไปดู Code ของคุณ ดูค่าของตัวแปร และการเรียกใช้ Method ได้

ในทำนองเดียวกัน ยังมีหลาย Extensions สำหรับ Frameworks/Libraries อย่าง React, jQuery เป็นต้น ประโยชน์ของ Extensions เหล่านี้ จะมีความแตกต่างกันไป แต่คุณสามารถคาดหวังได้ว่าจะมี Snippets ที่เป็นประโยชน์ซึ่งจะช่วยเพิ่มความเร็วในการเขียน Code ของคุณ

Themes/Icon Packs

คุณกำลังจะใช้เวลาไปมากมายในการดู Text Editor ของคุณและอาจทำให้มันดูดีที่สุดเท่าที่จะทำได้ VS Code ได้จัดเตรียม Themes และ Icon Packs จาก Extensions Tab ของมัน คุณสามารถพิมพ์ @category:themes ลงใน Search Bar คุณก็จะพบกับพวกมันทั้งหมด นานมาแล้วที่ Jason เคยใช้งาน Andromeda by Eliver Lara เขายังคงรู้สึกทึ่งกับ Material Ocean High Contrast Theme by Mattia Astorino อยู่ และ Mattia Astorino ก็ยังคงมี Icon Packs ติดอยู่กับ Themes เหล่านั้นอยู่ 

สำหรับ Icon Pack ที่ Jason ชอบก็คือ Material Icon Theme by Philipp Kief เพราะมันรองรับ File และ Folder Extensions ที่หลากหลาย ต้องขอบคุณ Philipp อย่างมากที่ทำให้เขาแทบไม่ต้องไปไล่ดู File Extensions หรืออ่านชื่อ Folder อีกต่อไป Folder/File Icons แตกต่างกันมากพอที่จะบอกได้ว่า เขากำลังทำงานอะไรอยู่ได้อย่างรวดเร็ว

1. Better Comments โดย Arron Bond

หากคุณเชื่อว่า ทุกคนควรมีการ Comment ไว้ใน Code ของพวกเขาแล้วละก็ ต้องขอแนะนำ Extension นี้ ไม่ว่าจะเพื่อตัวคุณเองหรือใครก็ตาม การ Comment จะช่วยทำให้สามารถติดตามและเข้าใจ Code ได้ง่ายขึ้น โดย Better Comments Extension จะช่วยให้ทำให้ Comment ดูสะดวกขึ้นด้วยการใส่สีลงไปใน Code ได้ สิ่งนี้จะช่วยให้คุณสามารถจัดหมวดหมู่ Comment ของคุณและแบ่งยากตามสีของพวกมันได้ อย่าง Jason เองเขาใช้ สีเขียวสำหรับการ Comment ทั่วไป, สีน้ำเงินสำหรับ Return Values, สีส้มสำหรับ Todos และสีแดงสำหรับ Warnings ต่าง ๆ ซึ่ง Extension สามารถกำหนดค่าได้อย่างมากภายในไฟล์ settings.json และแม้ว่า Better Comments อาจจะดูเหมือนเป็น Extension ธรรมดาทั่วไป แต่ Jason ก็ใช้งานมันอยู่ทุกวัน

2. Bracket Pair Colorizer โดย CoenraadS

เป็นอีกหนึ่ง Extension ที่มีประโยชน์ โดยค่า Default แล้ว Bracket Pair Colorizer จะกำหนดสีให้กับ {}, [] และ () ซึ่งมี 3 สีที่แตกต่างกันไป สิ่งนี้ทำให้ง่ายต่อการมองเห็นวงเล็บปิดที่ขาดหายไป และเพื่อดูว่าคุณอยู่ใน Method ที่ซ้อนกันอยู่มากน้อยเพียงใด Extension นี้ยังสามารถกำหนดค่าได้อย่างมาก, อนุญาตให้คุณเพิ่มสีอื่น ๆ ได้, แสดงวงเล็บบนบรรทัดที่มีลำดับเลข และ Highlight วงเล็บที่ที่คู่กัน และนี่ก็เป็นอีกหนึ่ง Extension ที่ง่ายในการติดตั้งอีกด้วย

3. ES Lint โดย Dirk Baeumer

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

Extension ที่มีประโยชน์นี้ จะช่วยให้คุณสามารถ Integrate ESLint เข้ากับ VSCode ได้ คุณจำเป็นต้องติดตั้ง ESLint ทั้งระดับ Local และ Global โดยใช้ npm install eslint หรือ npm install -g eslint จากนั้นคุณจะต้องสร้าง Configuration File หลังจากนั้นคุณก็มีหลาย Option ที่สามารถกำหนดค่าในไฟล์ settings.json ได้แล้ว

4. Path Intellisense โดย Christian Kohler

จากชื่อของมัน Path Intellisense เพิ่ม Intelligent Autocomplete เมื่อคุณต้องการเชื่อมโยงไปยัง File หรือ Folder อื่น ๆ อย่าง Jason เองก็ใช้ Path Intellisense เพราะมันเร็วกว่า และเขาก็สามารถหลีกเลี่ยงข้อผิดพลาดที่อาจเกิดขึ้นจากการพิมพ์ผิด

5. Git Lense โดย Eric Amodio

ด้วยจำนวนการ Download มากกว่า 17 ล้านครั้ง Git Lense เป็นหนึ่งใน Extension ที่ได้รับความนิยมสูงสุดใน VS Code โดย Extension นี้จะช่วยขยายความสามารถของ VS Code กับ Git มันจะช่วยให้คุณเห็นเมื่อ Code แต่ละบรรทัดถูก Commit พร้อมกับ Commit Message และเวลา ซึ่ง Feature นี้ เหมาะอย่างยิ่งสำหรับการดูว่า ใครเป็นคนสุดท้ายที่ Edit หรือเขียน Code บรรทัดนั้น

Git Lense ยังช่วยให้คุณดูไปที่ Git Repository ของคุณได้จากภายใน VS Code ของคุณ คุณสามารถเห็นทุก Branches, Contributors หรือ Starches ใด ๆ ที่ที่คุณทำ คุณสามารถเปรียบเทียบ Branch ต่าง ๆ รวมทั้งเปรียบเทียบความแตกต่างระหว่าง Branch ปัจจุบันของคุณ กับ VS Code

6. open in browser โดย TeachER

นี่คืออีก Extension ที่ออกแบบมาเพื่อช่วยประหยัดเวลาให้คุณ ซึ่ง open in browser ก็เป็นชื่อที่บอกตรง ๆ อยู่แล้วว่า อนุญาตให้คุณเปิด File บน Browser ได้ แทนที่จะ Copy Path ของ HTML File ลงใน Web Browser คุณสามารถคลิกเพื่อเปิดใน Browser หรือใช้ keyboard shortcut โดยพิพมพ์ alt + b เพื่อเปิด File โดยอัตโนมัติใน Default Web Browser ของคุณ หรือคุณสามารถเลือกที่จะเปิด File ใน Browser อื่นที่ไม่ใช่ตัว Default ของคุณได้

7. Keymaps

Keyboard shortcuts ถือเป็นตัวช่วยประหยัดเวลา ความสามารถในการใช้งานหลาย ๆ Function ได้อย่างรวดเร็วโดยไม่ต้องใช้ Mouse ถือเป็นสิ่งที่ยอดเยี่ยม น่าเสียดายที่การเรียนรู้สิ่งเหล่านี้ตั้งแต่ต้นอาจต้องใช้เวลา หากคุณได้เรียนรู้การใช้งานปุ่มลัดของ Text Editor ต่าง ๆ คุณอาจไม่ต้องเรียนรู้ Keyboard Shortcuts สำหรับ Function เดียวกันใหม่อีกครั้ง

VS Code ทำให้การ Import การตั้งค่าและปุ่มกดของคุณง่ายขึ้น ซึ่ง Sublime Text Keymap & Settings Importer, Atom Keymap รวมทั้ง Notepad++ keymap ของ Microsoft จะช่วยให้คุณสามารถใช้ Keyboard Shortcuts ส่วนใหญ่ที่คุณรู้จักและชื่นชอบได้ทันที หากคุณใช้ตัวอื่น ก็ยังมี 3^rd Party Extension ที่ครอบคลุมการใช้งานของคุณ นอกจากนี้ยังมีหลาย Themes ที่ใช้ Editors อื่น ๆ ที่คุณสามารถกำหนดค่า Syntax ของ Code ให้เหมือนกันได้

ที่มา:  https://medium.com/