วิธีตั้งค่า Mac สำหรับการพัฒนาเว็บ

แม้ว่าคุณสามารถสร้างเว็บไซต์พื้นฐานได้โดยไม่ต้องใช้โปรแกรมแก้ไขข้อความและเบราว์เซอร์ คุณอาจต้องการปรับปรุงเกมด้วยการเพิ่มเฟรมเวิร์ก JavaScript เช่น React หรือ Vue และเครื่องมือที่มีประโยชน์ เช่น Git ให้กับเวิร์กโฟลว์ของคุณ

แต่เดี๋ยวก่อน! Mac ของคุณไม่พร้อม ก่อนดำดิ่ง คุณจะต้องติดตั้งบางรายการเพื่อไม่ให้เกิดข้อผิดพลาดที่สับสนในภายหลัง ?

บทความนี้จะแนะนำคุณเกี่ยวกับการตั้งค่าขั้นต่ำที่คุณต้องใช้ในการเริ่มต้นและใช้งานการพัฒนาเว็บแบบ JavaScript บน Mac

ไปกันเถอะ!

อัปเดต Mac ของคุณ

ก่อนติดตั้งซอฟต์แวร์ใหม่ ให้ทำตามคำแนะนำเหล่านี้จาก Apple เพื่ออัปเกรด macOS และซอฟต์แวร์ปัจจุบันของคุณเป็นเวอร์ชันล่าสุด

เลือกแอปเทอร์มินัล

เนื่องจากคุณจะโต้ตอบกับ Mac โดยใช้บรรทัดคำสั่งในบทความนี้ คุณจึงต้องมีแอปเทอร์มินัล

ตัวเลือกใดๆ ต่อไปนี้เป็นตัวเลือกที่ดี:

• ไฮเปอร์
• iTerm2
• เทอร์มินัลรวมของ Visual Studio Code
• Terminal (แอปเริ่มต้นที่มาพร้อมกับ Mac ของคุณ)

หากคุณไม่แน่ใจว่าจะเลือกอันไหน ให้เลือก Hyper

เครื่องมือสำหรับนักพัฒนาบรรทัดคำสั่ง

สิ่งแรกที่คุณจะต้องติดตั้งจากบรรทัดคำสั่งคือ เครื่องมือสำหรับนักพัฒนาบรรทัดคำสั่ง ของ Mac . การติดตั้งตอนนี้จะป้องกันข้อผิดพลาดแปลก ๆ ในภายหลัง

หากต้องการตรวจสอบว่าเครื่องมือได้รับการติดตั้งแล้วหรือไม่ ให้พิมพ์คำสั่งต่อไปนี้ในแอปเทอร์มินัลแล้วกด return:

xcode-select --version

หากผลลัพธ์ไม่ใช่หมายเลขเวอร์ชัน ให้ติดตั้งเครื่องมือด้วยคำสั่งนี้:

xcode-select --install

กล่องโต้ตอบจะปรากฏขึ้นเพื่อถามว่าคุณต้องการติดตั้งเครื่องมือหรือไม่ คลิก ติดตั้ง และแพ็คเกจจะดาวน์โหลดและติดตั้งเอง

เมื่อการติดตั้งเสร็จสิ้น ให้ยืนยันว่าเครื่องมือได้รับการติดตั้งแล้วโดยเรียกใช้คำสั่งแรกอีกครั้ง:

xcode-select --version

ผลลัพธ์ควรเป็นหมายเลขเวอร์ชัน

Homebrew

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

โฮมบรูว์ เป็นเครื่องมือที่ให้คุณติดตั้ง อัปเดต และถอนการติดตั้งซอฟต์แวร์บน Mac ของคุณจากบรรทัดคำสั่ง วิธีนี้เร็วกว่าและปลอดภัยกว่าวิธีการแบบแมนนวล และโดยทั่วไปแล้วทำให้ชีวิตการพัฒนาของคุณง่ายขึ้น

ก่อนอื่น ให้ตรวจสอบว่าติดตั้ง Homebrew แล้ว:

brew --version

หากคุณไม่เห็นหมายเลขเวอร์ชัน ให้ติดตั้ง Homebrew ด้วยคำสั่งนี้:

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

ฉันสัญญาว่านั่นเป็นคำสั่งที่แปลกประหลาดที่สุดที่คุณจะเห็นในบทความนี้! ? ขอบคุณ Homebrew ที่เหลือก็ทำได้ง่ายๆ

ก่อนดำเนินการต่อ ให้ยืนยันว่าติดตั้ง Homebrew แล้ว:

brew --version

