Shortcut to paste multiple lines - Sublime Text 2 - html

I am using Windows 8 OS
I have some projects where I repeatedly add the same tags to different types of elements, but the format of how the elements are presented through code always stays the same. I'm looking for shortcuts that will help me do these tasks quickly. Is there a shortcut that lets you add the same tag for multiple lines that you specify? I know you can do (CTR + F3) To select clone tags and change all of them, but I want to add tags to elements that previously had no tag. Is there a way you can make your own shortcuts for your tags, like if I type in "li" It will automatically put in "" and all I have to do is hit enter?
Here is an example of the elements and tags I added:
<ul>
<li type="square">Extra Grip
<li type="square">Made of Titanium
<li type="square">Built in Selsoft Processor
<li type="square">Portable</ul>
<b>MBS:</b> 44 kN (10000 lbf)<br>
<b>Weight:</b> 1 lbs 13.2 oz (828 g)<br>
<b>Length:</b> 14.40" (36.6 cm)<br>
<b>Width:</b> 3.75" (9.5 cm)<br>
<b>Height:</b> 1.00" (2.5 cm)<br>
<b>Material:</b> Titanium

Ctrl+C, Ctrl+X and Ctrl+V let you copy/cut/paste lines if you don't select anything. So, Ctrl+X doesn't "delete" a line, it cuts it. To delete a line, the default shortcut is Ctrl+Shift+K :)
Highlighting a bunch of lines then hitting Cmd (Ctrl?) +Shift+L gives you multi-cursors on each line. I do that, followed by Cmd + Right arrow (End?) to get easily get a cursor at the end of a series of lines to simultaneously type something after each.
Ctrl+Shift+J expands the selection to the indentation level of the current line. So if you want to select a block of code with the same indentation it's really useful.
Alt + F3 select all occurrences of current word for multiple editing. Very useful.
A few written about in more detail: http://whiletruecode.com/post/7-handy-text-manipulation-tricks-sublime-text-2

Have you tried to make your own snippets? It may not be exactly what you are asking for, but could be another way to do it.
Try the New Snippet command in the Tools-menu and add the following and save it:
<snippet>
<content><![CDATA[
<li type="square">${1:Item} ${2:}
]]></content>
<tabTrigger>li</tabTrigger>
</snippet>
This will enter an <li>-tag in the current file if you type li and then press Tab.
You can also add a <scope> tag to limit it to HTML-files.

Related

How to add auto-complete Sublime Text 3

