一、我們現在協作時遇到了哪些困境？
二、這個工具能給我們開發帶來什麼樣的幫助？
三、安裝套件＆登入使用者
四、使用方式

一、我們現在協作時遇到了哪些困境？

• 使用螢幕分享做 Debug 時，需要依靠大腦來做運算邏輯，想要看哪一支檔案與程式也要靠口述，非常不方便
• 有些程式（Teams），不只螢幕分享來能直接控制對方的電腦做操作，但同一時間只允許一人做操作
• 就算團隊使用 git 版控，你切到對方有 Bug 的 branch 時可能無法順利重現問題發生（很多套件版本及環境參數設定不同）
• 因為無法完全模擬對方程式運作環境導致 Debug 時困難重重

二、這個工具能給我們開發帶來什麼樣的幫助？

• 對方能夠很清楚理解自己現在講述的程式在哪個檔案的哪個位置，不再雞同鴨講
• 雙方能自由瀏覽專案下的資料夾與程式，無需依靠口述
• 可以模擬對方的環境進行程式編譯，更清楚問題發生點
• 雙方的游標顏色不同，方便討論時不會產生誤會

三、安裝套件＆登入使用者

下面的步驟及操作可能會隨著 VScode 改版而有所不同，僅供參考

SETP 1：在 VScode 的 EXTENSION 分頁搜尋「Live Share」，點擊「install」即可完成安裝

SETP 2：安裝完後會在左下角多出「LIVE SHARE」的icon

SETP 3：第一次按「Share」時，會要求你登入 GitHub 或是 Microsoft 的帳號

SETP 4：這裡我選擇登入Github，基本上就是一路按接受授權的過程

SETP 5：註冊成功後，你就會看到以下畫面

四、使用方式

完成安裝＆登入的步驟後，下面提供本機模擬的操作方式

自己跟自己的連線，模擬操作

SETP 1：在本機用 VScode 開啟一個資料夾或是專案

SETP 2：點擊「Share」做分享，此時你會得到一組邀請連結

SETP 3：此時開用「New Windows」開啟一個空的 VScode，點擊「Join」加入

SETP 4：加入後加入後便可以開始共同開發嚕

當 Join 的人對檔案操作時，Share 的人可以看到他的操作

了解 Share 的人跟 Join 的人正在操作的畫面

按下右上角的「圖釘」，就是「Follow Participant」觀看對方現在操作的檔案

直接在對方的環境下執行程式了解問題

Join的人可以直接在終端機下指令，了解程式執行狀況

本篇文章只是很簡略地讓大家了解如何使用「Live Share」這款套件，更多的功能就讓大家直接去官網了解吧！

工欲善其事，必先利其器

為什麼寫這篇文章？

因為我自己在剛接觸程式時最痛恨的就是環境設定
不知道是我跟電腦不合還是怎樣，每次我學新東西的時候總是在環境設定這個環節卡的不要不要的
為了避免讀者在之後實戰的文章中一邊看一邊心理罵:「為什麼我們程式一模一樣但我的就是會錯?」這樣的憾事發生，所以我決定詳細的說明這個專案所需安裝的一切環境，並附上我本機安裝的工具版本，讓大家在日後的文章中可以順利操作與學習

你們實際操作時通常都有新的版本了，如果最新版本有問題可以切換到筆者的版本來操作

需要安裝哪些工具

說明包含 windows/mac 兩個系統的設定

1. Node.js
2. NVM
3. git
4. yarn
5. VSCode

開發環境介紹 & 設定

1. Node.js 官網

能夠在 server 端運行 JavaScript 的開放原始碼、跨平台 JavaScript 的執行環境。前端工程師的福音

筆者安裝的版本：v16.19.1 (使用nvm安裝，後面會介紹)

2. nvm 官網

由於 Node.js 更新速度是非常快的，而許多套件有 Node.js 版本的相依性，透過NVM你可以輕鬆切換 Node.js 版本來符合不同專案的使用環境

windows 安裝步驟

1. 先進入windows下載頁面
2. 選擇最新版本的下載 nvm-setup.zip(筆者版本為1.1.7，你看到這篇文章時可能有提供更新的版本)

3. 下載後一路瘋狂下一步即可

4. 安裝後開啟命令提示字元(CMD)

5. 在 CMD 輸入指令確認 nvm 是否安裝成功

mac 安裝步驟

1. 打開終端機(Terminal)，以下步驟皆在終端機操作
2. mac 建議先下載 Homebrew

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

