Volar — совершенный артефакт разработки VUE!

вместе сvscodeтак же какvueстановится все популярнее,veturИмя также становится все более и более знакомым.

veturЯвляетсяvscodeплагин для.vueОдно файловый компонент предоставляет выделение кода и поддержку синтаксиса.

Однако, по известным причинам,vueтак же какveturдляtsПоддержка не дружелюбная. существует@vue/composition-apiДо выхода этого плагинаvue2 изtsНужно использоватьvue-prototype-decoratorЭтот плагин, для симуляции через режим декоратора, но т.к. он снизу не поддерживается, поэтомуvue2 изtsПользовательский опыт можно охарактеризовать как беспорядок.

18 сентября 2020 г.,vue3 - one pieceОфициально выпущен. За этим последовал целый набор использования от начала до концаtsновый цокольный этаж и совершенно новыйcomposition-api. в то же время,volarРожден подчиняться.

Volarчто

а такжеveturтакой же,volarявляется цельюvueизvscodeплагин, но сveturразница в том,volarПредоставляет более мощные функции, позволяющие людям звонить напрямую卧槽.

Способ установки очень прост, прямо вvscodeПоиск на торговой площадке плагиновvolar, а затем нажмите «Установить».

Сейчас только скачиваний больше 16000, думаю это с одной стороныveturЭто уже очень мощно, с другой стороны, многие разработчики не знаютvolarэта вещь.

Volarфункция

Главное событие здесь!

VolarВ качестве подключаемого модуля второго поколения для vue, в дополнение к интеграцииveturсопутствующие функции, такие как高亮,语法提示В дополнение к другим вещам, что заставляет меня уделять больше внимания, так это его уникальная функция.

Некоторые функции еще не выпущены, но могут бытьgithubскачать源码, для раннего доступа к новым функциям

Функция 1: уникальный корневой тег больше не требуется

научилсяvueГрамматику надо знать, т.vueизtemplate, требуется уникальный корневой тег, которыйvueрешили, но вvue3, это ограничение снято, еслиtemplate, вы можете использовать несколько корневых тегов, и вам больше не нужно учитывать проблемы, вызванные уникальными корневыми тегами.

Честно говоря, это неvolarНовая функцияvue3Да, просто используйтеvolarПосле этого не будет сообщено ошибка.

Функция 2: разделение ярлыков редактора

vueОднофайловые компоненты по функциям существуютtemplate,script,styleТри корневых элемента.

как обычныйhtmlФайл, слишком много функций в одном файле, легко вызвать дублирование файлов. Еще немного данныхvueстранице может быть две или три тысячи строк кода. Вместе с этим возникают различные неудобства: неудобно искать данные, неудобно переключать контекст, неудобно разрабатывать и так далее.

Чтобы решить эти проблемы,volarПредусмотрен ярлык.

После установкиvolarПосле этого введите.vueКомпонент с одним файлом, вы найдете значок в правом верхнем углу

Затем пишем на страницеtemplate,script,styleкорневой элемент, щелкните этот значок один раз

Случились интересные вещи, нашиvueДокумент по функциям разбит на три окна, причем каждое окно отвечает за свою функцию, а два других корневых элемента объединены.

То есть мы можем легко отличитьtemplate,script,styleТеперь разделите файл на три окна, когда используются три файла, и все это делает плагин за вас, нам нужно только щелкнуть.

Должен сказать, мне очень нравится эта функция.

Эта функция теперьvolarуже, пока тыvscodeЦентр плагинов можно скачать и использовать. Следующие несколько функций, я вvolarТо, что я нашел в исходном коде, стало сюрпризом.

Функция третья:ref sugarПоддержка изменения сочетания клавиш синтаксиса

ref sugarодин ещеrfcсценическую функцию, но она продолжается уже давно, и теперьvue3Версия уже доступна для раннего использования. Я не буду вдаваться в подробности конкретного использования и грамматики, но в основном буду говорить об этом.volarа такжеref sugarкомбинация.

Не беспокойтесь о сообщениях об ошибках, даeslint-plugin-vueпричина

Как видите, с помощьюref sugarПозже,scriptEстьref sugar, и ставим галочку, потом нажимаем эту галочку и смотрим что получится.

Как видите, после того, как мы нажмем на эту маленькую галочку, она заменится на исходную.ref sugarсинтаксис становится распространеннымscript setupмодель.

Не удивлен, не удивлен.

Функция четвертая:styleвнутриclassЦитировать

Видно, что в.fooНад этим именем класса находится1 referenceМаленькая иконка показывает текущуюclassПосле цитирования давайте нажмем на это1 reference

Появится всплывающее окно, которое является текущимclassконкретное место использования.

Функция пятая:classВыслеживать

мы создаемtemplateкорневой элемент, напишите внутри

<template>
  <div class="foo"></div>
</template>

существуетstyleнаписать в

<style scoped>
.foo {}
</style>

Кромеstyleсередина.fooпоявится выше1 reference, в дополнение к маленькому значкуclass="foo"изfooНиже появится горизонтальная линия.

для частого использованияvscodeДля разработчиков , нет необходимости говорить больше о том, что это значит.

Согласно подсказке, нажмите и удерживайтеcommandЗатем щелкните, вы обнаружите, что курсор перемещается наstyleсередина.fooДо.

Вау, круто!

Функция шестая:css moduleтип подсказки

css moduleВ общемreactСтек технологий будет использоваться больше, насколько я понимаю, он никогда не был вvueвнутри использовать его, потому чтоvueпри условииscopedScope, не беспокойтесь о конфликтах стилей, проще и удобнее использовать препроцессор напрямую.

Создаем следующий код

<template>
  <div :class="$style.foo"></div>
</template>

<style module>
.foo { }
</style>

затем переместите мышь в$styleначальство

Интересно, кажетсяvscodeэто позволитьvolarИграй, чтобы понять.

Функция семь:langподсказки по грамматике

vueможно использоватьlangатрибут для выбора используемого языка, например.templateсерединаhtmlа такжеpug,scriptсерединаts,styleсерединаscssЖдать.

А ведь раньше мы все вводили вручную, редакторами илиveturНам это не дало никаких подсказок, может вы давно искали необъяснимую проблему, просто потому чтоlangНеправильно.

Но все это сvolarПосле этого было по другому

Теперь мы используемlangПри выборе препроцессораvolarДает нам четкие подсказки, на каких языках мы можем писать.

Функция восьмая:templateПреобразование синтаксиса

vueДва шаблона предоставляются нам по умолчанию для использования, но они обычно используютсяhtml, другой звонилpug.

относительноhtml,pugболее склонен кymlТакого рода, степень простоты очень высока.

существуетvolar, предоставляет намhtmlа такжеpugфункция взаимного преобразования.

<template>
  <div>
    <li></li>
    <li></li>
    <li>
      <img />
    </li>
  </div>
</template>

пиши в насtemplateПозже,templateБудет небольшойpugзначок, мы видим, что он не выбран в это время

В это время мы щелкаем этот значок, чтобы выбрать его.

Что-то волшебное случилось.

мы написалиhtmlшаблон, который автоматически преобразуется вpug, нажмите еще раз, вернемся к нашему привычномуhtml

конец

Начиная с третьей функции, это в основном новая функция, которая рассчитывается как внутренний тест.volarЯ нашел это, когда пошел к местному, чтобы проверить. Если вы хотите попробовать, вы можете скачать исходный код самостоятельно, а затемpackages/vscode-vue-languageservice/testCasesопыт работы в каталоге.

Надеемся, что эти функции будут выпущены в ближайшее время!