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

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

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

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

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

Ветур

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

Vetur marketplace page

Установка Vetur

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

Install Vetur in VS Code

Вы также можете открыть расширения в VS Code и выполнить поиск по запросу «vetur»:

Что дает это расширение?

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

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

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

Vue file without Vetur

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

Vue file with Vetur

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

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

VS Code по умолчанию не может распознать такую ситуацию, а Vetur позволяет выделять синтаксис для каждого типа кода, который вы используете.

Vetur предоставляет поддержку, среди прочего, для

HTML
CSS
JavaScript
Мопс
Haml
SCSS
PostCSS
Sass
Стилус
Машинопись

Фрагменты

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

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

IntelliSense

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

Autocomplete

Строительные леса

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

vue
template with html
template with pug
script with JavaScript
script with TypeScript
style with CSS
style with CSS (scoped)
style with scss
style with scss (scoped)
style with less
style with less (scoped)
style with sass
style with sass (scoped)
style with postcss
style with postcss (scoped)
style with stylus
style with stylus (scoped)

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

<template>
</template>
<script>
export default {
}
</script>
<style>
</style>

другие специфичны и создают единый блок кода.

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

Эммет

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

Emmet support

Линтинг и проверка ошибок

Vetur интегрируется сESLint, сквозьПлагин VS Code ESLint.

ESLint configuration

ESLint at work

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

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

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

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

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

Скачать мою бесплатнуюСправочник по Vue