Sublime Text 3 Emmet triggering conflict? - css

I just started using Sublime Text 3 beta. Love it so much.
And I love using Emmet while coding.
But there's one thing annoys me that whenever I am editing CSS for example, code suggest interrupts so my trigger key(which is Tab key) won't work. (I have to hit Enter key instead).
Does anyone know how to fix this problem?

I found a solution
Changing a line in key binding file from:
{ "keys": ["enter"], "command": "commit_completion", "context":
to:
{ "keys": ["tab"], "command": "commit_completion", "context":
that worked for me.
I go for this for the time being. I still want other suggestion though.
Thanx.

The third version is not yet stable (only beta). You can report the problem here

Emmet parses abbreviations in real time but Sublime Text does not provide API to correctly override native snippets. So there are might be some quirks when expanding abbreviations by Tab key.
You may want to disable disable_tab_abbreviations_on_auto_complete preference to make Tab key exclusive for Emmet: https://github.com/sergeche/emmet-sublime/blob/master/Preferences.sublime-settings#L29
But you will not be able to use native snippets in HTML and CSS anymore.

Related

STOP auto adding space after colon on css properties

Yes, I know, according to someone's criteria this is more readable.
In our case it is NOT and we have programmed like this for years and we do not want to change it.
How can I disable that when I add a CSS property with auto-completion, it puts a space after the colon?
If I write, for example "flo", and I press enter to fill the "float" property, visual will put "float: ;" and I want it to write "float:;".
I have to remove space every single time and it's really struggling.
Thank you.
Search, configuration etc... NOTHING WORKS
You should be able to do what you want. You are looking for an emmet preference. See Emmet Preferences: v1.16 Release Notes:
There is supposedly support for the css.valueSeparator, see also GH Issue: Emmet Preferences support.
So you should be able to do this in your settings:
"emmet.preferences": {
"css.valueSeparator": ":",
}
The default for css.valueSeparator appears to be : , see Emmet Preferences.
BUT, it doesn't work for me for some reason - seems like some completion option is not respecting the css.valueSeparator setting. So you may have better luck - or need to file a github issue on this.

VSCode not commenting css.liquid lines correctly

I've been having a problem when trying to comment out a line in a css.liquid file with the VScode shortcut (CTRL+/).
Whenever I do this it puts {%\s*# in front of the line and doesn't comment out the code. I tried disabling all extensions but it's not helping. I haven't touched any settings. When I switch to CSS or Liquid it will comment out fine, but Liquid CSS doesn't work.
Does anybody recognize this issue?
===== This ended up being a problem with the extension itself, it has since been fixed!
I see this issue has been reported lately: Incorrect comment blocks in Liquid files with this extension enabled.
I see this in the liquid css language configuration file:
"comments": {
"lineComment": "{%\\s*#",
"blockComment": [ "/*", "*/" ]
I don't know what the lineComment value is supposed to be but I have never seen a regex value there in other language configuration files - so it may be a mistake.
I built an extension which may be able to help until the language configuration file is fixed: Custom Language Properties.
Install it.
Run the command Custom Language Properies: Check for new language extensions.
Make this setting in your settings.json:
"custom-language-properties": {
"liquid-css.comments.lineComment": "",
}
If this doesn't work immediately, try a reload of vscode.
This basically sets the lineComment's to null and so the blockComment will be used instead. I am not familiar with Liquid comment styles so let me know if that is not how line comments are supposed to work. Demo:

Package for showing all possible CSS values in Sublime Text 2?

With the basic Sublime Text 2 build, I am getting CSS value autocompletion only when I type the first letter of the value, as seen in the image below.
However, I've been watching the Tuts HTML+CSS web tutorials (here is an example video), and his Sublime Text build shows all possible CSS for a given attribute. Below is a screenshot from the linked example video.
My question is what setting or package allows for the display of all possible CSS values for a given attribute?
No additional packages or specific settings were needed to solve this issue. The Ctrl/Cmd+Space keyboard shortcut natively displays all possible completions.
Try different plugins through Package Control.
Specifically trying these may work for you:
CSS Completions
Emmet CSS Snippets
CSS Extended Completions (requires ctrl/cmd + space)
There is no package needed in Sublime Text 2 to display all possible completions, e.g. all possible values for a CSS property, but LaceLafontaine's answer is no longer current. Cmd+Space doesn't work on Macs, partially because it's a shortcut for a spotlight search.
Currently the shortcut to display the completions in OSX is Ctrl+Space. I believe it's the same for both Mac and PC. The issue was discussed here: https://github.com/processing/processing/issues/2699
Linux Users
For me it worked when I config using this:
"auto_complete_triggers":
[
{
"characters": ": ",
"selector": "source.css",
},
],
And then you use Space as trigger.
There is an additional space before every value, but Minify or HTML-CSS-JS Prettify will delete all these spaces

How to turn on auto-complete in Bracket 31 in *.less file?

I started to use Bracket as my IDE. I like it...
When I edit a CSS file there is great auto-complete, but when I edit less file there is no CSS auto-complete and it would be very useful.
Is there a way to turn CSS auto-complete for less files?
For some reason there isn't any built-in support for this yet but it can easily be hacked in and works quite well.
Open C:\Program Files (x86)\Brackets Sprint 32\www\language\languages.json (or whatever path you have it installed to) and scroll down to the CSS-key. Then just add "less" to the fileExtensions-array, save it and reload Brackets.
"css": {
"name": "CSS",
"mode": "css",
"fileExtensions": ["css", "less"],
"blockComment": ["/*", "*/"]
}
For some reason this isn't enabled by default but I haven't discovered any problems with it this far. Works fine with nested declarations which I initially thought would be a problem.
Updated answer:
Autocomplete in LESS files is now enabled automatically in Brackets Sprint 36 and newer (along with the Quick Docs command). The workaround in the answer above is no longer needed.
Original answer:
There's not a way to do it yet. Brackets has a public backlog, which
includes a user story for LESS code hinting
support.
You can upvote the user story if you sign in with a (free) Trello
account.
Brackets recently added
support for CSS-like code hinting in SCSS files, but that was much
easier to do. Because the SCSS tokenizer in
CodeMirror shares code the CSS one, the two
produce very similar streams of tokens, allowing much of Brackets'
existing CSS-analysis logic to be reused. The LESS tokenizer, on the
other hand, produces different token information that would require
larger code changes to support.
But it's certainly doable -- just a matter of prioritization. That's
where backlog upvoting and/or pull requests come in :-)

In program CSS links for Sublime Text 2?

I'm currently trying to learn Sublime Text 2, and so far I'm very impressed. But there are some things that I need compared to what I used for editor before (Microsoft Expression Web).
When I had a HTML file and had a class for a div or something. Then I wrote fx:
<div class="classname"></div>
Then I could CTRL + click on the classname, and it would instantly take me to the CSS file where this class was located, and to the line where it was, and I was able to edit it right away, instead of going into the CSS file and make a search.
Is this possible in Sublime Text 2 as well, or...?
Thanks in advance.
Unfortunately, there is no built in feature that does what you require.
But luckily there is a dev who created a plug-in, that does exactly what you want.
Take a look here: Goto CSS Declaration
In addition to the "Goto CSS Declaration" plug-in, that No Reply linked to in their answer, you can press ctrl+P, which let's you jump around in files.
Unofficial Documentation for more details

Resources