I would like to add custom auto-complete key bindings much like built-in:
Example: html+tab auto-completes the Doctype Block.
I tried adding html custom key binding: type c + o + l + tab to generate <div class="col-">
Preferences > Key Bindings > Default (OSX).sublime-keymap -- User
{"keys": ["c+o+l+tab"], "command": "insert_snippet", "args": {"contents": "<div class=\"col-$0\">"}},
However, two issues:
the new key binding overrides all other auto completes
the initial col or characters remains in front of the
generated tag. col<div class="col-">
What is the correct way to add this type of key binding?
The correct way to do something like this is to use either snippets or completions. Although there are some differences, generally speaking they both work the same way in the end, and which one you choose depends on how many such items you want to create and how complex you want them to be.
Using a snippet, you would select Tools > Developer > New Snippet... from the menu and fill out the snippet template, then save it as a sublime-snippet file in the location that Sublime defaults to (which is your User package).
For example, that might look like the following based on the example in your question:
<snippet>
<content><![CDATA[
<div class="col-$0">
]]></content>
<description>Insert DIV with column class</description>
<tabTrigger>col</tabTrigger>
<scope>text.html</scope>
</snippet>
Snippets are XML formatted, and everything between ![CDATA[ and ]] is inserted into the buffer (don't remove the CDATA even if you think you don't need it; Sublime will ignore the snippet if you do).
The tabTrigger specifies the text that you want to be the trigger for the snippet, the scope says what sort of files the snippet should trigger in, and the description will be displayed next to the snippet in the auto-completions panel.
In a snippet, the tabTrigger, scope and description are all optional. If you don't specify a tabTrigger you can only expand the snippet from the Command Palette or via the insert_snippet command (for example in a key binding). Without a scope the snippet applies everywhere, and without description it has no description in the panel.
If you have many such items that you want to add snippets for, you can also use completions instead. These are stored in JSON files with an extension of sublime-completions and should be saved in your User package (use Preferences > Browse Packages... if you don't know where that is.
An example of such a file would be:
{
"scope": "text.html",
"completions": [
{ "trigger": "col\tInsert DIV with column class", "contents": "<div class=\"col-$0\">" },
]
}
In this format, the trigger is always the text to trigger and the description (still optional) is separated from the trigger by a \t character in the trigger key.
In completions you only specify the scope once at the top instead of every time, but there are some functional differences between completions and snippets.
There can only be one snippet per sublime-snippet file, but a sublime-completions file can contain many completions in a single file; the completions key is an array so you can place more than one completion in the same file.
Completions are JSON, so contents that are multi line or contain JSON specific characters such as a " character are harder to enter; completions are better for shorter sequences while snippets are better for more complex things.
When autocomplete triggers, if there is a completion and a snippet that could be autocompleted, snipptets always "win" and are inserted, whereas completions cycle. That means that for example in this particular example you need to press Tab twice because col is also the name of a tag.
Snippets automatically appear in the command palette (when they apply) but completions do not. In the command palette, Snippets appear as commands like Snippet: Something, where Something is the description if it exists and the name of the file if it does not.
In either case, you can make the snippet/completion apply only in certain types of files by applying a scope; to determine the appropriate scope, position the cursor in a file at the appropriate place and select Tools > Developer > Show Scope Name...; the more of the displayed scope you use the more specific it becomes. Generally just the top level such as text.html is all that's needed unless you're doing something special.

How can I modify DOM value batch?

I visit a web page that contains so many text area, and I must replace the text to something else.
One text are like this:
<input type="text" name="field" value="round(avg(value0),2)">
I need replace round(avg(value0),2) to value0, so I think I can replace round(avg( to empty, and then replace ),2) to empty. But I don't know how to replace this batch (it may have 100 this text).
If you open your HTML document in Visual Studio and then press Ctrl+Shift+H, it will open the follow dialog box:
Select Current Document in the Look in: dropdown.
Enter what you want to find in the Find what: box and then keep the Replace with: box blank, then click Replace All. This will replace all of those instances with blank text, effectively removing the instances.

How do I select the line at the caret in PhpStorm?

I found "Select Word at Caret" in the Edit menu. Is there a way to do similar, but select the entire line?
If you have nothing selected, and press ⌘ + C, PhpStorm will automatically copy the line at the caret. So basically, you don't need the 'Select Line at Caret' action.
I found "Select Line at Caret" in Preferences under "Keymap". (And associated it with ⌘-L.)
If you are using phpstorm 9 you can press couple of times ctrl + w to select the current line. Also it has some other benefits. Check out Extending selection at https://www.jetbrains.com/phpstorm/help/selecting-text-in-the-editor.html for more details

Fold / Collapse the except code section in sublime text 2

Is there any plugin or shortcut to hide all except code section in sublime text 2?
I need to fold all except section at a time , Not fold one section at a time.
Thanks~
If you'll hover with the mouse over the line numbers you'll see arrows - clicking on any of them will fold/collapse the code
If you want to collapse/expand all - you can do so by going to edit->code folding and choose "fold all" or "unfold all":
In addition to the other answers it is also possible to fold based on level as well. So for example looking at the default key bindings for fold.
Searching for fold key bindings.
So for example a foldall, or folding level 1 would be to hold Ctrl followed by pressing the sequence k and then 1:
Or folding level 2 would be to hold Ctrl followed by pressing the sequence k and then 2:
Or unfolding all would be would be to hold Ctrl followed by pressing the sequence k and then 0 or in my defaults I also seem to have it bound to the letter j:
Warning.
Pressing Ctrl+k twice will remove a line or a count of lines.
But not really cause you can put them back one by one by Ctrl+u
One thing you can do is select the Except code bloc using a regular expression, for instance using except(.|\n)*?raise.* in your case. You can then select "Find all" in the search bar, then Edit->Code Folding -> Fold .
Windows shortcut : Ctrl-Shift-[
Mac shortcut: Cmd-Alt-[
All the Except bloc will then be collapsed.
I know this is an old question, but it still comes up high in search results and none of the answers quite do what the OP wanted.
select the code you don't want to be hidden
use "Selection" -> "Invert Selection" to select the code you do want to be hidden instead
use ctrl + shift + [ or Command + Option + ] to collapse the selection(s)
This will leave you with just the code you originally had selected visible.
Fold and UnFold function or class base only for MAC:
* Fold: command + K, command + 1
* UnFold: command + K, command + J

Sublime Text 2, faster alternative to find and replace regex?

$_POST['daily_limit'];
$whatever = $_POST['smoke'];
$_POST['soup'] + $_POST['cake'];
to
$this->input->post('daily_limit');
$whatever = $this->input->post('smoke');
$this->input->post('soup') + $this->input->post('cake');
In this example, is there any faster way to switch from $_POST[] to $this->input->post() without writing up a regular expression find and replace? I don't care if it takes multiple steps. Writing the regex for this (find: \$_POST\[(.*?)\] replace: \$this->input->post\($1\)) takes longer than changing them all manually (maybe I'm just not good at regex). Any ideas?
I'm making a brash assumption here, that you have only one variable within each pair of brackets and that the variables only contain alphanumeric characters. ['soup'+'bacon'] will break this trick, as will ['soup-with-bacon'].
With your cursor, highlight an instance of $_POST[ - nothing else.
Hit Alt+F3 if you're on Windows/Linux (Cmd+ShiftG in Mac?)
Try to scroll through and see if everything that's selected is everything you want to replace.
Type $this->input->post( - nothing else.
Press → to move all cursors to the right of the first quote.
Press Ctrl+→ (this is the only remotely wtfh4xxy part of the process, and only if you're not used to navigating by word with the cursor) to navigate over the variable.
Press → twice to move all cursors to the right of the next quote.
Replace the ]with a ).
#nnnn I did a variation of your version to remove the wtfh4xxy part.
select:$_POST
altf3
type: $this->input->post(
ctrlshiftm
ctrlx
ctrlshiftm
ctrlv
type: )
Sublime text ftw!