เครื่องมือและแนวทางในการเร่งเวิร์กโฟลว์ของนักพัฒนาเว็บ

เผยแพร่แล้ว: 2020-12-17

การพัฒนาเว็บรวมสแต็กเครื่องมือภาษาโปรแกรมและอื่น ๆ จำนวนมากเข้าด้วยกัน เครื่องมือ / เวิร์กโฟลว์บางอย่างที่นี่อาจใช้งานได้ในบางกรณีบางส่วนในบางกรณี เพื่อให้แนวทางนี้ดีขึ้นให้พิจารณาโพสต์นี้ว่าเขียนจากมุมมองของผู้พัฒนา WordPress Front-End แม้ว่าเครื่องมือจะค่อนข้างกว้างและสามารถใช้ได้ในหลาย ๆ กรณี

1 - tmux

การเปลี่ยนแปลงที่ใหญ่ที่สุดอย่างหนึ่งที่ฉันมีในเวิร์กโฟลว์คือเมื่อฉันตั้งค่า tmux บนเครื่องของฉัน (macOS แต่ก็ใช้ได้กับ Linux ด้วยเช่นกัน) แม้ว่าฉันอาจไม่ได้ใช้ประโยชน์จากศักยภาพที่แท้จริง แต่ก็ทำได้ดีมากและช่วยให้ฉันสลับระหว่างโครงการต่างๆได้ทันทีซึ่งช่วยประหยัดเวลาได้มาก

tmux มีหน้า "เริ่มต้นใช้งาน" ที่ยาวซึ่งเขียนไว้ในที่เก็บ GitHub ของโปรเจ็กต์เพื่อตรวจสอบ นอกจากนี้ยังใช้งานได้กับแป้นพิมพ์ด้านขวาของกล่องพร้อมการรองรับเมาส์ที่สามารถเปิดใช้งานได้ tmux ใช้ไฟล์ config ที่สามารถแชร์ข้ามระบบสำหรับการตั้งค่าทันที

มันเปลี่ยนขั้นตอนการทำงานของฉันอย่างไร?

  • tmux ช่วยให้คุณสามารถแยกหน้าจอและนำทางภายในโปรเจ็กต์ได้อย่างง่ายดายด้วยการกดปุ่มสองปุ่ม ดังนั้นคุณสามารถมี "อึก" ทำงานในมุมมองเดียวคำสั่งให้ทำงานบนอีกมุมมองหนึ่ง SSH ไปยังเซิร์ฟเวอร์ที่สามและสถิติบางอย่างเกิดขึ้นที่สี่
  • จะช่วยให้คุณมีหน้าต่างสำหรับแต่ละโครงการที่เป็นเหมือน "แท็บ" ที่นี่คุณสามารถสลับไปยังโครงการต่างๆโดยใช้การกดปุ่มสองปุ่ม ฉันมีโปรเจ็กต์มากกว่า 20 โปรเจ็กต์ที่เปิดอยู่ในแท็บตลอดเวลาและเมื่อฉันต้องทำงานกับโปรเจ็กต์ใหม่ฉันก็แค่เปลี่ยนไปที่นั่นและอึกกำลังทำงานอยู่ ฉันอยู่ในไดเร็กทอรีที่ถูกต้องและฉันสามารถเริ่มงานได้ภายใน 2 วินาที
  • เปิดการตั้งค่าทั้งหมดไว้ตลอดเวลา คุณไม่จำเป็นต้องทำทุกครั้งที่เริ่มทำงานมันก็อยู่ที่นั่นเสมอ หากเครื่องของคุณดับลงและคุณบูตขึ้นมาอีกครั้งคุณก็สามารถ "ฟื้นคืนชีพ" (ด้วยปลั๊กอินง่ายๆ) ในการตั้งค่ามาตรฐานของคุณและในเวลาประมาณ 5 วินาทีเครื่องก็จะกลับมาทำงานอีกครั้ง เป็นเรื่องตลกที่ต้องใช้การใช้งาน 100% บน I7-9900K ในการทำเช่นนั้น
  • แต่ละแผงในหน้าต่างเป็นอินสแตนซ์ของตัวเอง ดังนั้นคุณจึงสามารถเรียกใช้ Node เวอร์ชันต่างๆสำหรับแต่ละพาเนลได้อย่างง่ายดาย
tmux สกรีนช็อต

ที่มา

2 - อัลเฟรด (หรือทางเลือกอื่น)

Alfred เป็น“ แอปเพิ่มประสิทธิภาพ” สำหรับ Mac ที่มีคุณสมบัติเทียบเท่ากับ Windows และ Linux ด้วย บางสิ่งที่อัลเฟรดทำคือ:

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

ด้วย Powerpack ของมันมีการผสานรวม“ เวิร์กโฟลว์” อื่น ๆ อีกมากมายที่สามารถทำให้การทำงานอัตโนมัติได้เช่นกัน

