Рубрики
Без рубрики

Настройка VS-кода для разработки Vue

Visual Studio Code в настоящее время является одним из наиболее часто используемых редакторов кода в мире. Когда вы такой популярный редактор, люди создают хорошие плагины. Один из таких плагинов – потрясающий инструмент, который может нам помочь Vue.js разработчики.

  • Ветур
  • Установка Vetur
  • Подсветка синтаксиса
  • Фрагменты
  • Интеллект
  • Подмости
  • Эмметт
  • Подкладка и проверка на ошибки
  • Форматирование кода

Visual Studio Code в настоящее время является одним из наиболее часто используемых редакторов кода в мире. У редакторов, как и у многих программных продуктов, есть цикл. Когда-то TextMate был любимым разработчиками, тогда это был Sublime Text, теперь это VS Code.

Самое классное в популярности то, что люди посвящают много времени созданию плагинов для всего, что они себе представляют.

Один из таких плагинов – потрясающий инструмент, который может нам помочь Vue.js разработчики.

Ветур

Это называется Предприятие , он чрезвычайно популярен, с более чем 3 миллионами загрузок, и вы можете найти его на Visual Studio Marketplace .

Установка Vetur

Нажатие кнопки Установить вызовет панель установки в VS Code:

Вы также можете открыть расширения в VS Code и выполнить поиск “vetur”.:

Что предоставляет это расширение?

Подсветка синтаксиса

Venture обеспечивает подсветку синтаксиса для всех ваших файлов исходного кода Vue.

Без Vetur файл .vue будет отображаться таким образом с помощью VS-кода:

с установленным Vetur:

VS Code способен распознавать тип кода, содержащегося в файле, по его расширению.

Используя один файловый компонент, вы смешиваете различные типы кода в одном файле, от CSS до JavaScript и HTML.

VS-код по умолчанию не может распознавать такого рода ситуации, и функция позволяет обеспечить подсветку синтаксиса для каждого используемого вами кода.

Функция обеспечивает поддержку, среди прочего, для

  • HTML
  • CSS
  • язык JavaScript
  • Мопс
  • Хамл
  • SCSS
  • PostCSS
  • Нахальство
  • Стилус
  • Машинописный текст

Фрагменты

Как и в случае с подсветкой синтаксиса, поскольку VS-код не может определить тип кода, содержащегося в части файла .vue, он не может предоставить фрагменты, которые мы все любим: фрагменты кода, которые мы можем добавить в файл, предоставляемые специализированными плагинами.

Venture предоставляет VS Code возможность использовать ваши любимые фрагменты в отдельных файловых компонентах.

Интеллект

IntelliSense также включен Venture для каждого отдельного языка с автозаполнением:

Подмости

В дополнение к включению пользовательских фрагментов, Venture предоставляет свой собственный набор фрагментов. Каждый из них создает определенный тег (шаблон, сценарий или стиль) со своим собственным языком:

  • вю
  • шаблон с html
  • шаблон с мопсом
  • скрипт на JavaScript
  • сценарий с машинописным текстом
  • стиль с помощью CSS
  • стиль с помощью CSS (область действия)
  • стиль с помощью css
  • стиль с помощью css (область действия)
  • стиль с меньшим
  • стиль с меньшим (область действия)
  • стиль с дерзостью
  • стиль с дерзостью (область действия)
  • стиль с помощью postcss
  • стиль с postcss (область действия)
  • стиль с помощью стилуса
  • стиль с помощью стилуса (область действия)

Если вы введете vue , вы получите стартовый пакет для однофайлового компонента:

остальные являются специфичными и создают единый блок кода.

Примечание: (область действия) означает, что он применяется к текущему компоненту только

Эмметт

Emmet , популярный движок сокращений HTML/CSS, поддерживается по умолчанию. Вы можете ввести одно из сокращений Emmet и, нажав tab VS Code, автоматически развернете его до эквивалента HTML:

Подкладка и проверка на ошибки

Предприятие интегрируется с ESLint через плагин VS Code ESLint .

Форматирование кода

Функция обеспечивает автоматическую поддержку форматирования кода для форматирования всего файла при сохранении (в сочетании с настройкой "editor.formatonsave" VS Code.

Вы можете отключить автоматическое форматирование для определенного языка, установив параметр vector.format.defaultformatter. XXXXX до нет в настройках VS-кода. Чтобы изменить один из этих параметров, просто начните поиск строки и переопределите то, что вы хотите, в настройках пользователя (правая панель).

Большинство поддерживаемых языков используют более красивое автоматическое форматирование, инструмент, который становится отраслевым стандартом.

Использует вашу более красивую конфигурацию для определения ваших предпочтений.

Оригинал: “https://flaviocopes.com/vue-vscode/”

Читайте ещё по теме: