---
# System prepended metadata
title: VS Code & Node.js課程
---
---
title: VS Code & Node.js課程
date: 2023-10-18
langs: zh
type: slide
---
### GDSC NYUST x 資訊創客社
### 軟體開發工具入門讀書會
#### VS Code & Node.js課程
#### 2023/10/18 ( Wed ) 19:00 - 21:00
#### 講師：蘇祐民
#### 本次課程影片：
![]()
---
# 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
```
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)
啟用後就可以直接開始使用
```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
(❁´◡\`❁)