COOL IT IDEAS AND STUFF

See the original english version Click here!

 

Programming มีความซับซ้อน มี Best Practices ที่ควรจดจำอยู่มากมาย และดูเหมือน Development Process ในปัจจุบันก็มีการพึ่งพาการทำ Automate อยู่พอสมควร ซึ่งแน่นอนว่ามันเพิ่มความสะดวกให้ Developer ในบทความนี้จะกล่าวถึง 7 VSCode Automations สำหรับ Frontend Developers

1. Live Server

โดยปกติแล้วเมื่อคุณทำการแก้ไข Code คุณจะต้อง Refresh Browser ของคุณด้วยตนเองเพื่อดูการเปลี่ยนแปลงใช่ไหม กล่าวอีกนัยหนึ่งคือหากคุณทำการเปลี่ยนแปลงแก้ไข Code 100 ครั้ง คุณต้อง Refresh Browser 100 ครั้งด้วย ซึ่งคุณคงรู้สึกเหนื่อยและใช้เวลานาน

Live Server เป็น Extension สุดเจ๋งที่มีอยู่ใน VSCode ซึ่งมันจะช่วยแก้ปัญหาข้างต้นให้คุณโดยอัตโนมัติ

"มันจะช่วยลดปริมาณงานของคุณจากการ Save และ Refresh Browser ทุกครั้งที่คุณต้องการดูว่า สิ่งที่คุณเปลี่ยนแปลงไป มันมีผลเป็นอย่างไร"

Live Reload ซึ่งเป็น Feature ที่ยอดเยี่ยมที่มาพร้อมกับ Live Server มันช่วยให้มั่นใจได้ว่าการเปลี่ยนแปลงของคุณ จะถูกแสดงผลทันทีที่คุณ Save งานของคุณ สิ่งนี้จะน่าตื่นเต้นยิ่งขึ้นหากคุณเปิดใช้งาน Auto-Save Feature ของ VSCode คุณคิดว่ามันยอดเยี่ยมมากใช่ไหม? 

2. Turbo Console Log

คุณเคยรู้สึกว่า จำเป็นต้องทำการ Automate ให้ Process การเขียน Log Messages บ้างหรือไม่? Turbo Console Log ถือเป็นตัวเลือกที่ยอดเยี่ยม และด้วยความช่วยเหลือของ Turbo Console Log คุณสามารถจะ:

• Insert Log Messages ได้โดยอัตโนมัติ
• Comment และ Uncomment Log Messages ทั้งหมดใน Document ปัจจุบันที่ถูก Insert โดย Extension
• ลบ Log Messages ทั้งหมดที่ถูก Insert โดย Extension จาก Document ปัจจุบัน

​

Tip: Build & Share Components ที่อิสระต่อกันด้วย Bit

Bit เป็น Tool ที่สามารถ Extend ได้มากเป็นพิเศษ ซึ่งช่วยให้คุณสร้าง Modular Applications ได้อย่างแท้จริงโดยมี Author, Version และ Maintained Components ที่เป็นของตัวเองเป็น Tool ที่สามารถ Extend ได้มากเป็นพิเศษ ซึ่งช่วยให้คุณสร้าง Modular Applications ได้อย่างแท้จริงโดยมี Author, Version และ Maintained Components ที่เป็นของตัวเอง

มันถูกใช้เพื่อสร้าง Modular Apps & Design Systems, Author และ Deliver Micro Frontends หรือเพียงแค่แชร์ Components ระหว่าง Applications

3. Live SASS Compiler

ตอนนี้มันเป็นไปได้ที่จะ Compile SASS หรือ SCSS Files ของคุณโดยอัตโนมัติลงใน CSS ได้อย่างง่ายดายและอยู่ใน Code Editor ในแบบ Real-Time ด้วย Live SASS Compiler และช่วยให้คุณดู Preview ของ App หรือ Compiled Styles ใน Browser ของคุณได้โดยอัตโนมัติ

Live SASS Compiler เป็น Extension ใน VSCode ที่มีประโยชน์ พร้อม Features เจ๋ง ๆ มากมายรวมถึง:

• Live SASS และ SCSS Compilation
• Quick Status Bar Control
• สามารถ Customize Extensions ได้ (.css หรือ. min.css)
• สามารถ Customize CSS Style ที่ถูก Export ได้ (Expanded, Compact, Compressed, Nested)
• File Location ที่สามารถ Customize ได้ของ CSS ที่ถูก Export

4. Auto Rename Tag

คุณเคยเปลี่ยนชื่อ HTML Tag แล้วเกิดลืม หรือเคย Rename Tag ผิดหรือไม่? ใน Application ที่มี Code หลายร้อยบรรทัด การ Update แบบ Manual อาจจะทำได้ยากและน่าเบื่อ

ในกรณีนี้คุณพอจะมี 2 ทางเลือก

คุณสามารถใช้เวลาที่มีค่าของคุณในการเขียน Code เพื่อพยายามหาว่า คุณทำผิดพลาดตรงไหน หรือ คุณเพียงแค่ Install Extension แล้วปล่อยให้มันช่วย Rename Tag ให้คุณ

Auto Rename Tag เป็น VSCode Extension ที่มีประโยชน์อย่างยิ่งสำหรับ Developers ซึ่งตามชื่อของมัน มันจะช่วย Rename Tag ที่ 2 ให้โดยอัตโนมัติเมื่อ Tag ตัวแรกได้รับการ Update รวมทั้งในทางกลับกัน

5. ESLint

Code Linting เป็น Static Analysis ที่ใช้เพื่อตรวจสอบ Programmatic Errors หรือ Code ที่ไม่เป็นไปตาม Style Guidelines ที่ต้องการ