หน้าแรกของ alfred

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

ฉันใช้มันอย่างไร:

  • ก่อนอื่นต้องเปิดแอป ฉันไม่ได้คลิกโดยใช้ตัวชี้บนไอคอนฉันแค่พิมพ์ตัวอักษรและไปที่นั่น
  • ใช้เป็นเครื่องคิดเลขเมื่อเขียน CSS (มักเกิดกับค่า EM)
  • ประวัติคลิปบอร์ด - บางครั้งฉันวางซ้อนกัน 5-6 สิ่งในคลิปบอร์ดแล้ววางลงในโปรแกรมแก้ไขโค้ดทุกที่ที่ต้องการ หรือย้อนกลับไปสองสามวันเพื่อค้นหาอีเมลบางส่วนข้อมูลโค้ด ฯลฯ หรือแม้แต่ฟังก์ชันเล็ก ๆ น้อย ๆ ที่ทำบางอย่างในโครงการหนึ่งและจะช่วยในอีกโครงการหนึ่ง ใช้เวลา 2-3 วินาทีแทนที่จะใช้เวลา 10 นาทีในการเรียกดูโค้ด
  • ไปที่ไดเร็กทอรีการทำงานเมื่อทำงานออกแบบหรือไปยังไฟล์ XD โดยตรงโดยไม่ต้องเรียกค้นโปรแกรมค้นหา ใช้เวลาอีก 2-3 วินาทีเทียบกับหนึ่งนาทีในตัวค้นหา
  • ตัวอย่างข้อมูล - ฉันได้เตรียมตัวอย่าง "ความคิดเห็น" ที่ดีสำหรับ Asana พร้อมภาพหน้าจอของผลลัพธ์สถานที่สำหรับเพิ่มลิงก์คอมมิตข้อความไปยังผู้พัฒนารายต่อไปสถานะว่าอยู่ในการจัดเตรียมหรือไม่เป็นต้น นี่คือข้อความที่ดูสอดคล้องกันในทุกความคิดเห็นที่ทีมติดตามได้อย่างง่ายดาย ใช้เวลาน้อยกว่า 2 วินาทีในการพิมพ์และคลี่ตัวอย่างข้อมูล

3 - เครื่องมือ / ปลั๊กอิน Terminal

Oh My Zsh - ทำให้เทอร์มินัลเป็นประโยชน์ - ZSH คือขุมทรัพย์ มีปลั๊กอินมากกว่า 270 รายการให้เลือก ใช้ไฟล์กำหนดค่าแบบง่ายซึ่งใช้เวลาเพียงไม่กี่นาทีในการโยกย้ายจากการตั้งค่าเก่าไปยังไฟล์ใหม่ tmux ทำเช่นเดียวกันดังนั้นการตั้งค่า dev ทั้งหมดจึงใช้เวลาไม่กี่นาที ด้วยปลั๊กอินจำนวนมากให้เลือกคุณจะพบสิ่งที่มีประโยชน์กับเวิร์กโฟลว์ของคุณอย่างแน่นอน

หนึ่งในปลั๊กอินที่ใช้บ่อยใน ZSH ที่ฉันใช้คือ "Z" ซึ่งเรียนรู้เส้นทางที่คุณใช้เพื่อเข้าถึงสิ่งต่างๆ จากนั้นจะพาคุณไปทุกที่ที่คุณต้องการโดยใช้อักขระหลักเพียงไม่กี่ตัว

ตัวอย่าง: $z te จะข้ามไปที่ /folder/path/inner/more/content/testing - ทางลัดไปยังตำแหน่งที่คุณไปก่อนหน้านี้ ทำให้การกระโดดระหว่างไดเร็กทอรีปราศจากความเจ็บปวด

โอ้ zsh ของฉัน

exa - เอาต์พุต LS ที่สวยกว่า คุณสามารถหาข้อมูลเพิ่มเติมได้ในเว็บไซต์ กล่าวโดยย่อคือให้เอาต์พุตไฟล์และไดเร็กทอรีที่รวดเร็วและดีเช่นกัน อีกครั้ง - สวย

exa โฮมเพจ

ripgrep - การค้นหาที่รวดเร็วเป็นพิเศษ เมื่อคุณต้องการค้นหาไฟล์หลายพันไฟล์ด้วยรหัสหลายพันบรรทัดคุณไม่ควรรอมากเกินไป Ripgrep อยู่ที่นี่เพื่อช่วยคุณ และแน่นอนว่ามันมาพร้อมกับคุณสมบัติที่มีประโยชน์อื่น ๆ อีกมากมายและแฟล็กที่มีความหมายในการใช้งาน นอกจากนี้ยังติดตามไฟล์. gitignore เพื่อให้ผลลัพธ์มีความหมาย

ที่มา

