บทความ IT เจ๋งๆ
VS Code Extensions เพื่อเพิ่ม Productivity ในการพัฒนา Web
18-ธ.ค.-19
คัมภีร์เทพ IT
VS Code เป็น Open-Source และ Cross-Platform Source Code Editor ที่ได้รับความนิยมมากตัวหนึ่ง โดยเฉพาะใน Web Development Community เนื่องจากมันทั้งรวดเร็ว, Extend ได้, Customize ได้และมี Features ต่าง ๆ มากมาย สำหรับบทความนี้จะบอกถึง VS Code Extensions เพื่อเพิ่ม Productivity ในการพัฒนา Web
ทำให้ Code อ่านง่ายและ Maintain ได้ง่าย
1. Bracket Pair Colorizer 2: Extension นี้จะช่วยให้คุณเห็นเครื่องหมายวงเล็บต่าง ๆ ด้วยสีที่แสดงให้เห็นอย่างชัดเจน
2. Indent Rainbow: เป็นการแสดงสีของการเยื้องแต่ละครั้ง และจะมีการสลับสีที่แตกต่างกันไปในแต่ละขั้น
3. AutoClose Tag และ Auto Rename Tag: Web Developer หลายคนต้องเคยเจอกับปัญหาในการพิมพ์ Tag กันมาพอสมควร ดังนั้น พวกเขาจึงต้องการ Tool ที่สามารถสร้าง Tag ต่าง ๆ ได้อย่างรวดเร็วและง่ายดาย
AutoClose จะสร้าง Closing Tag ให้ในขณะที่คุณพิมพ์ Opening Tag ส่วน Auto Rename นั้น เมื่อคุณเปลี่ยน Tag ใด ๆ แล้ว มันจะช่วยเปลี่ยน Closing Tag ของ Tag นั้นให้อัตโนมัติ
4. Indenticator: จะช่วยให้คุณเห็นการเยื้องใน Code ได้ชัดเจนยิ่งขึ้น โดยเฉพาะเมื่อคุณมี Code ที่ยาวมาก ๆ
5. VS Code Icons: Icons จะช่วยทำให้ Editor ของคุณมีความน่าสนใจมากยิ่งขึ้น
6. Dracula: Dracula เป็น Theme ที่น่าสนใจและขอแนะนำให้คุณลองใช้ดู
7. Prettier: Prettier จะทำให้ Style สอดคล้องกันโดยแยกวิเคราะห์ Code ของคุณและ Reprint ด้วย Rules ของตัวเอง Prettier สามารถพิมพ์ Code ไปได้เรื่อย ๆ เต็มความยาวของบรรทัดและสามารถ Wrap Code เมื่อจำเป็น
8. Path Intellisense: Extension นี้ เหมาะสมอย่างมากสำหรับการช่วย Autocomplete Filenames
9. ESLint หรือ TSLint: Tools นี้จะช่วยตรวจสอบ Code ให้และถือเป็น Tools ที่ “ต้องมี” ซึ่งจะช่วยให้ Code ของคุณสอดคล้องกันและช่วยลดการเกิด Bugs ได้อีกด้วย
General Operations
1. Code Spell Checker: เป็นตัวที่ช่วยตรวจการสะกดคำพื้นฐานต่าง ๆ ที่ทำงานได้ดีกับ camelCase Code และขอแนะนำให้คุณใช้เป็นอย่างยิ่ง
2. Change-case: ช่วยเปลี่ยน Case ของคำที่กำลัง Select อยู่
3. Regex Previewer: จะแสดง Regular Expression ที่ Match กับ Document ซึ่งโดยทั่วไปจะเป็นการเพิ่ม Validation Checks
4. Partial Diff: ช่วยให้คุณเปรียบเทียบ Diff Text ที่กำลัง Select อยู่ภายใน File, ใน File อื่น ๆ หรือใน Clipboard
5. Copy With Line Numbers: ทำการ Copy บรรทัดที่ Select ด้วย หมายเลขบรรทัดและ File Path มันมีประโยชน์สำหรับ Pair Programming หรือทุกครั้งที่คุณต้องการความช่วยเหลือจากเพื่อนร่วมทีม มันทำให้ง่ายต่อการนำพวกเขาไปยัง Code นอกจากนี้ยังมีประโยชน์เมื่อเขียน Document
6. Paste Image: Paste รูปภาพโดยตรงจาก Clipboard ไปยัง Markdown, AsciiDoc หรือ File อื่น ๆ (คุณสามารถใช้มันใน Git README Files หรือสำหรับเขียน Documents ใน Markdown ก็ได้)
7. TinyPNG: Extension นี้ที่มีประโยชน์อย่างมาก สำหรับการบีบอัดภาพ jpg และ png โดยไม่ทำลายคุณภาพของรูปภาพแต่อย่างใด
8. Polacode: มันมีประโยชน์ในการสร้างภาพ Screenshots สำหรับ Code Snippets ของคุณ มันติดตั้งง่าย และคุณสามารถ Copy Code ส่วนที่ต้องการทำ Screenshot แล้ว Paste ลงใน Polacode จากนั้นคุณสามารถ Download มันเป็นรูปภาพได้
Debugging
1. Turbo Console.log: Extension นี้ ทำให้การ Debug ง่ายขึ้น โดยการดำเนินการแบบ Automate ของการเขียน Log Message ที่มีความหมาย
2. Debugger for Chrome: หากคุณใช้ JavaScript อยู่ สามารถ Debug มันใน Google Chrome Browser ได้
Version Control
1. Git Lens: GitLens จะช่วยเพิ่มขีดความสามารถของ Git ที่สร้างขึ้นใน Visual Studio Code มันอัดแน่นไปด้วย Features ต่าง ๆ ที่น่าทึ่ง เช่น การแสดง Authorship ผ่าน Code Lens, Commits Search, History และ GitLens Explorer คุณควรติดตั้งPlugin นี้ถ้าคุณทำงานกับ Git
Extension ที่คล้ายกับ Git Lens:
- Git History: แสดง Graph ที่สวยงามของ Commit History และอื่น ๆ อีกมากมาย
- Checkpoints: เก็บ Local History ชั่วคราวของ Commits ที่อยู่ระหว่างการดำเนินการ
- Git Blame: ช่วยให้คุณเห็นข้อมูล Git Blame ใน Status Bar ของบรรทัดที่กำลังเลือกอยู่ ซึ่งใน GitLens ก็มี Feature ที่คล้าย ๆ กันนี้เช่นกัน
- Git Indicators: ช่วยให้คุณเห็น File ที่ได้รับผลกระทบและดูว่ามีการเพิ่มหรือลดจำนวนบรรทัดใน Status Bar มากน้อยแค่ไหน
- Open in GitHub/Bitbucket/Gitlab/VisualStudio.com: ช่วยให้คุณเปิด Repo ใน Browser ได้ภายในคำสั่งเดียว
2. Version Lens: แสดงข้อมูลของ Package Version สำหรับ npm, jspm, DUB และ Dotnet Core ใน Visual Studio Code Editor
Markdown
1. Markdown Shortcuts: เป็น Shortcuts สำหรับการแก้ไข Markdown (คุณสามารถใช้มันสำหรับ README Files ได้)
2. Markdown Preview Enhanced: Live Preview Extension นี้จะช่วยให้คุณดู Markdown File ที่คุณแก้ไข ได้อย่างสะดวก
การวัดผล Productivity
1. WakaTime หรือ Code Time: Metrics, Insights และ Time Tracking จะถูกสร้างขึ้นโดยอัตโนมัติจากการเขียน Program ของคุณ
อื่น ๆ
1. Settings Sync: ช่วยให้คุณสามารถ Sync ทุกอย่างที่คุณ Customize ใน VS Code กับ Github จาก Settings ไปยัง Keyboard Shortcuts, ไปยัง VSCode Extension อื่น ๆ คุณจะสามารถเข้าถึง IDE ที่คุณต้องการจากอุปกรณ์ใดก็ตามที่คุณต้องการตั้ง Program แทนที่จะต้องตั้ง Program จาก Vanilla VS Code Environment บนอุปกรณ์ใหม่ หรือต้องตั้งค่าทุกอย่างด้วยตนเองอีกครั้ง
2. Project Manager: ช่วยให้คุณเปิด Window ใหม่ของ Git Repository ได้โดยตรงจาก VS Code Window โดยทั่วไปคุณสามารถเปิด Repository อื่น ๆ ได้โดยไม่ต้องออกจาก VS Code
3. Quokka.js: มันจะ Run Code ของคุณในทันทีที่คุณพิมพ์และแสดงผลของการ Execution ต่าง ๆ ใน Code Editor ของคุณ
4. TODO Highlighter: บางครั้งคุณลืมที่จะตรวจสอบ TODOs ที่คุณเพิ่มเข้าไปในขณะที่ Coding ก่อนที่จะเผย Publish Code ไปยัง Production ซึ่งมันจะช่วยเตือนความจำคุณให้รู้ว่า ยังมีสิ่งใดบ้างที่คุณยังไม่ได้ทำ
5. Import Cost: Extension นี้จะแสดงขนาดของ Package ที่ Import เข้ามา มันใช้ประโยชน์จาก Webpack ด้วย Babili-Webpack-Plugin ในการตรวจสอบขนาด
6. REST Client: REST Client จะช่วยให้คุณส่ง HTTP Requests และดู Responses ใน Visual Studio Code ได้โดยตรง
7. Live Server: จะทำการ Launch Local Development Server ด้วย Live Reload สำหรับ Static และ Dynamic Pages จาก Editor
8. Code Runner: จะช่วย Run Code ของคุณภายใน VS Code ซึ่งมันรองรับหลาย ๆ ภาษา Programming
9. Live Share: ช่วยให้คุณ Share Workspace ของคุณได้แบบ Realtime เช่น Live Editing ไปจนถึง ติดตาม Cursor ของ User, Group Debugging รวมทั้งอื่น ๆ อีกมากมาย มันมีประโยชน์อย่างยิ่งกรณีที่คุณทำงานแบบ Remote หรือเมื่อคุณต้องการทำงานร่วมกับคนอื่น ๆ ที่อยู่คนละสถานที่กัน
10. JSON to code: Convert JSON ของคุณไปยัง Interface ที่สามารถใช้งานได้ใน Strong-Typed Languages ในคำสั่งเดียว
11. Remote SSH: ช่วยให้คุณใช้ Remote Machine กับ SSH Server เป็น Development Environment ของคุณ สิ่งนี้สามารถทำให้การ Develop และการแก้ไขปัญหา ง่ายขึ้นอย่างมากในหลากหลายสถานการณ์
12. React Native/React/Redux snippets for es6/es7: หากคุณทำงานกับ React หรือ React Native หรือ JavaScript คุณสามารถใช้ Extension นี้ได้
คุณสามารถใช้ Extension เหล่านี้ได้ตามลักษณะงานที่คุณต้องใช้ โดยสามารถ Enable หรือ Disable มันได้เพื่อเป็นการช่วยประหยัดการใช้ Memory หากคุณต้องการใช้ Extension อื่น ๆ เช่น HTML, CSS, React, React Native, Node, Python และอื่น ๆ สามารถดูได้โดยตรงใน Visual Studio Marketplace
ที่มา: https://medium.com/
ดูตำแหน่งงานที่ใช้ทักษะ JavaScript ได้ที่นี่
รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert
|
|
อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ
|
|
บทความล่าสุด