Multiple cursors, Code Completion for PHP, Emmet.io, Sublime Text Bindings
Multiple Cursors and Selections
We are happy to announce that Codeanywhere now includes multiple cursor/selection support. You can now create multiple cursors and selections in order to make lots of similar edits at once. It’s useful for things like adding the same text in multiple places or quickly renaming a variable.
There are several ways to create multiple cursors or selections:
- Hold down the Alt key, then drag vertically to create cursors, or drag diagonally to create a rectangular selections.
- Using Cmd (Mac) / Ctrl (PC) with the mouse click you can set the cursors in all places you need
- Split selection in lines using Cmd+Shift+L (Mac) / Ctrl+Shift+L (PC)
- Using Cmd+D (Mac) / Ctrl+D (PC) you can search for the next occurance of currently selected text and replace them watching the text change as you type
To switch back to single selection just click anywhere in your code or hit Esc key
Code Completion for PHP
There hasn't been any good code completion for PHP for a long time. Now we have finally added a real code analysis algorithm that scans your opened PHP files and creates logical code completion results that will help you create your code much faster than before.
Automatic code completion finalizes variable names, classes, methods and PHP keywords. All standard PHP functions have nice documentation helper shown next to autocomplete list panel.
If you have any logical errors in your code Codeanywhere will alert you so you can easily find and fix them.
Emmet.io Support
How much time do you spend writing HTML code: all of those tags, attributes, quotes? Or CSS defitions, always repeating similar patterns?
Emmet (previously known as Zen Coding) is a web-developer’s toolkit that can greatly improve your HTML & CSS workflow
With Emmet feature at Codeanywhere you can type CSS-like expressions that can be dynamically parsed, and produce output depending on what you type in the abbreviation.
Abbreviations are the heart of the Emmet toolkit: these special expressions are parsed in runtime and transformed into structured code block, HTML for example. The abbreviation’s syntax looks like CSS selectors with a few extensions specific to code generation. So every web-developer already knows how to use it.
Here’s an example: this abbreviation
#page>div.logo+ul#navigation>li*5>a{Item $}
...can be transformed into
<div id="page">
<div class="logo"></div>
<ul id="navigation">
<li><a href="">Item 1</a></li>
<li><a href="">Item 2</a></li>
<li><a href="">Item 3</a></li>
<li><a href="">Item 4</a></li>
<li><a href="">Item 5</a></li>
</ul>
</div>
...with just a single key stroke (Tab key)
For CSS syntax, Emmet has a lot of predefined snippets for properties. For example, you can expand m abbreviation to get margin: ; snippet. But you don’t want just margin property, you want to specify a value for this property. So you have to manually type, let’s say, 10px.
Emmet can greatly optimize your workflow here: you can inject value directly into abbreviation. To get margin: 10px; you can simply expand the m10abbreviation. Want multiple values? Use a hypen to separate them: m10-20 expands to margin: 10px 20px;. Negative values? No problem: precede the first value with hyphen and all the rest with double hyphens: m-10--20 expands to margin: -10px -20px;
For more information on using emmet check its documentation: http://docs.emmet.io/
Sublime Text Bindings
With multiple cursor/selection support, you can now use shortcuts that you are used to in Sublime Text (selecting next occurance, splitting selections, swaping lines and more).