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

[toc]

# NodeJS開發環境設定

## 安裝nvm

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

* 加入.zshrc

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: 套用指定版本

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

brew install --cask visual-studio-code

winget install -e --id Microsoft.VisualStudioCode

## 安裝git

brew install git

apt-get install git

## 新增vscode推薦套件(以後把常用套件整理完再追加)

mkdir .vscode
touch .vscode/extensions.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存檔後自動格式化

touch .vscode/settings.json

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

## Prettier設定 - 存檔後觸發的格式化規則

touch .prettierrc.json

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