3. 下載後安裝 nvm

brew install nvm

4. 在終端機輸入指令確認 nvm 是否安裝成功

用 NVM 安裝 node.js

• 指令：nvm install [version]
• 請切記要安裝一個 Node.js 版本(請選用LTS版本)，不然你寫的程式會沒有可以運行的環境

nvm install 16.19.1

筆者nvm安裝版本：0.39.3

3. git 官網

這是對於程式版本控制的工具，透過他你可以輕鬆回到過去，並且在多人協作時也能有效管控
windows下載頁面、mac下載頁面

我有朋友使用 windows 怎麼樣都無法正常安裝 git，如果你也遇到了這個不幸，你還是有Git桌面板可以選擇的

常用指令

• 抓取遠端數據庫(僅確認有什麼更新，不合併)

git fetch

• 抓取遠端數據庫更新

git pull

• 更新遠端數據庫

git push

筆者windows git安裝版本：2.27.0.windows.1

4. yarn

這是專門安裝套件的軟體，站在巨人的肩膀上你才能看得更遠，妥善運用別人提供的套件，程式的路能走得更遠
下載頁面

常用指令

• 依據 package.json 安裝所有套件

yarn

• 安裝到 dependencies

yarn add [package]

• 安裝到 devDependencies

yarn add [package] –save-dev

• 全域安裝套件(使該套件可在電腦任何位置被呼叫)

yarn global add [package]

筆者yarn安裝版本：1.19.2

5. VScode 官網

現在已經過了用記事本在打程式的年代了，透過 IDE(整合開發環境)可以大幅增加你撰寫程式的速度
VScode下載頁面

工欲善其事，必先利其器

為什麼寫這篇文章？

因為我自己在剛接觸程式時最痛恨的就是環境設定

不知道是我跟電腦不合還是怎樣，每次我學新東西的時候總是在環境設定這個環節卡的不要不要的

為了避免讀者在之後實戰的文章中一邊看一邊心理罵:「為什麼我們程式一模一樣但我的就是會錯?」這樣的憾事發生，所以我決定詳細的說明這個專案所需安裝的一切環境，並附上我本機安裝的工具版本，讓大家在日後的文章中可以順利操作與學習

你們實際操作時通常都有新的版本了，如果最新版本有問題可以切換到筆者的版本來操作

今日目標

1. 了解使用工具的重要性 & 為什麼選擇他
2. 完成開發前環境設定

使用什麼工具完成

說到爬蟲，我想絕大多數的人第一個想到的一定是 python，python 是一個很好的語言，但很可惜我對他的鑽研不夠深入，如果這份外包使用一個自己不夠熟悉的語言來撰寫那是一個不負責任的行為，所以在這裡我選擇的語言是 javacscript

另外我會詳細說明前置環境的設定，如果每個人的環境設置都不一樣，那麼我文章的程式可能在許多電腦上都是無法執行的，所以說明包含 windows/mac 兩個系統的設定，讓你們了解到為什麼叫使用這些工具

1. Node.js
2. NVM
3. git
4. yarn
5. VSCode

開發環境介紹 & 設定

1. Node.js 官網

能夠在 server 端運行 JavaScript 的開放原始碼、跨平台 JavaScript 的執行環境。前端工程師的福音

筆者安裝的版本：v12.19.0

2. nvm 官網

由於 Node.js 更新速度是非常快的，而許多套件有 Node.js 版本的相依性，透過NVM你可以輕鬆切換 Node.js 版本來符合不同專案的使用環境

• windows 安裝步驟

  1. 先進入windows下載頁面

  2. 選擇最新版本的下載 nvm-setup.zip(筆者版本為1.1.7，你看到這篇文章時可能有提供更新的版本)

     

  3. 下載後一路瘋狂下一步即可

  4. 安裝後開啟命令提示字元(CMD)

  5. 在 CMD 輸入指令確認 nvm 是否安裝成功

     nvm
     

     

• mac 安裝步驟

  1. 打開終端機(Terminal)，以下步驟皆在終端機操作

  2. mac 建議先下載 Homebrew

     /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
     

  3. 下載後安裝 nvm

     brew install nvm
     

  4. 確認 nvm 是否安裝成功

     nvm
     

     

• 常用指令

  • 安裝特定 Node.js 版本

    nvm install [version]
    

    請切記要安裝一個 Node.js 版本(請選用LTS版本)，不然你寫的程式會沒有可以運行的環境

    nvm install 12.19.0
    

  • 切換 Node.js 版本

    nvm use [version]
    

  • 列出本機(local)已經安裝好的 Node.js 版本

    nvm list
    

  • 顯示當下 Node.js 版本

    nvm current
    

  筆者安裝版本：1.1.7

