Sublime Text3 efficient development of the coding block (snippet)

See others using HBuilder X can be inserted into the code block wanted sublime text3 have no similar feature it, eh really have. In the sublime text3 called a snippet.

-snippet is doing? : You can quickly insert custom code blocks when you write js, html, vue, python ... of.

Demo demo

Enter bt4carousel

 

 

Enter the complete press Tab bt4carousel

 

 

 Code generation is finished!

-snippet how to use? : New sublime-snippet file, write code block, save the file to use.

How to create sublime-sinppet file?

New follows

Vue examples

<snippet>
    <content><![CDATA[
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="${1:this}" alt="${2:this}">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="${3:this}" alt="${4:this}">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="${5:this}" alt="${6:this}">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <!-- <tabTrigger>hello</tabTrigger> -->
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <!-- <scope>source.python</scope> -->
    <tabTrigger>bt4carousel</tabTrigger>
    <!-- <scope>text.html.basic</scope> -->
    <scope>text.html.vue</scope>
</snippet>

View Code

Ctrl + S to save the recommended ....... \ Sublime Text 3 \ Packages \ User folder under the new snippets

Congratulations, custom snippet can be used, you must own to try it.

How to view a particular file <scope> value? : Ctrl + alt + shift + p or menu bar -tools-developer-Show Scope Name, you can see the value corresponding to it, click on the copy you can copy the value.

Above all on the sublime content of text3 snippet basic use, I wish to use a happy, good-bye.