透過使用者環境變數 Path 安裝 VS Code、Portable Git 與 Node.js(封閉開發環境適用)

MuseSheng
Nov 9, 2023

--

自成功從 UI/UX 設計師轉職為 Front-End Developer 後,新工作入職至今已經四個月了,我的蜜月期大概就三天,之後就直接進專案了,有機會我會慢慢分享過去轉職的經驗,以及如何善用 UI/UX 背景來加成轉職籌碼 ✏️

Photo by AltumCode on Unsplash

由於剛入職,需要將整個開發環境給 setup,如 IDE、版控、插件、框架等,但因為公司嚴格控管 OA(Office Assistant 💻)權限,會限制軟體安裝,且只有 admin 權限才能對 C 槽有所動作,因此需要透過特別的方式來安裝我們所需的軟體,也就是 環境變數,以下方式為針對 Windows 系統,Mac OS 因為是個人電腦使用,因此暫時沒有研究封閉環境安裝議題。

開啟環境變數

環境變數開啟方式有三種,直接 Windows 工具列搜尋,輸入環境變數後,會顯示下圖畫面,點選 編輯系統環境變數 即可開啟。

  1. 桌面 >> 本機(我的電腦) 右鍵 >> 內容 >> 系統進階設定 >> 點選環境變數
  2. 直接 Windows 工具列搜尋,輸入環境變數後,會顯示下圖畫面,點選 編輯系統環境變數 即可開啟
  3. 終端機輸入以下 Shell 指令;當使用者權限不足,無法透過上述兩種方式開啟,可嘗試使用終端機輸入指令方式開啟。
rundll32 sysdm.cpl,EditEnvironmentVariables
終端機輸入視窗
終端機輸入視窗

開啟環境變數視窗後,就會看到以下圖片顯示(下方環境變數圖片,我是另外找了與我系統狀態類似的示意圖,如同前面所述公司管控較嚴格,因此不方便透漏太多資訊)

上方區塊為使用者環境變數,下方區塊為系統環境變數,我自己的環境變數畫面如同圖片一樣,在系統參數區塊是無權限編輯的,因此接下來會說明如何運用使用者參數的 Path 來安裝我們要使用的軟體。

環境變數視窗(示意)
環境變數視窗(示意)

安裝 VSCode

首先要去 Microsoft Visual Studio Code 官網,我們要下載是 .zip 壓縮檔。

VSCode官網
VS Code 下載

解壓縮的檔案為了避開權限,我們選擇放置於 D 槽,例如我在 D 槽下新增了一個 Microsoft VS Code 資料夾,將整個壓縮檔內容放在該資料夾下。

VS Code 路徑
VS Code 路徑

接下來,我們回到環境變數視窗,選取使用者參數的 Path 點擊編輯,會顯示 編輯環境變數 畫面,指定 Path 路徑到剛剛 VSCode 檔案的 bin,這樣就是訂完成了。

環境變數 Path,代表「系統要到哪個路徑底下找執行檔」

VS Code 環境變數路徑
VS Code 環境變數路徑

當環境變數都設定好之後,點擊剛剛 D:\Microsoft VS Code 的 Code.exe,程式就可以正常執行了,也可以將這個 .exe 複製到桌面設為捷徑

VS Code 執行檔路徑
VS Code 執行檔路徑

安裝 Portable Git、Node.js

Git 在程式開發上已經算是一個必備的版控軟體,而 Node.js 則是因為需要 npm,未來方便我們安裝其他前端框架使用,因此兩者在開發環境上都是必要軟體,這兩者安裝方式都如同剛剛的 VScode,我們一樣要下載 .zip 壓縮包,版本的話通常都選則 LTS(Long-term support)版本,也就是所謂的長期支援版本,相對較穩定些。

Portable Git 下載
Portable Git 下載
Node.js 下載
Node.js 下載

兩者都下載後,一樣放在 D 槽底下,可以新增一個 Applications 或 Apps 資料夾來統一管理環境變數安裝的軟體,如下所我的放置路徑所示。

Portable Git, Node.js 路徑
Portable Git, Node.js 路徑

資料都下載後我們再開啟環境變數視窗,如同剛剛編輯 Path,這邊要注意 Node.js 直接指向到資料夾目錄,而 Portable Git 是指向 bin,設定完後就可以正常使用 Git 與 Node.js!

Portable Git, Node.js Path 設定
Portable Git, Node.js Path 設定

查看有無成功安裝,直接查詢版本即可,若可以看到版本號就代表已經安裝成功了🎉🎉🎉。

查詢 Node.js版本

node -v

查詢 Git 版本

git -v
查詢版本
查詢版本

--

--

No responses yet