Sublime Forum

Snippet Not Working Properly in HTML/SASS/SCSS but only in CSS & JS

#1

Hi,
As far as I understand this code is perfect for triggering snippet with description.

But it does not show the snippet description but only triggers the code. This error is same in any HTML, SASS & SCSS format files for scope of text.html.

SASS & SCSS works only when scope is blocked and does not work for scope of source.sass and source.scss

To wonder; the same code shows description in any .css & .js version when change the scope to source.css & source.js. They both trigger and show description perfectly!

Please help…

0 Likes
#2

Please, post the snippet code as plain text, not as a screenshot. How I am supposed to test your code? Do you want to me to type it?

It is not working because you set the snippet context to:

<scope>text.html</scope>

Then it will only work for syntaxes as CSS and JS.

You need to change it to:

<scope>text, source</scope>

or even remove it:

<scope></scope>

Perhaps you can set it to:

<scope>text.html, source.css</scope>

References:

  1. forum#4113 Multiple scopes
  2. forum#25972 Is there no way to add multiple snippets to a single file?
  3. forum#28090 Allow multiple snippets in same sublime-snippet file
0 Likes
#3

Sorry!

I am using this snippet example for HTML:

<snippet>
    <content><![CDATA[
<input id="${1:name}" name="${2:name}" type="${3:text}" placeholder="${4:first and last name}" onfocus="this.placeholder = ''" onblur="this.placeholder = '${4/\*//first and last name}'">
]]></content>
    <tabTrigger>input2</tabTrigger>
    <scope>text.html</scope>
    <description>Input Placeholder</description>
</snippet>

And this snippet example for SASS:

<snippet>
    <content><![CDATA[
nth-child(${1:odd})
	${2:background}: ${3:red}
	$4
]]></content>
    <tabTrigger>s-child</tabTrigger>
    <description>SASS - nth Child</description>
    <!-- <scope>text, source</scope> -->
    <scope>source.sass</scope>
</snippet>

Problems I am facing:

  1. HTML (text.html) does not show description; so I need to memorize as well as write down whole complete triggering code.
  2. Same problem for SASS (source.sass) and SCSS (source.scss) too.
    3. Yeah, I can remove the scope for SASS/SCSS to make it working using no scope or <scope>text, source</scope> or <scope>text.html, source.css</scope>. But it in that case shows SASS hints appear even in not SASS files; that's the issue.
0 Likes
#4

  1. Fuzzy search does not apply to snippets. You always need to type the tab-trigger correctly, beginning with the first letter to search it within the list of available completions. If you want fuzzy-seach, you need to convert your snippet into a .*sublime-completion

  2. The top-level scope of HTML is text which auto completion while typing is disabled for by default. The completion panel only shows automatically for source scopes. You need to hit ctrl+space to show completions manually or add text.html to the "auto_complete_selector" setting.

"auto_complete_selector": "text.html, meta.tag - punctuation.definition.tag.begin, source - comment -    string.quoted.double.block - string.quoted.single.block - string.unquoted.heredoc"
  1. I’d never suggest to add snippets or completions without scope, if they are not meant to be available globally.
3 Likes
#5

Hi,

  1. I am new to this, can you please explain what does fuzzy search means? For example, I am triggering my “Responsive Email Skeleton” (big bunch of codes) using “email-responsive”. I must use lots of custom snippets to speed up my work flow as a front-end web develop.
    Am I naming the triggers wrongly? And how can I use my custom snippets in a better way which allow me snippets description in HTML/SASS just like CSS/JS?

  2. ctl+space really helps. But my friend, is there any way to see completions automatically than doing this every time? I really need to speed up my coding process.

Thanks a lot for your help :slight_smile:

0 Likes
#6

Hi Deathaxe,

As you suggested, I put this code in settings:
> "auto_complete_selector": "text.html, source.css, source.js, source.sass, source.php",

Now I am getting suggestions for text.html.

But sadly still not getting suggestion for SASS. Can you please suggest?

<snippet>
    <content><![CDATA[
background: #${1:ffffff} url(../img/${2:bg.jpg}) ${3:no-repeat} ${4:0px} ${5:0px}
$6
]]></content>
    <tabTrigger>s-bg</tabTrigger>
    <description>SASS - Background</description>
    <scope>source.sass</scope>
</snippet>
0 Likes
#7

Fuzzy search means, you can type some characters contained by the word you are looking for with just the order being important but not the position of the character.

Typing a string like “erp” or just “rpo” would result in “email-responsive” being suggested.

Without fuzzy search you need to type “email-re” to find the same thing.

Fuzzy can just help finding things if you don’t exactly know the word you are looking for.

Am I naming the triggers wrongly?

No, not at all. The provided examples are very perfect.

is there any way to see completions automatically

I copied your most recent code snippet. It shows automatically in the completion popup when typing “s-” in a SASS file.

Is "auto_complete" set to true in your Preferences?

I use https://packagecontrol.io/packages/Syntax%20Highlighting%20for%20Sass package as it seems to be the most recent one.

As you suggested, I put this code in settings:

I would suggest to keep the default selectors untouched and just add further selectors to the "auto_complete_selector" setting in order to not break auto-completion with the default syntaxes. You just need to add text.html as ST doesn’t enable auto-completion for text by default. The top-level scope source which SASS belongs to, is enabled by default.

You can imagine the value of the "auto_complete_selector" setting as a kind of SQL query string to tell ST for which code elements to enable auto-completion.

0 Likes