---
title: VS Code & Node.js課程
date: 2023-10-18
langs: zh
type: slide
---

### 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

winget install Microsoft.VisualStudioCode -i

<br/>

macOS

brew install --cask visual-studio-code 

> mac的同學若沒有brew，請[點我](https://code.visualstudio.com/docs/?dv=osx)

----

### 在Linux環境中安裝Node.js

首先要進入到環境中，所以...

wsl
bash

在你的終端機中輸入上述任一項就可以了喔！


----

### 安裝Node.js(2)

先回到家目錄：

cd ~

接著利用 Node.js 的Repo來安裝：

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 對應要的安裝版本）

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

安裝開始：

sudo apt update && sudo apt install nodejs -y

----

### 驗證Node.js安裝

請輸入：

node -v

會像下圖這個樣子（版本根據前面MAJOR而定）

----

### 啟用Corepack

Corepack 是 Node.js 中用於管理『包管理器』的管理器 (Package Manager Manger)

<br/>

啟用後就可以直接開始使用

sudo corepack enable

----

### 驗證Corepack

啟用之前：

啟用之後：

---

## VSCode 導覽

----

### 操作介面


----

### 活動列

| | 名稱 | 用途 |
| --------------------------------------------------- | ---------- | ------------------------ |
|  | 檔案總管 | 在專案中的各檔案來回游走 |
|  | 搜尋 | 在專案中進行全域搜尋 |
|  | 原始檔控制 | Git版本控管的圖形介面 |
|  | 執行與偵錯 | 除錯工具的部分 |
|  | 延伸模組 | 缺套件找這裡 |

----

### 狀態列


----

### 狀態列左側：全域項目


| 功能 | 描述 |
| ------------ | ------------------------ |
| 開啟遠端視窗 | 用於連接遠端目標 |
| 版本控制 | 顯示目前分支與同步狀態 |
| 問題偵測 | 用於顯示專案中是否有錯誤 |
| 連接埠 | 用於顯示轉接的連接埠 |

----

### 狀態列右側：上下文項目


| 功能 | 描述 |
| ------------ | ------------------------ |
| 行 / 欄 | 顯示光標當下在哪裡 |
| 選擇縮排 | 顯示每次按下Tab的結果 |
| 選取編碼 | 設定目前檔案的編碼格式 |
| 選取行尾順序 | 設定檔案的換行規則 |
| 選取語言模式 | 設定檔案的程式語言 |

----

### 開啟專案

點選活動列的『檔案總管』，再按下『開啟資料夾』


----

### 檢視專案資訊


----

### 版本控管資訊


----

### 執行與偵錯


---

## Node.js 教學時間

----

### 變數宣告


let // 區域變數
var // 全域變數
const // 常數

----

### 資訊輸出


console.log("放什麼都行");

----

### 資訊輸入


const stdin = process.openStdin(); //建立stdin物件

//加入事件監聽器，當輸入後，顯示輸入的資訊
stdin.addListener("data", (d) => {
    console.log(d.toString().trim());
});

----

### 宣告方法


function abc() { //標準宣告
    console.log("xyz");
}

let def = () => { //簡短宣告
    console.log("ijk");
}

----

### JS物件


執行結果：

----

### JS陣列


執行結果：

----

### Node.js 提供的資訊

印出來：

console.log(process);

直接看：

----

### 來寫點東西試試

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 專案

----

### 初始化專案

yarn init -2

執行後的資料夾：

----

### 專案定義檔

> package.json

{
  "name": "Temp",
  "packageManager": "yarn@3.6.4"
}

----

### 新增套件

yarn add express

完成後的package.json

{
  "name": "Temp",
  "packageManager": "yarn@3.6.4",
  "dependencies": {
    "express": "^4.18.2"
  }
}

----

### 如果是開發依賴

yarn add -D @types/express

完成後的package.json

{
  "name": "Temp",
  "packageManager": "yarn@3.6.4",
  "dependencies": {
    "express": "^4.18.2"
  },
  "devDependencies": {
    "@types/express": "^4.17.20"
  }
}

----

### 加上自定義指令

假設想要執行檔案：

"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

(❁´◡\`❁)