How to remove colon in Emmet+Stylus in JetBrains IDE?
For example, I type mb10 + tab and get margin-bottom: 10px
but it mast be a margin-bottom 10px (without the colon :)
How to disable it?
Currently it is not possible unfortunately.
https://youtrack.jetbrains.com/issue/WEB-15575 -- watch this ticket (star/vote/comment) to be notified on any progress.
the auto-completes that emmet give's you for somethings like mb10 or ovh or bd10 are coming from a fuzzy search result, and I'm almost sure that It's not editable (at least in an easy way)
but you can change somethings about emmet, and in your case
It's done in this way
CTRL + ALT + S (open's up settings panel)
go to the path editor > CodeStyle > liveTemplates
expand Zen CSS
scroll down and find mb, click on it
at bottem of settings panel you should be able to see a field called Template text
change It to this margin-bottom $VALUE$;
click on ok and it's done
if you do mb + tab the output would be margin-bottom ; with the caret instead of $VALUE$ , so you can insert it then and get out of it easily by tab key
but as I said , its not responsible for something like mb10 , because it's referring to a fuzzy search
Related
If you forget to close a HTML-Tag, Chrome will validate your code and try to fix problems like this.
I had a major problem because I forgot a closing Form-Tag, and instead of closing it correctly, Chrome deleted a following form, not the inputs, simply the Form-Tags.
When I looked at the Source Code itself, the Form-Tag was there, but not in the Elements-Tab in the console.
So at first, I thought it must have something to do with some JS deleting this DOM-Node and set a DOM-Breakpoint to find the script.
To cut a long story short, it took me hours to find out, that no JS deleted my form, but Chrome itself thought: There is a missing so I delete some other to fix that...
Is there any possibilty to see if Chrome automatically changes your DOM?
Thank You!
The browser Engine does indeed. They use string replace methods, although it happens internally.
<div>
</div>> // mistake
<div> //missing end tag
<div></div>
---------------------------------------------------
Methods
file=file.stringreplace('>>', '>')
an uneven count will add the missing div just after the next beginning div and conditionally if the missing is not found by the end of the file:
file=file.stringreplace('
<div>', '</div>
<div>')
The Parsing Engine after the missing and broken tags are repaired then parses the file and can then with a positive count set the screens GUI widgets by opening and closing tags as GUI Frames. It does this by adding tokens delimiters to the actual div tags making them easily distinguished from each other.
<div1s>
</div1e>
<div1s>//section columns
<div2s></div2e>
<div2s></div2e>
<div2s></div2e>
</div1e>
<div1s>Footer</div1e>
-----------------------------------------------------
The GUI Frame Tokens
for each "<dive1>"{
FrameCreate(CSS--ATTRIBUTES FROM ASSOCIATIVE ARRAYS--)
//the GUI Frame Widgets VERTICAL SECTIONS
}
//Next it finds the nested divs2 and embeds these into the thir parents above but with embedded Text Widgets also.
FrameTextBoxCreate(--CSS MATED ATTRIBUTES RULES--)
div3 etc------and so on.
In fact it is in the WebView GUI Widget Sets in its customized Mosaic Canvas Widget Sets in Chrome would be where they are repaired.
So I know autocomplete works great when you start typing a value. For example, the second you type the "c" in text-align:center, the available autocomplete values pop up (such as center, left, right).
However, when I used Dreamweaver, for properties with specific value options like text-align (center, right, left), display (block, inline-block), cursor (pointer, default), etc., the autocomplete popup would show immediately after the property was typed, it did NOT wait until I started typing a value. Right after text-align: was typed out, it would show me the autocomplete popup giving me the options center, right, left.
The value autocomplete should fire right after my property autocomplete fires:
So after I type te...
the autocomplete popup for "te" properties displays text-align, text-decoration, text-shadow etc....
then I press Enter to select text-align...
then immediately after pressing Enter an autocomplete popup should show for the text-align values: center, left, right.
Any idea how this can be accomplished in Sublime Text 3?
You can get ST to show the autocompletion popup again straight after a completion has been inserted using a small plugin and some preferences:
With a CSS file open in ST, open the Preferences menu and select Preferences - Syntax Specific. Add the following to the settings on the right hand side:
"auto_complete_triggers":
[
{
"characters": ": ",
"selector": "source.css meta.property-list.css meta.property-value.css"
},
],
and save it. This will tell ST to show the autocomplete popup automatically in CSS files when typing a : or a space when the syntax expects a property value.
Now, unfortunately, ST doesn't consider an autocompletion to have "typed" anything, so this trigger isn't fired automatically when selecting a property value like text-align from the autocomplete popup, which inserts text-align:. So, to get round that, this is where we need a small plugin. From the Tools menu, choose Developer -> New Plugin...
Select all text and replace with the following and save it, in the folder ST recommends (Packages/User/) as something like show_autocomplete_after_completion.py:
import sublime
import sublime_plugin
class AutoCompleteListener(sublime_plugin.EventListener):
def on_post_text_command(self, view, command_name, args):
if command_name in ('commit_completion', 'insert_best_completion'):
act = view.settings().get('auto_complete_triggers', [])
scope = view.scope_name(view.sel()[0].begin())
char = view.substr(view.sel()[0].begin() - 1)
for trigger in act:
if sublime.score_selector(scope, trigger['selector']) > 0:
if char in trigger['characters']:
view.run_command('auto_complete', { 'insert_best_completion': False })
break
This plugin basically detects when a completion has been inserted (although due to a limitation of the ST API, it can't detect when you click on an entry with the mouse - see https://github.com/SublimeTextIssues/Core/issues/1166), and if the text/character immediately before the caret matches one of the autocompletion triggers defined in the settings, then it will show the autocomplete popup again.
You can try out this package. This package indexes your .less and .scss (or .sass) and caches your mixins, variables, class or id names and autocompletes both on html and css. It autocompletes your less and sass mixins with mixin arguments. It also supports emmet completions and gets your css classes on popup window. -
https://github.com/subhaze/CSS-Extended/
I really like how Emmet generates HTML based on 'CSS-like' strings but I don't want to use their CSS Abbreviations. Cause when I write a piece of css as follows:
li a|
And I press 'TAB', I want to get a Tab
li a |
But with Emmet I get the following when I press Tab
li |-webkit-appearance: none;
-moz-appearance: none;
appearance: none
How can I disable this functionality of Emmet?
In Emmet.sublime-settings you have to update disable_tab_abbreviations_for_scopes property: add source.css to disable Tab trigger completely in CSS.
Also, if you’re on ST2, you may want to take a look at disable_tab_abbreviations_for_regexp preference due to some bugs in ST2 scope matcher.
If you installed with package control, search for Package Control: Remove Package in the command palette. Otherwise you can just remove the Emmet directory.
If you wish to use a custom caption to access commands, create Default.sublime-commands in your User folder. Then insert something similar to the following.
[
{
"caption": "Package Control: Uninstall Package",
"command": "remove_package"
}
]
Of course, you can customize the command and caption as you see fit.
Or try like this: CTRL + SHIFT + P >> Remove Package >>
Select package to remove then press enter
Instead of pressing Tab, you can use Shift+Tab to insert a tab without triggering the tab trigger.
It’s documented in the Sublime Text documentation.
Preferences.sublime-settings - toggle on/off is there.
Someone was able to so quickly help me with a problem I'd spent hours and hours on, that I'm hoping I'll get lucky and someone can point me in the right direction on this one, too.
I didn't see anyone else with quite my issue here - and I'm new to working with WP templates instead of plain old HTML/CSS/JS stuff.
Basically - on a site we did (www.opted.org) with a purchased WP theme - I can't get the mobile version collapsible menu to stop defaulting on page load to the last item in the Main Menu.
So instead of something that makes sense - like About ASCO, or even being able to add "Select Page" - the drop down shows "-- past issues"
I don't care how I fix it really, but the client just doesn't want that page to be the default. I tried adding an extra menu item at the end called "Select Page" with an href='#' and using CSS to hide it on screens above 480px - but I couldn't get it to work no matter how I tried to refer to it.
I feel like this should be easy - but I don't know where to set the selected LI among the many WP files.
Thanks!!
I had a look at the plugin.js file on the site www.opted.org.
On line 22, there is 'header' : false // Boolean: Show header instead of the active item
and on line 41 there is jQuery('<option/>').text('Navigation')
Try setting line 22 to true, and text('Navigation') to your 'Select Page' if you prefer that over the text 'Navigation'
Or, according to the tinynav.js page (http://tinynav.viljamis.com/), you can customize that as an option like this:
$("#nav").tinyNav({
active: 'selected', // String: Set the "active" class
header: 'Navigation', // String: Specify text for "header" and show header instead of the active item
label: '' // String: Sets the <label> text for the <select> (if not set, no label will be added)
});
In your main.js file, your calling it on line 14. You should add that header: 'Navigation', option there.
It's hard to answer this question without knowing how the theme you are using works. However, you can certainly change the selected attribute using javascript.
Here's the code you would use to set it to 'About Asco' using jQuery:
jQuery('.tinynav').val('/about-asco/')
alternatively (a little clearer, but more verbose):
jQuery('.tinynav option:first').prop('selected', true);
I have a very long and very nested HTML document, where I need to quickly find the closing tag. How can I do this?
Try Emmet plug-in command Go To Matching Pair:
http://docs.emmet.io/actions/go-to-pair/
Shortcut (Mac): Shift + Control + T
Shortcut (PC): Control + Alt + J
https://github.com/sergeche/emmet-sublime#available-actions
There is a shortcut (Ctrl+Shift+A for Windows and Linux users, Command+Shift+A for Mac users) to select the whole block within the currently selected tag.
For example, if you pressed this while your text cursor was within the outer div tag in the code below, all the divs with class selected would be selected.
<div class='current_tag_block'>
<div class='selected'></div>
<div class='selected'></div>
<div class='selected'></div>
<div class='selected'></div>
</div>
As #frazer-kirkman mentioned in a comments you can also move your cursor to the start or to the end of the selected block by pressing either Left or Right button on a keyboard depending on your cursor's position
It's built in from Sublime Editor 2 at least. Just press the following and it balances the HTML-tag
Shortcut (Mac): Shift + Command + A
Shortcut (Windows): Control + Alt + A
None of the above worked on Sublime Text 3 on Windows 10,
Ctrl + Shift + ' with the Emmet Sublime Text 3 plugin works great and was the only working solution for me.
Ctrl + Shift + T re-opens the last closed item and to my knowledge of Sublime, has done so since early builds of ST3 or late builds of ST2.
Under the "Goto" menu, Control + M is Jump to Matching Bracket. Works for parentheses as well.
As said before, Control/Command + Shift + A gives you basic support for tag matching. Press it again to extend the match to the parent element. Press arrow left/right to jump to the start/end tag.
Anyway, there is no built-in highlighting of matching tags. Emmet is a popular plugin but it's overkill for this purpose and can get in the way if you don't want Emmet-like editing. Bracket Highlighter seems to be a better choice for this use case.
I think, you may want to try another approach with folding enabled.
In both ST2 and ST3, if you enable folding in User settings:
{
...(previous item)
"fold_buttons": true,
...(next item, thus the comma)
}
You can see the triangle folding button at the left side of the line where the start tag is. Click it to expand/fold. If you want to copy, fold and copy, you get all block.