HTML / CSS 的 Quokka

雖然目前前端 CLI 都內建 Webpack-dev-server,可即時反應 HTML / CSS / ECMAScript 的改變,但有時只想測試或示範 HTML / CSS,並不牽涉 ECMAScript,此時可搭配 VS Code 的 Extension: Live Server,就可滿足我們的需求。

Version


VS Code 1.33.1
Live Server 5.5.1

Live Server


live000

在 VS Code 安裝 Live Server extension。

Configuration


live002

在 VS Code preference 下輸入 live server,選擇 Live Server Configuration,可單獨設定 Live Server。

Live Server 會開啟系統預設 browser,若你想讓 Live Server 所使用的 browser 與系統不一樣,可設定 Custom Browser

Preview


live001

開啟 *.html,在 command pallette 下輸入 live,選擇 Live Server: Open with Live Server

live003

Live Server 預設會啟動在 127.0.0.1:5500

CSS & RWD


live004

由於 CSS 是垂直發展,在練習 CSS 或 RWD 時,可將 browser 與 VS Code 並排顯示。

live005

由於 HTML 是水平發展,在練習 HTML 時,可將 browser 與 VS Code 水平顯示。

Conclusion


  • Live Server 可視為 HTML / CSS 的 Quokka,讓我們在練習 HTML / CSS 時,能立即看到成果

Reference


Ritwick Dey, Live Server

2019-04-15