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.