Eclipse 學習與使用

Eclipse 安裝、設定、使用

Eclipse 下載 / 安裝

應先安裝 Node.js

官網 LTSNode.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 (參與更多研討👉 hypothesis)

或免安裝版 Package (壓縮檔)

指定 workspace 資料夾

EclipsePreferences 相關的設定,及工作區設定存放於自行指定的資料夾。

指定存放 workspace 資料的資料夾

Eclipse 啟動時可指定資料夾。

Preferences 指定 workspace encode

指定 workspace encodeutf-8

如何安裝 Eclipse Plugin (software)

Eclipse Marketplace 安裝 Plugin

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

配置 Web 開發工具

加掛 Eclipse Web Developer Tools (WDT)

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

Preferences 相關設定

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

指定 css 新檔編碼

指定 html 新檔編碼

自定 css template 內容:修改 (Edit) ,新增 (New) ,也可以轉出 Exportxml 檔備存。

圖示:修改或新增 css template

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

圖示:修改或新增 html template。

圖示:轉出 (Export) 成 xml 檔。

加掛 Emmet 快速編輯程式

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

圖示:新增軟體網址

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

加掛 AnyEdit Tool 轉換編碼工具

Eclipse Marketplace Client 搜尋安裝即可。

Collaboration 協作

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

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

Saros 註冊帳號及使用

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

在編輯器 (editor) 內常用的快速鍵

通用快速鍵

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

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

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

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

html editor 常用快速鍵

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

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