Автоимпорт компонентов VueJs при кодировании в SublimeText
Есть ли способ автоматически импортировать компонент VueJs внутри другого, пока я кодирую SublimeText 3?
Например, представьте, что у меня есть файл MyComponent.vue:
<template>
<page-header
:title = "$t('title')"
:count = "playerSelector.total"
:subtitle = "$t('subtitle', playerSelector.total)"
hide-search
>
...
</template>
<script>
import PageHeader from '@/lib/components/PageHeader'; // automatically add this line
export default {
name: 'MyComponent',
...
В этом примере у меня есть компонент MyComponent, который импортирует другой пользовательский компонент <page-header> ... поэтому я хотел знать, как добавить оператор импорта import PageHeader from '@/lib/components/PageHeader';, не вводя его каждый раз.
Я пробовал установить плагины ImportJs и AutoImport для Sublime, но, насколько я понимаю, они работают только для файлов .js или .ts. Есть ли способ сделать это, кроме файлов .vue?
Ответы 1
Выберите Tools → Developer → New Snippet… и измените его содержимое на следующее:
<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>
Нажмите CtrlS (⌘S на Mac), чтобы сохранить, который автоматически откроется в вашей папке Packages/User. Каталог Packages открывается при выборе Preferences → Browse Packages…:
- Linux:
~/.config/sublime-text-3/Packages - OS X:
~/Library/Application Support/Sublime Text 3/Packages - Обычная установка Windows:
C:\Users\YourUserName\AppData\Roaming\Sublime Text 3\Packages - Переносимая установка Windows:
InstallationFolder\Sublime Text 3\Data\Packages
Сохраните файл как iph.sublime-snippet, и все. Теперь, когда вы редактируете файл .vue (при условии, что вы используете плагин подсветки синтаксиса Vue, например Vue Syntax Highlight), введите iph и нажмите Tab, и фрагмент будет вставлен. См. здесь для получения дополнительной информации о фрагментах в Sublime Text.
РЕДАКТИРОВАТЬ
Теперь у меня есть лучшее представление о том, что вы хотите - автозаполнение для установленных компонентов Vue. В этом случае попробуйте плагин Language Server Protocol LSP-vue, который также требует плагина LSP и Vue Syntax Highlight. Как только вы все настроите правильно (убедитесь, что вы прочитали все документацию!), У вас должен быть доступ к автозаполнению, линтингу, форматированию кода, навигации по коду и многому другому.
@ArthurBorba, пожалуйста, посмотрите мой отредактированный ответ выше. LSP и LSP-vue должны помочь.
Что ж, я, может быть, добираюсь туда ... Я установил все плагины, и теперь, когда я начинаю набирать "import ....", я получаю это на панели sublime: "Vetur error 'import ... =' can only использоваться в файлах TypeScript ". Я ищу об этом, но он действительно углубляется в другие вещи. В настоящее время я работаю с Vue2, Vue-Cli и не использую Typescript в этом проекте.
Хороший! Но это применимо только к указанному компоненту, в примере «Заголовок страницы», это правильно? Я искал способ импортировать любой компонент в другой без ввода. Как компонент автозаполнения / автоимпорта.