Tools for web-developers. Support: [email protected] Web-site design is based on BriefCase and Futurico UIBriefCase and Futurico UI. I'm trying to migrate over to PHPStorm from Sublime2 and finding that Emmet doesn't really work as I expect. I know that blade support was recen. PhpStorm is a PHP IDE which keeps up with latest PHP & web languages trends, integrates a variety of modern tools, and brings even more extensibility with support for major PHP frameworks.
? PhpStorm Tips & Tricks #6 - Surround With And Emmet Last time I showed you the 'Surround With' feature, but there is more to it. @pronskiy gave me a hint that we can use it together with Emmet. You can use Emmet functionality for that - IDE supports it as well. Lorem.5 TAB (where TAB is an Emmet expand key, could also be Enter or Space - check the Settings (hint: use search box there to quickly narrow possible options)) will create 5 divs with Lorem Ipsum text.
The Emmet toolkit enhances coding with HTML, CSS, and JSX. You can use Emmet code templates without leaving PhpStorm. To expand a template into the correct markup, type its abbreviation and press Tab. For information about changing the shortcut, see Configure the abbreviation expansion key.
For example, in an HTML file, type
table>tr*3>td*2
and press Tab to get a stub of a 3x2 table:<table> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr></table>
PhpStorm supports such features as new syntax for writing RGBA colors, implied, default, and boolean attributes, the Update Tag action, and more.
Enable and configure Emmet
With PhpStorm, you can use native Emmet templates plus more than 200 additional HTML, CSS, and XSL live templates that are listed under the Zen CSS, Zen HTML, and Zen XSL nodes on the Editor | Live Templates page of the Settings/PreferencesCtrl+Alt+S.
- In the Settings/Preferences dialog Ctrl+Alt+S, go to Editor | Emmet
- On the Emmet page that opens, choose the key to expand Emmet abbreviations with, by default Tab is selected.
- To enable or disable Emmet in a specific language (HTML, CSS, or JSX), go to Editor | Emmet | <Language> and toggle the Enable <Language> Emmet checkbox. Use the controls on the Emmet page to configure Emmet in various language contexts.
PhpStorm lets you use and customize Emmet live templates, or you can add your custom templates. Suppose you have a template entry with the following template text:
To generate a list of entries, you just need to type
“entry-list<entry[number=$]*5″
and press Tab. By default, the number
attribute will be generated before type
. To customize the position where it is generated, you need to add the ATTRS
variable to your template, for example: <entry type='$TYPES$' $ATTRS$>$END$ <entry>
The
ATTRS
variable must have an empty string as the default value and should be skipped.Use live templates with Emmet
- In the Settings/Preferences dialog Ctrl+Alt+S, go to Editor | Live Templates.
- On the Emmet page, select the checkboxes next to the templates you want to use.
- When you select a template in the list, the focus moves to the Template Text area where the fields show the settings of the selected template.
- In the Template Text field, add the required text and variables to the template body.
- Click the Edit Variables button. In the Edit Template Variables dialog that opens, specify the default variable values in the Default value field and select the Skip if defined checkbox where necessary.
Configure the abbreviation expansion key
By default, Emmet native abbreviations and additional live templates are expanded by pressing Tab. For additional live templates, PhpStorm lets you re-define the default expansion key. Note, that this custom setting does not override the default setting for native Emmet support; you will just get the ability to expand the template using either of these keys.
Configure the expansion key for native Emmet abbreviations
- In the Settings/Preferences dialog Ctrl+Alt+S, go to Editor | Emmet.
- On the Emmet page that opens, choose the new expansion key instead of the default Tab from the Expand abbreviation with list.
Configure expansion keys for Emmet live templates
- In the Settings/Preferences dialog Ctrl+Alt+S, go to Editor | Live Templates.
- On the Live Templates page opens, expand the Zen HTML, Zen CSS, or Zen XSL template group and select the desired template. The focus moves to the Template Text area.
- From the Expand with list, choose the key to expand the template with.
Surround a block of code with an Emmet template
![Emmet Emmet](/uploads/1/1/9/5/119519806/834787303.png)
- In the editor, select a block of code to surround and press Ctrl+Alt+J or select Code | Surround with | Live Template from the main menu.
- From the Select Template list, select Emmet:
- Type the Emmet abbreviation to use and press Enter.Note the list to the right. Click the down arrow to view the history of recently applied Emmet live templates:Also mind the color indication. If you type a valid Emmet abbreviation, the background is green. However, when a non-existent abbreviation is entered, the background turns red:
Navigate between edit points
In HTML and XML, you can navigate between edit points, that is, between those points of code where Emmet templates are applicable.
- To move the cursor to the previous edit point, choose Navigate | Previous Emmet Edit Point, or press Alt+Shift+[.
- To move the cursor to the next edit point, choose Navigate | Next Emmet Edit Point, or press Alt+Shift+].
Earlier this week, we released the PhpStorm 8 EAP with a number of new features and improvements. We hear what you say on Twitter and on our issue tracker and that’s why we’re including your number one request: Multiple Selection. Let’s see how we can work with them!
Multiple Selection
With Multiple Selection, we can work with multiple cursors in one file simultaneously. Let’s start with some basics: press and hold Alt and use the mouse to select the locations where a cursor is desired.
Please note that default hotkey for multiple selection (multiple carets) add/remove caret has been changed from PhpStorm 8 EAP 138.256 build to Alt+Click (used to be Alt+Shift+Click before). It can be always changed in Settings | Keymap | Add or Remove Caret.
Cursor locations can also be added using Select Next Occurrence(Alt+J on Windows, Ctrl-G on Mac OS X): we can add the next occurrence of the current word to the selection and start working from there. Also we can Unselect Occurrence (Alt+Shift+J on Windows, Ctrl-Shift-G on Mac OS X). Select All Occurrences (Ctrl-Cmd-G on Mac OS X is already available, Windows hotkey Ctrl+Alt+Shift+J will be available from the next EAP – use double shift | Select All Occurrences action for now) will select all occurrences of current word/symbol in multiple caret mode. Hitting Escape lets us work with one cursor again.
Here’s a video of these concepts in action in an HTML file.
http://www.youtube.com/watch?v=aqGNM4rvyOE
![Emmet Emmet](/uploads/1/1/9/5/119519806/377235441.png)
Phpstorm Emmet Lorem
Multiple selection works with all languages supported by PhpStorm such as PHP, HTML, JavaScript, CSS and more. Here’s a (slightly insane) example of converting a Markdown file into PHP code using nothing but multiple selection:
http://www.youtube.com/watch?v=PIqBf7Ekjgk
Autocompletion (Ctrl+Space) and live templates are also available with multiple selection. Copy/paste also works: copying will store selected text from all cursors on the clipboard, pasting will add all clipboard text to every cursor location.
Here’s another video where we demonstrate Column Selection Mode (Alt and drag the mouse to select a region of text) as well as Emmet support inside multiple selection:
http://www.youtube.com/watch?v=-A9BwBA3s8I
Refactoring
While we agree multiple selection is super awesome, there are situations where refactorings are more appropriate. With great power comes great responsibility so it’s worth knowing when to use that power! Consider the following piece of code:
How can we rename the $config variable to $configuration here? It’s really tempting to use multiple selection but that would break all usages of the $config variable. It’s better to use a Rename refacoring in this case (Shift+F6).
Another example would be replacing strings in one document: using Select Next Occurrence (Alt+J on Windows, Ctrl-G on Mac OS X) we can easily select these strings and update them. But having the same string multiple times in a document is an antipattern… Instead, try using the Extract Variable in such case.
Want to give it a try? Find a new exercise in our PhpStorm Hands-On Workshop Materials!
As we are still working on this feature, we welcome your feedback through our issue tracker, in the comments below or in our forums! Current issues can be found by this link.
Phpstorm Emmet Sullivan
Develop with pleasure!
– JetBrains PhpStorm Team
– JetBrains PhpStorm Team