“Linting Tools อย่าง ESLint จะช่วยให้ Developer สาสามารถพบปัญหาที่เกี่ยวกับ JavaScript Code ของพวกเขาได้โดยไม่ต้อง Execute มัน” - ESLint Site

ESLint ถือเป็นหนึ่งใน Extension ที่ถูก Download มากที่สุดตัวหนึ่งใน VS Code โดยมีการ Download เกือบ 13 ล้านครั้งเพื่อให้แน่ใจว่า Code ที่คุณเขียน ยังคงเป็นไปตาม Standard Practices อย่างเช่น Positioning, Indentation และอื่น ๆ อีกมากมาย Extension นี้ต้องการให้คุณ Install ESLint บน Computer ของคุณทั้งใน Local หรือ Global และคุณสามารถทำได้ด้วยการ Run npm install eslint

คุณสามารถไปที่ Visual Studio Code Extension Marketplace Page เพื่อดูคำแนะนำในการ Installation และการ Configuration โดยละเอียด

ลองดูตัวอย่างง่าย ๆ ว่า ESLint สามารถช่วยอะไรคุณได้บ้าง

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

6. Prettier

"Developer มักต้องใช้เวลาและความพยายามอย่างมากในการจัด Format Code ของพวกเขา"

แต่คุณไม่จำเป็นต้องกังวลกับการจัด Format ของ Code อีกต่อไป หาก Prettier สามารถช่วยจัด Format ทุกอย่างให้คุณได้

Prettier ซึ่งเป็น VSCode Extension ที่ได้รับความนิยมในหมู่ Frontend Developers ซึ่งมีการถูก Download ไปใช้มากถึง 11 ล้านครั้งและเพิ่มขึ้นเรื่อย ๆ มันช่วยให้คุณทำงานอย่างมีความสุขมากขึ้น เพียงคุณใช้ Prettier จากนั้น Code ก็จะถูกจัด Format และนี่ก็คือเหตุผลที่ Prettier เป็น Tools ที่ยอดเยี่ยม:

• เมื่อ Style Guide เปลี่ยนแปลง Prettier ก็สามารถนำไป Apply กับ Codebase ทั้งหมดให้โดยอัตโนมัติ
• ไม่ต้องใช้ความพยายามมากมายในการแก้ไข Format
• ไม่ต้องเสียเวลาหาข้อตกลงเกี่ยวกับการจัด Format ใน Pull Requests
• ไม่จำเป็นต้องค้นหา Rules ต่าง ๆ ใน Style Guide

"Prettier ไม่เพียงรองรับ JavaScript เท่านั้น แต่มันยังรองรับ Syntax ต่าง ๆ ได้มากมาย เช่น TypeScript, CSS, JSON, JSX, GraphQL และอื่น ๆ อีกมากมาย"

ยังมี Extension อื่น ๆ ที่คล้ายกันและหนึ่งใน Extension ยอดนิยมก็คือ Beautify นั่นเอง ด้วยการ Settings และ Configurations เพียงเล็กน้อย คุณก็ไม่ต้องกังวลกับการเขียน Ugly Codes อีกต่อไป Beautify จะช่วยเปลี่ยน Code ของคุณให้สวยงามและมีความสอดคล้องกันทั้งหมด

7. Pre-Commit Hooks

สำหรับ Tool ตัวสุดท้ายสำหรับบทความนี้ก็คือ Pre-Commit Hooks บางคนอาจเคยได้ยินเกี่ยวกับ Tool ตัวนี้มาบ้างแล้ว แต่บางคนอาจไม่เคยได้ยินมาก่อน

"Git Hooks ถือเป็นหนึ่งใน Features ของ Git ที่ถูกมองข้าม แต่มันสามารถช่วยเพิ่มประสิทธิภาพการทำงานของคุณในฐานะของ Developer ได้เป็นอย่างดี"

คุณเคยต้องการ Run คำสั่งทุกครั้งที่คุณ Commit หรือ Push หรือไม่? ถ้าเป็นเช่นนั้น Git Hooks คือสิ่งที่คุณมองหา

"Git Hooks คือ Custom Scripts ที่ Run ก่อนหรือหลัง Git Command เพื่อทำการ Automate งานต่าง ๆ ของคุณ อันที่จริงแล้วมี Git Hooks อยู่หลายตัวและ Pre-Commit Hook เป็นหนึ่งใน Tool ที่หลายคนใช้"

Features บางส่วนที่น่าทึ่งของ Pre-Commit Hook ก็คือ:

• พวกมันจะถูก Run ก่อนเสมอ ก่อนที่คุณจะพิมพ์ Commit Message ด้วยซ้ำ
• Pre-Commit Hook ถูกใช้เพื่อตรวจสอบ Snapshot ที่กำลังจะถูก Commit

อย่าลืมตรวจสอบให้แน่ใจว่า คุณไม่ได้ลืมสิ่งใด ตรวจสอบให้แน่ใจว่ามีการ Test Run หรือพิจารณาถึงสิ่งที่คุณต้องการจะตรวจสอบใน Code ของคุณ

"ด้วยการใช้ Pre-Commit Hook คุณจะสามารถตรวจสอบ Code Style, Trailing White Spaces, Imports ที่คุณไม่ต้องการ หรือตรวจสอบ Documentation เกี่ยวกับ Methods ใหม่ ๆ"

ที่มา:  https://blog.bitsrc.io/

 

 

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

 

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

 

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

• Top 7 Data Scraping Tools ของปี 2021 ที่คุณควรรู้จักไว้
• 12 Python Snippets ที่ช่วยเพิ่ม Productivity ของคุณ
• Top 10 Data Science Projects สำหรับมือใหม่