โหนดและ npm

Node.js เป็นเครื่องมือที่ช่วยให้ Mac ของคุณเรียกใช้โค้ด JavaScript นอกเว็บเบราว์เซอร์ได้ หากคุณต้องการเรียกใช้เฟรมเวิร์ก JavaScript เช่น React หรือ Vue บน Mac คุณจะต้องติดตั้ง Node

โหนดยังรวม npm (ตัวจัดการแพ็คเกจโหนด) ซึ่งให้คุณเข้าถึงไลบรารีขนาดใหญ่ของโค้ดฟรีที่คุณสามารถดาวน์โหลดและใช้ในโครงการของคุณได้

ขั้นแรก ตรวจสอบว่ามีการติดตั้งโหนดแล้ว:

node --version

หากไม่มี ให้ติดตั้งด้วย Homebrew:

brew install node

สุดท้าย ให้ยืนยันว่าติดตั้ง Node และ npm แล้ว:

node --version

npm --version

การควบคุมเวอร์ชันด้วย Git

Git เป็นเครื่องมือที่ช่วยคุณติดตามการเปลี่ยนแปลงโค้ดและทำงานร่วมกับนักพัฒนาคนอื่นๆ ในโครงการที่ใช้ร่วมกัน

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

อีกครั้ง ให้เริ่มต้นด้วยการตรวจสอบว่ามีการติดตั้ง Git แล้ว:

git --version

ถ้าไม่ ติดตั้ง:

brew install git

และยืนยันว่าการติดตั้งใช้งานได้:

git --version

บางครั้ง ให้เรียกใช้คำสั่งต่อไปนี้ และทุกสิ่งที่คุณติดตั้งด้วย Homebrew จะอัปเดตโดยอัตโนมัติ:

brew update && brew upgrade && brew cleanup && brew doctor

คำสั่งเดียวคือทั้งหมดที่คุณต้องการเพื่อให้ระบบของคุณทันสมัยอยู่เสมอ ?

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

เพียงเท่านี้สำหรับบรรทัดคำสั่ง!

ตัวแก้ไขโค้ด

แม้ว่าคุณจะสามารถเขียนโค้ดในเท็กซ์เอดิเตอร์ใดๆ ก็ตาม การใช้โค้ดที่เน้นและตรวจสอบโค้ดของคุณจะทำให้ชีวิตของคุณง่ายขึ้นมาก

ตัวเลือกใดๆ ต่อไปนี้เป็นตัวเลือกที่ดี:

• รหัส Visual Studio
• อะตอม
• ข้อความประเสริฐ

หากคุณเพิ่งเริ่มต้น ให้เลือก Visual Studio Code

เบราว์เซอร์

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

ข้อใดข้อหนึ่งต่อไปนี้เป็นตัวเลือกที่ดี:

• Chrome
• Firefox

หากคุณเพิ่งเริ่มต้น ให้เลือก Chrome

ตัวค้นหา

เคล็ดลับด่วน:คุณจะต้องแสดงไฟล์ที่ Mac ของคุณซ่อนไว้โดยค่าเริ่มต้น (เช่น ไฟล์ git จะถูกซ่อนโดยอัตโนมัติ แต่บางครั้งคุณอาจต้องการแก้ไข)

วิธีที่ง่ายที่สุดในการแสดงไฟล์ที่ซ่อนอยู่ใน Mac ของคุณคือการใช้แป้นพิมพ์ลัด ⌘⇧ (คำสั่ง + Shift + จุด). การดำเนินการนี้จะสลับไปมาระหว่างการแสดงและการซ่อนไฟล์เหล่านี้ เพื่อให้คุณสามารถเข้าถึงได้เมื่อต้องการ

บทสรุป

คุณทุกชุด! ?

นั่นคือทั้งหมดที่คุณต้องการเพื่อเริ่มต้นใช้งานด้วยการพัฒนาส่วนหน้าที่ใช้ JavaScript บน Mac ของคุณ

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

อ่านเพิ่มเติม

• ตั้งค่า Mac ใหม่เอี่ยมสำหรับการพัฒนาโดย Tania Rascia
• การตั้งค่า MacBook สำหรับการพัฒนา Front-End โดย Ben Honeywill
• ออกจากบ้าน:ค้นหาสภาพแวดล้อมการพัฒนาท้องถิ่นรอบด้านที่ดีที่สุดโดย WebDevStudios (ในกรณีที่คุณต้องการตั้งค่า PHP ด้วย)

พูดคุยทางทวิตเตอร์

เผยแพร่ครั้งแรกที่ michaeluloth.com