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.
Related
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/
What changes are needed to modify tag matching in Sublime 3, Build 3143, from an underline to background color. Much of the documentation I have been able to find online seems either out of date or incomplete. Below is an example of the desired effect.
Core Sublime only matches brackets and tags with a dotted underline, and as far as I'm aware it's not possible to visually modify the style in the general case.
To get around that, you can use the BracketHighlighter package to do what you want. Once you've installed it, you will need to configure it to your liking, for which you should check out the documentation.
Briefly, in order to get it to do something like what you've outlined above, you want to select Preferences > Package Settings > BracketHighlighter > Bracket Settings from the menu (Preferences is under Sublime Text if you're on MacOS) and then add the following to the default settings:
"user_bracket_styles": {
"tag": {
"icon": "tag",
"color": "region.purplish",
"style": "solid"
},
}
Note that region.purplish as a potential scope name was added in Sublime build 3148, so for build 3143 you will need to select a scope name that is colored the way that you want in whatever color scheme you're using. For example, if you're using the Monokai color scheme, the scope constant.language looks purple.
When I comment html files, vscode wraps my selection and puts a single
tag around the whole selection.
How can I change it that instead it comments every single line individually? (like e.g. in webstorm)
Thanks!
Keyboard shortcut to comment multiple in Windows is 'Shift+Alt+A'.
I made an extension that will do what you want: Toggle Comments.
Using this keybinding:
{
"key": "ctrl+alt+/", // whatevefr keybinding you wish
"command": "toggle-comments.toggleLineComments",
"when": "editorTextFocus"
}
Use the keyboard shortcut:
ctrl + shift + /
I would like to wrap my selected html within a tag in VS code.
How do I do that?
Embedded Emmet could do the trick:
Select text (optional)
Open command palette (usually Ctrl+Shift+P)
Execute Emmet: Wrap with Abbreviation
Enter a tag div (or an abbreviation .wrapper>p)
Hit Enter
Command can be assigned to a keybinding.
This thing even supports passing arguments:
{
"key": "ctrl+shift+9",
"command": "editor.emmet.action.wrapWithAbbreviation",
"when": "editorHasSelection",
"args": {
"abbreviation": "span",
},
},
Use it like this:
span.myCssClass
span#myCssId
b
b.myCssClass
A quick search on the VSCode marketplace: https://marketplace.visualstudio.com/items/bradgashler.htmltagwrap.
Launch VS Code Quick Open (Ctrl+P)
paste ext install htmltagwrap and enter
select HTML
press Alt + W (Option + W for Mac).
As I can't comment, I'll expand on Alex's fantastic answer.
If you want the Sublime-like experience with wrapping, open up the Keyboard Shortcuts (command ⌘/Ctrl+shift+P > Preferences: Open Keyboard Shortcuts (JSON)) and add the following object:
{
"key": "alt+w",
"command": "editor.emmet.action.wrapWithAbbreviation",
"when": "editorHasSelection && editorTextFocus"
}
Which will bind the Emmet wrap command to option
⌥/Alt+W when text is selected.
You can also use the UI to do this, open the Keyboard Shortcuts menu and search for "emmet wrap with abbreviation" to add the shortcut.
Open Keyboard Shortcuts by typing ⌘ Command+k ⌘ Command+s or Code > Preferences > Keyboard Shortcuts
Type emmet wrap
Click the plus sign to the left of "Emmet: Wrap with Abbreviation"
Type ⌥ Option+w
Press Enter
imo there's a better answer for this using Snippets
Create a snippet with a definition like this:
"name_of_your_snippet": {
"scope": "javascript,html",
"prefix": "name_of_your_snippet",
"body": "<${0:b}>$TM_SELECTED_TEXT</${0:b}>"
}
Then bind it to a key in keybindings.json E.g. like this:
{
"key": "alt+w",
"command": "editor.action.insertSnippet",
"args": { "name": "name_of_your_snippet" }
}
I think this should give you exactly the same result as htmltagwrap but without having to install an extension.
It will insert tags around selected text, defaults to <b> tag & selects the tag so typing lets you change it.
If you want to use a different default tag just change the b in the body property of the snippet.
With VSCode 1.47+ you can simply use OPT-w for this.
Utilizing built-in functionality to trigger emmet, this is the easiest way:
Select your text/html.
Shift+Option+w
In the emmet window opened in the command palette, type in the tag or wrapping code you need.
Enter
Voila
Many commands are already attached to simple ctrl+[key], you can also do chorded keybinding like ctrl a+b.
(In case this is your first time reading about chorded keybindings: They work by not letting go of the ctrl key and pressing a second key after the first.)
I have my Emmet: Wrap with Abbreviation bound to ((ctrl) (w+a)).
In windows: File > Preferences > Keyboard Shortcuts ((ctrl) (k+s))> search for Wrap with Abbreviation > double-click > add your combonation.
I just installed htmltagwrap from extension marketplace and used ALT-W to wrap the tags (Windows Version).
There is a fast typing of the solution.
Open the command palette (usually Ctrl+Shift+P)
Preferences: Open Keyboard Shortcuts (JSON)
Add this snap code
{
"key": "ctrl+`",
"command": "editor.action.insertSnippet",
"when": "editorTextFocus",
"args": {
"snippet": "~~${TM_SELECTED_TEXT/^([\\t]*).*$/$1/}${TM_SELECTED_TEXT/^[\\t]*(.*)$/$1/}${TM_SELECTED_TEXT/^([\\t]*).*$/$1/}~~"
},
}
You select any text and press ctrl+`
result:
~~YourText~~
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