前端開發IDE VSCode + live preview

live preview

爲方便web開發者，編寫網頁靜態代碼，不用頻繁切換到瀏覽器去查看的貼心功能。

能夠在編輯器中，就實現編輯預覽功能， 邊編寫代碼，邊查看預覽效果。

與vscode相對應的其餘兩款編輯器具備相同功能， 這兩款編輯器是專門爲web開發設計。

vscode覆蓋範圍更廣， 其它多種類型語言都支持。

因此熟悉的vscode更具備優點。

 

Brackets

http://brackets.io/

Adobe出品。

A modern, open source text editor that understands web design.

Live Preview

Get a real-time connection to your browser. Make changes to CSS and HTML and you'll instantly see those changes on screen. Also see where your CSS selector is being applied in the browser by simply putting your cursor on it. It's the power of a code editor with the convenience of in-browser dev tools.

 

Atom

github出品

https://www.sitepoint.com/7-atom-add-ons-for-running-code-and-previewing-changes/

Atom HTML Preview

Atom HTML Preview shows a live, as-you-type preview for HTML documents, with support for CSS and JavaScript. This is somewhat basic for today’s web development, but it’ll do the work just fine for many of us. It’s a simple, lightweight package that does exactly what’s expected.

 

 

 

 VSCode

 https://code.visualstudio.com/

Code editing. Redefined.

Meet IntelliSense.

Go beyond syntax highlighting and autocomplete with IntelliSense, which provides smart completions based on variable types, function definitions, and imported modules.‘’

Print statement debugging is a thing of the past.

Debug code right from the editor. Launch or attach to your running apps and debug with break points, call stacks, and an interactive console.

 

 VSCode Live Preview

 在插件搜索欄中搜索 Preview， 選擇 Preview on Web Server 安裝。

 

 

 而後打開一個HTML文件， 在編輯區點擊鼠標右鍵， 選擇 Preview on Side Panel

 

 顯示HTML運行結果：

這樣邊編寫代碼，就能夠在右邊查看執行結果。

固然也能夠選擇在瀏覽器中查看。