git-open - เครื่องมือขนาดเล็กของ Paul Irish บน Github ที่ทำตามที่พูด - มันเปิดที่เก็บ git อะไรคือเรื่องใหญ่ที่คุณอาจพูด? คุณจำ URL ที่แน่นอนของโปรเจ็กต์ที่คุณทำงานเป็นครั้งแรกในรอบ 6 เดือนได้หรือไม่ ใช้เวลานานแค่ไหนในการนำทาง คำสั่งนี้จะเปิดให้คุณโดยตรง และอื่น ๆ - มันจะนำคุณไปยังสาขาที่ถูกต้อง

CLI ของคุณ! ในกรณีของฉันงานของเราเกี่ยวข้องกับ WordPress ซึ่งมีความสุขในฐานะ CLI ซึ่งคุณสามารถทำงานกับการติดตั้ง WP การตั้งค่าไซต์ใหม่แบบง่ายๆใช้คำสั่งพื้นฐานเช่น mkdir (สร้างโฟลเดอร์), git clone (โคลน repo), ดาวน์โหลด wp core, wp db create, wp db import (ทั้งหมดจาก WP-CLI) พิมพ์ทั้งหมดและกำหนดค่าอย่างรวดเร็วหลังจากผ่านไป 1 นาทีคุณจะมีการตั้งค่าใหม่ทำงาน

อย่าลืมตรวจสอบอีกครั้งว่ามี CLI อื่นที่คล้ายกันที่จะเหมาะกับคุณกับเครื่องมือที่คุณใช้อยู่หรือไม่!

ที่มา

4 - ปลั๊กอิน VS Code

ตัวเลือกของฉันสำหรับตัวแก้ไขโค้ด / IDE คือ VS Code ก่อนหน้านี้เป็นเรื่องประเสริฐ แต่ด้วยเครื่องจักรที่มีเนื้อวัวมากขึ้นตอนนี้ฉันสามารถใช้รหัส VS ได้อย่างถูกต้องโดยไม่ต้องใช้ 3 FPS ที่ฉันเคยได้รับมาก่อนเมื่อเลื่อนลงในเอกสารขนาดใหญ่

VS รหัส

สำหรับรายการด้านล่างฉันจะไม่ไปกับส่วนขยายที่มีชื่อเสียงเช่น ESLint, GitLense หรือชุดรูปแบบ / ไอคอนเนื่องจากมีการกล่าวถึงในเกือบทุกบทความที่คุณจะพบ

  • แท็กปิดอัตโนมัติ - เพื่อที่คุณจะได้ไม่ต้องเขียนแท็กปิดทุกครั้ง ไม่มีประโยชน์เมื่อทำการแก้ไข HTML ด้วย Emmet แต่จะช่วยได้เมื่อคุณต้องทำการแก้ไขอย่างรวดเร็ว
  • เปลี่ยนชื่อแท็กอัตโนมัติ - ยังมีประโยชน์มากเมื่อคุณทำการแก้ไข มันจะเปลี่ยนแท็กปิด / เปิดโดยตรงเมื่อคุณแก้ไขเพียงแท็กเดียว
  • ตัวตรวจสอบการสะกดรหัส - ตอนนี้คุณไม่ต้องรู้สึกอายในการประชาสัมพันธ์เมื่อคุณเขียนบางอย่างด้วยการพิมพ์ผิด หรือใช้เพื่อรักษาสิ่งที่ดีและสวยงามสำหรับโครงการโอเพนซอร์ส
  • การดำเนินการซ้ำกัน - มีประโยชน์มากในการสร้างไฟล์ใหม่จากไฟล์ที่มีอยู่ เป็นคำสั่งที่ใช้กับ Cmd + P ทำงานได้อย่างยอดเยี่ยมกับการสร้างไฟล์ sass / js ใหม่ในการทำงานส่วนหน้า
  • Jumpy - เครื่องมือที่ยอดเยี่ยม! เพียงกดปุ่มทางลัดที่คุณกำหนดและจะแสดงกล่องจดหมายขนาดเล็กสองกล่องถัดจากแต่ละคำ พิมพ์และเคอร์เซอร์ของคุณจะข้ามไปที่มัน วิธีที่รวดเร็วในการนำทางไฟล์โดยไม่ต้องใช้เมาส์

และเคล็ดลับ / เตือนความจำระดับมืออาชีพ - คุณสามารถดูภาพในรหัส VS เมื่อคุณพัฒนา UI และติดตามภาพจากนักออกแบบของคุณคุณสามารถลากไปที่วิวพอร์ตแล้วดูที่ด้านข้าง

ในระยะสั้น:

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

หากเป็นไปได้ให้หา“ มาตรการที่ปลอดภัย” ด้วยเช่นตั้งค่าผ้าสำลีตั้งค่างานสร้างของคุณโดยอัตโนมัติสร้าง“ แม่แบบเริ่มต้น” เพื่อใช้งานหรืออาจเขียน CLI ให้ตัวเองด้วยซ้ำ