[Vuejs]-Auto-import VueJs components while coding at SublimeText

0👍

Select Tools → Developer → New Snippet… and change its content to the following:

<snippet>
    <content><![CDATA[
import PageHeader from '@/lib/components/PageHeader'
]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <tabTrigger>iph</tabTrigger>
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <scope>source.javascript, text.html.vue</scope>
</snippet>

Hit CtrlS (S on Mac) to save, which will automatically open up in your Packages/User folder. The Packages directory is the one opened when selecting Preferences → Browse Packages…:

  • Linux: ~/.config/sublime-text-3/Packages
  • OS X: ~/Library/Application Support/Sublime Text 3/Packages
  • Windows Regular Install: C:\Users\YourUserName\AppData\Roaming\Sublime Text 3\Packages
  • Windows Portable Install: InstallationFolder\Sublime Text 3\Data\Packages

Save the file as iph.sublime-snippet, and that’s it. Now, when you’re editing a .vue file (assuming you’re using a Vue syntax highlighting plugin like Vue Syntax Highlight), type in iph and hit Tab, and the snippet will be inserted. See here for more information about snippets in Sublime Text.


EDIT

I now have a better idea of what you want – autocomplete for installed Vue components. In that case, check out the Language Server Protocol LSP-vue plugin, which also requires the LSP plugin and Vue Syntax Highlight as well. Once you have everything set up properly (make sure you read all the docs!), you should have access to autocomplete, linting, code formatting, code navigation, and more.

Leave a comment