應先安裝 Node.js

官網 LTS 版 Node.js (可自行指定安裝的資料夾)

安裝完成，開始功能表 Node.js command prompt ，👇應有類似成功訊息

Your environment has been set up for using Node.js x.x.x and npm.

或於 command line (命令提示字元)

prompt>node -v

會顯出 Node.js 版本👆

安裝 Eclipse

官網 Eclipse Installer (參與更多研討👉 )

或免安裝版 Package (壓縮檔)

指定 workspace 資料夾

Eclipse 將 Preferences 相關的設定，及工作區設定存放於自行指定的資料夾。

Preferences 指定 workspace encode

指定 workspace encode 為 utf-8 。

Eclipse Marketplace 安裝 Plugin

官網 Introducing the Eclipse Marketplace Client (MPC) ，介紹如何在 Eclipse 裡安裝 Plugin 。

加掛 Eclipse Web Developer Tools (WDT)

使用 Eclipse Marketplace Client 安裝。 (參與更多研討👉 )

Preferences 相關設定

指定建立 CSS, html 新檔以 utf 編碼

自定 css template 內容：修改 (Edit) ，新增 (New) ，也可以轉出 Export 成 xml 檔備存。

自定 html template 內容：修改 (Edit) ，新增 (New) ，也可以轉出 (Export) 成 xml 檔備存。

加掛 Emmet 快速編輯程式

官網安裝指示 。需 Add 軟體網址 http://download.emmet.io/eclipse/updates/ 。

勾選整個 Emmet ，依照視窗下方按紐指示安裝。

加掛 AnyEdit Tool 轉換編碼工具

以 Eclipse Marketplace Client 搜尋安裝即可。

安裝 Saros Real-Time Collaboration 同步即時協作

官網安裝說明。 (參與更多研討👉 )

Saros 註冊帳號及使用

官網使用介紹。 (參與更多研討👉 )

通用快速鍵

• alt-/ ：顯示輸入內容提示。

• ctrl-D ：刪除目前選取的行。外掛 Emmet 另增加向外選取所在整層。

• f3 ：開啟游標所在位址的檔。

• alt-ctrl-▼ ：將游標所在行、或選取的行，複製至下一行。

html editor 常用快速鍵

• alt-shift-▲ ：選取包圍目前內容的元素。

• ctrl-shift-C ：將目前選取的行切換註解。