3. git 官網

這是對於程式版本控制的工具，透過他你可以輕鬆回到過去，並且在多人協作時也能有效管控

windows下載頁面、mac下載頁面

我有朋友使用 windows 怎麼樣都無法正常安裝 git，如果你也遇到了這個不幸，你還是有Git桌面板可以選擇的

常用指令

• 抓取遠端數據庫(僅確認有什麼更新，不合併)

  git fetch
  

• 抓取遠端數據庫更新

  git pull
  

• 更新遠端數據庫

  git push
  

筆者windows安裝版本：2.27.0.windows.1

4. yarn 官網

這是專門安裝套件的軟體，站在巨人的肩膀上你才能看得更遠，妥善運用別人提供的套件，程式的路能走得更遠

windows下載頁面、mac下載頁面

常用指令

• 依據 package.json 安裝所有套件

  yarn
  

• 安裝到 dependencies

  yarn add [package]
  

• 安裝到 devDependencies

  yarn add [package] –save-dev
  

• 全域安裝套件(使該套件可在電腦任何位置被呼叫)

  yarn global add [package]
  

筆者安裝版本：1.19.2

5. VScode 官網

現在已經過了用記事本在打程式的年代了，透過 IDE(整合開發環境)可以大幅增加你撰寫程式的速度

VScode下載頁面

優點

1. 適合新手：不需在終端機(Terminal)安裝及設定各種前置作業，能節省建立開發環境的成本，並加速對開發環境的了解。
2. 執行程式：可以在 IDE 內直接執行一段程式碼，不需離開編輯器。
3. 程式碼高亮：將原始碼以不同顏色顯現，讓我們閱讀更方便。
4. 程式碼自動格式化：當輸入 if 或 while 時，他會自動縮排。
5. 版本控制方便：git add、git commit 有 GUI 可以操作，並且有 work tree 讓你比對自己更改了哪些地方
6. 功能擴充方便：能透過 Extentions 來安裝所需要的擴充的套件

常用快捷鍵

以下為 mac 快捷鍵，windows 按鍵請自行轉換：cmd = ctrl, option = alt

• 區塊註解 cmd + k + c
• 區塊取消註解 cmd + k + u
• 區塊縮退 cmd + [
• 區塊縮進 cmd + ]
• 自動整理程式碼 option + shift + f

今天對於專案的前置環境說明到這裡，如果環境設定上有什麼問題的話實屬正常，畢竟每個電腦的環境都有些許不同，可以先用 google 查詢看看喔～進入工程師的世界後stackoverflow會是你最好的朋友

筆者碎碎念

在文章的最後分享一個心態，無論是面對工作還是外包都一樣

在面試工作或是談外包時要先衡量一下自己的實力

如果你即將要面對的工作(外包)已經遠遠超過了你的能力範圍

強烈建議你拒絕這個機會，不要把工作(外包)當成是一個給你練習基礎的地方

你的同事跟業主會恨你的

尤其是外包，如果你的基礎不穩，運氣好你可能會做出一個貌似可以用的專案

但實際上這個專案充滿著你所不知道的漏洞

這塊我想只有實際在業界磨練過一段時間才能比較感同身受

參考資源

1. nvm：快速安裝、切換不同版本的 Node.js
2. 連猴子都懂的Git入門指南
3. Windows 10 安裝並使用 nvm 切換 NodeJS 版本
4. 一應俱全的整合開發環境IDE
5. 用Yarn取代npm加速開發

在許多人的幫助下，本系列文章已出版成書，並添加了新的篇章與細節補充：

• 加入更多實務經驗，用完整的開發流程讓讀者了解專案每個階段要注意的事項
• 將爬蟲的步驟與技巧做更詳細的說明，讓讀者可以輕鬆入門
• 調整專案架構
  • 優化爬蟲程式，以更廣的視角來擷取網頁資訊
  • 增加資料驗證、錯誤通知等功能，讓爬蟲執行遇到問題時可以第一時間通知使用者
  • 排程部分改用 node-schedule & pm2 的組合，讓讀者可以輕鬆管理專案程序並獲得更精確的 log 資訊

有興趣的朋友可以到天瓏書局選購，感謝大家的支持。

購書連結：https://www.tenlong.com.tw/products/9789864348008