PhpStorm HTMLEditorinPhpStorm 200116 0043 2512
PhpStorm HTMLEditorinPhpStorm 200116 0043 2512
PhpStorm HTMLEditorinPhpStorm 200116 0043 2512
Tweet
PHP development happens at the back-end, but also at the front end. In this tutorial, we'll have a quick look at the HTML editor provided by
PhpStorm.
Editing HTML using PhpStorm
Open in Browser
Working with Live Edit
Make sure to also check the CSS Editor in PhpStorm tutorial.
HTML is quite verbose. To write HTML code faster and more efficient, PhpStorm lets us use Emmet, which provides a shorthand for lots of things.
For example, we can type p>lorem and hit TAB to expand into a paragraph with Lorem Ipsum text. A more advanced example would be div#cont
ainer>div.span4*3>img.thumbnail+p>lorem which expands into a container div with a grid system in which each cell contains an image and a
paragraph.
From the Structure tool window, which can be opened by pressing Alt+7 (CMD+7 on Mac OS X), we can see the structure of the HTML file we
are working with. It lets us navigate through the file with ease, using the arrow keys on our keyboard. We can also search for a given style. All we
need to do is start typing inside the tool window. What's great is that the structure tool window shows the structure of any language we're using in
an HTML document, including CSS and JavaScript.
Check the Working with the PhpStorm Editor Actions and Navigation tutorial to learn more about common editor features like
navigation, bookmarks, code inspections and more.
Open in Browser
While working on a document, we can quickly open it in a browser to see the result of our carefully crafted HTML. All we have to do is pick our
browser of choice after hovering over our document (or press Alt+F2 and pick from the list).
From the IDE Settings | Web Browsers, we can configure the browsers that are available for showing previews as well as pick the default
browser PhpStorm uses. For example, we could add Chromium to the available browsers.