### GDSC NYUST x 資訊創客社 <br> ### 軟體開發工具入門讀書會 #### VS Code & Node.js課程 <br> #### 2023/10/18 ( Wed ) 19:00 - 21:00 #### 講師：蘇祐民 #### 本次課程影片： <img src="" height="200px"> --- # VSCode & Node.js *YoMin Su* --- ## 課程簡報 ----  > URL: https://reurl.cc/jv9pXm --- ## 課程簡介 ---- ### 簡單的說 - 在上週的環境中開始進行JavaScript開發 - 透過VSCode對設計好的程式碼進行除錯 - 初探Node.js專案 ---- ### 今日目標 1. 安裝VSCode 2. 在VSCode中安裝 WSL/SSH 套件 3. 透過VSCode連線到目標機器 4. 在 WSL/VM 中安裝 Node.js 5. 介紹活動列中的各大項功能 6. 在VSCode中安裝 JS/TS 套件 7. 介紹Node.js 8. 透過VSCode對Node.js應用程式進行除錯 9. 介紹Node.js專案與套件管理工具 10. 重點回顧與學習資源分享 --- ## 環境準備 ---- ### 安裝VSCode 總有人電腦中沒有，所以跟著來操作： Windows ```shell= winget install Microsoft.VisualStudioCode -i ``` <br/> macOS ```shell= brew install --cask visual-studio-code ``` > mac的同學若沒有brew，請[點我](https://code.visualstudio.com/docs/?dv=osx) ---- ### 在Linux環境中安裝Node.js 首先要進入到環境中，所以... ```shell= wsl bash ``` 在你的終端機中輸入上述任一項就可以了喔！  ---- ### 安裝Node.js(2) 先回到家目錄： ```bash= cd ~ ``` 接著利用 Node.js 的Repo來安裝： ```bash= sudo apt-get update sudo apt-get install -y ca-certificates curl gnupg sudo mkdir -p /etc/apt/keyrings curl -fsSL https://deb.nodesource.com/gpgkey/nodesource-repo.gpg.key | sudo gpg --dearmor -o /etc/apt/keyrings/nodesource.gpg ``` > 上面的指令用於新增Repo的金鑰，為的是讓系統信任套件的簽名！ ---- ### 安裝Node.js(3) 新增套件來源 （NODE_MAJOR 對應要的安裝版本） ```bash= NODE_MAJOR=20 echo "deb [signed-by=/etc/apt/keyrings/nodesource.gpg] https://deb.nodesource.com/node_$NODE_MAJOR.x nodistro main" | sudo tee /etc/apt/sources.list.d/nodesource.list ``` 安裝開始： ```bash= sudo apt update && sudo apt install nodejs -y ``` ---- ### 驗證Node.js安裝 請輸入： ```bash= node -v ``` 會像下圖這個樣子（版本根據前面MAJOR而定）  ---- ### 啟用Corepack Corepack 是 Node.js 中用於管理『包管理器』的管理器 (Package Manager Manger) <br/> 啟用後就可以直接開始使用 ```bash= sudo corepack enable ``` ---- ### 驗證Corepack 啟用之前：  啟用之後：  --- ## VSCode 導覽 ---- ### 操作介面  ---- ### 活動列 | | 名稱 | 用途 | | --------------------------------------------------- | ---------- | ------------------------ | |  | 檔案總管 | 在專案中的各檔案來回游走 | |  | 搜尋 | 在專案中進行全域搜尋 | |  | 原始檔控制 | Git版本控管的圖形介面 | |  | 執行與偵錯 | 除錯工具的部分 | |  | 延伸模組 | 缺套件找這裡 | ---- ### 狀態列  ---- ### 狀態列左側：全域項目  | 功能 | 描述 | | ------------ | ------------------------ | | 開啟遠端視窗 | 用於連接遠端目標 | | 版本控制 | 顯示目前分支與同步狀態 | | 問題偵測 | 用於顯示專案中是否有錯誤 | | 連接埠 | 用於顯示轉接的連接埠 | ---- ### 狀態列右側：上下文項目  | 功能 | 描述 | | ------------ | ------------------------ | | 行 / 欄 | 顯示光標當下在哪裡 | | 選擇縮排 | 顯示每次按下Tab的結果 | | 選取編碼 | 設定目前檔案的編碼格式 | | 選取行尾順序 | 設定檔案的換行規則 | | 選取語言模式 | 設定檔案的程式語言 | ---- ### 開啟專案 點選活動列的『檔案總管』，再按下『開啟資料夾』  ---- ### 檢視專案資訊  ---- ### 版本控管資訊  ---- ### 執行與偵錯  --- ## Node.js 教學時間 ---- ### 變數宣告  ```javascript= let // 區域變數 var // 全域變數 const // 常數 ``` ---- ### 資訊輸出  ```javascript= console.log("放什麼都行"); ``` ---- ### 資訊輸入  ```javascript= const stdin = process.openStdin(); //建立stdin物件 //加入事件監聽器，當輸入後，顯示輸入的資訊 stdin.addListener("data", (d) => { console.log(d.toString().trim()); }); ``` ---- ### 宣告方法  ```javascript= function abc() { //標準宣告 console.log("xyz"); } let def = () => { //簡短宣告 console.log("ijk"); } ``` ---- ### JS物件  執行結果：  ---- ### JS陣列  執行結果：  ---- ### Node.js 提供的資訊 印出來： ```javascript= console.log(process); ``` 直接看：  ---- ### 來寫點東西試試 ```javascript= let student1 = { name: "John", age: 8 } let student2 = { name: "Cindy", age: 9 } let student3 = { name: "Jeff", age: 8 } let students = [] students.push(student1, student2, student3); let ages = students.map((s) => s.age); let total = 0; ages.forEach(a => { total += a; }); console.log(total); ``` --- ## JS 偵錯 ---- ### 中斷點  在行左側點一下，讓紅色點點出現 ---- ### 逐步執行  | | 說明 | | ---------- | ------------------ | | 繼續 | 跳至下一個中斷點 | | 不進入函式 | 跳至下一個命令 | | 逐步執行 | 一條一條跑 | | 跳離函式 | 跳過函式內執行細節 | | 重新啟動 | 就是重新開始 | | 停止 | 結束偵錯 | --- ## JS 專案 ---- ### 初始化專案 ```bash= yarn init -2 ``` 執行後的資料夾：  ---- ### 專案定義檔 > package.json ```json= { "name": "Temp", "packageManager": "yarn@3.6.4" } ``` ---- ### 新增套件 ```bash= yarn add express ``` 完成後的package.json ```json= { "name": "Temp", "packageManager": "yarn@3.6.4", "dependencies": { "express": "^4.18.2" } } ``` ---- ### 如果是開發依賴 ```bash= yarn add -D @types/express ``` 完成後的package.json ```json= { "name": "Temp", "packageManager": "yarn@3.6.4", "dependencies": { "express": "^4.18.2" }, "devDependencies": { "@types/express": "^4.17.20" } } ``` ---- ### 加上自定義指令 假設想要執行檔案： ```json= "scripts": { "dev": "node src/index.js" } ``` 將上述加入到package.json中  --- ## 學習資源 ---- - [MDN Web Docs](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript) - [Microsoft Learn 偵錯](https://learn.microsoft.com/zh-tw/training/modules/debug-nodejs/) - [Introduction | Yarn](https://yarnpkg.com/getting-started) --- ## Q & A 有什麼疑惑的嗎? --- ## 下一次課程 > Git & GitHub 分支控制、合併分支、Pull Request... --- ## Bye Bye (❁´◡\`❁)