---
# System prepended metadata

title: NodeJS開發環境設定
tags: [nodejs]

---

---
title: NodeJS開發環境設定
tags: nodejs
---

[toc]

# NodeJS開發環境設定

## 安裝nvm

```zsh=
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
```
* 加入.zshrc
```zsh=
export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
```

* nvm ls-remote: 列出遠端可用的 NodeJS 版本
* nvm ls: 列出本機安裝的 NodeJS 環境
* nvm install: 安裝指定版本的 NodeJS
* nvm uninstall: 移除指定版本的 NodeJS
* nvm alias: 設定別名
* nvm unalias: 移除別名
* nvm use: 套用指定版本

```bash=
nvm ls-remote
nvm install v16
nvm install v18
nvm ls

nvm use v16
node -v
npm -v

nvm alias default v18
node -v
npm -v
```

## 安裝vscode
```shell=
brew install --cask visual-studio-code

winget install -e --id Microsoft.VisualStudioCode
```
## 安裝git
```
brew install git

apt-get install git
```


## 新增vscode推薦套件(以後把常用套件整理完再追加)
```shell=
mkdir .vscode
touch .vscode/extensions.json
```
```json=
{
  "recommendations": [
    "waderyan.nodejs-extension-pack",
    "esbenp.prettier-vscode",
    "vscode-icons-team.vscode-icons",
    "dbaeumer.vscode-eslint",
    "orta.vscode-jest",
    "kavod-io.vscode-jest-test-adapter",
    "42crunch.vscode-openapi",
    "eamodio.gitlens"
  ]
}
```

## vscode工作區設定 - 採用Prettier存檔後自動格式化
```shell=
touch .vscode/settings.json
```

```json=
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}
```

## Prettier設定 - 存檔後觸發的格式化規則
```shell=
touch .prettierrc.json
```

```json=
{
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": false,
  "singleQuote": true,
  "semi": true,
  "trailingComma": "all",
  "endOfLine": "lf"
}
```
