Sublime Forum

Add custom html tags to autocomplete

#1

Is there a way to add your own tags to the autocomplete feature in Sublime.
One HTML tag i would like to add would be the <br /> tag.
One CSS tag i would like to add is -webkit-transform:
Please explain in detail. Dumb it down. :stuck_out_tongue:

0 Likes
#2
  1. Install Package Resource Viewer from Package Control
  2. From the Command Palette, select PackageResourceViewer - Open Resource
  3. Select HTML
  4. Select html_completions.py
  5. Search for default_list += ([ (plain text search, not RegEx)
  6. Notice that br is already in that list… albeit non-self closing - change the br> to br />
  7. Save the file
  1. From the Command Palette, select PackageResourceViewer - Open Resource
  2. Select CSS
  3. Select css_completions.py
  4. Search for PROPERTY_DICT = {
  5. Add '-webkit-transform': ['matrix($1)', 'matrix3d($1)', 'perspective($1)', 'rotate($1)', 'rotate3d($1)', 'rotateX($1)', 'rotateY($1)', 'rotateZ($1)', 'scale($1)', 'scale3d($1)', 'scaleX($1)', 'scaleY($1)', 'scaleZ($1)', 'skew($1)', 'skewX($1)', 'skewY($1)', 'translate($1)', 'translate3d($1)', 'translateX($1)', 'translateY($1)', 'translateZ($1)', 'none'],
  6. Save the file
0 Likes
#3

Probably better to do it this way:

Create a file in your Packages/User folder called custom_html.sublime-completions, and give it the following contents:

{
     "scope": "text.html meta.tag - text.html punctuation.definition.tag.begin",
     "completions":
     [
        { "trigger": "br\telement", "contents": "br />" }
     ]
}

Create a file in your Packages/User folder called custom_css.sublime-completions, and give it the following contents:

{
     "scope": "meta.property-name.css",
     "completions":
     [
        { "trigger": "-webkit-transform", "contents": "-webkit-transform: " }
     ]
}

disclaimer: both methods completely untested by me :slight_smile:

0 Likes
#4

wow this was so helpful. the ‘-webkit-’ stuff isn’t working but at least the break worked. thanks ill keep working on the css

0 Likes
#5

I posted an answer similar to @kingkeith’s initial answer at this thread:
##How to automatically pop up the value of a attribute

 
Maybe it can offer you an alternative perspective if you are still interested in adding all of the -webkit-transform values that Keith provided.
 

###Edit:

I just added Keith’s code into my css_completions.py, and it works fine.

css.PNG726×236 8.67 KB

 

 
@kingkeith

Why did you change your initial answer?   The *_completions.py approach seems much more efficient for auto-populating sets of values.

1 Like
#6

ah thanks for testing it :smiley: I didn’t see your answer before, nice one :slightly_smiling:
the main reason I suggested the other solution is simply because overriding the css or html packages means that if there are ever updates to those files in the official distribution, they won’t take effect if you have something overriding them. but custom snippets etc dont have such a problem :slight_smile:

1 Like
#7

Good call, I would have overlooked that. :sweat_smile:

Forgot to mention - it’s cool that you can throw snippets into the completions file, I wasn’t aware of that.
 

 
Within my next batch of projects, I was planning on creating a personal completions plugin based on the *_completions.py structure.

Taking your input on accidentally overriding default configurations into consideration;
I’m thinking it would be more useful as a public release with a Completion Settings subdirectory where users can put something like:

  • completions_global.sublime-settings
  • completions_css.sublime-settings
  • etc.

Each file would have a dictionary where

  • key == preceding snippet triggers
  • value == array of completions

The plugin would dynamically change it’s active completion dictionary based on the active syntax.

It would make it super easy for devs to include custom completions with their plugins too.

1 Like