Линтинг компонентов Vue.js с помощью eslint-plugin-vue

Development, Java | Amber | Комментировать запись

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

eslint-plugin-vue – это официальный плагин линтинга для компонентов Vue. Раньше линтовать скрипты через Eslint можно было с помощью eslint-plugin-html и ряда грязных приемов, но теперь появилась возможность линтовать файлы Vue правильно. Структура и все. Давайте посмотрим, как это сделать.

Установка плагина

Установите eslint и eslint-plugin-vue с помощью следующих команд:

# Yarn
$ yarn add eslint eslint-plugin-vue --save-dev
# NPM
$ npm install eslint eslint-plugin-vue --save-dev

Использование плагина

Теперь обновите (или создайте) файл .eslintrc.json. Выделите один из доступных уровней линтинга для eslint-plugin-vue.

Нам доступны следующие уровни:

• plugin:vue/base – основные правила, необходимые для работы синтаксического анализа. Пока что никакой линтинг не проводится.
• plugin:vue/essential – включает все вышеупомянутое, а также правила, которые существуют исключительно для предотвращения ошибок или неожиданного поведения Vue.
• plugin:vue/strongly-recommended – включает все вышеупомянутое, а также правила, которые обычно считаются передовыми.
• plugin:vue/recommended – включает все вышеупомянутое, а также несколько рекомендуемых правил стиля.

{
  "extends": [
    "eslint:recommended",
    "plugin:vue/recommended"
  ],
}

Мы выбрали здесь уровень recommended.

Многие проблемы, обнаруженные этими правилами, можно автоматически исправить с помощью параметра –fix.

Конфигурация редактора

Если вы сейчас откроете файл Vue в своем редакторе с интеграцией с eslint, вы не увидите ничего – потому что линтер не знает типа файла. Следовательно, вам нужно связать тип файла vue с линтером. Раньше при использовании файлов Vue (таких как HTML) этой проблемы не было, поскольку большинство интеграций уже поддерживали файлы HTML.

Решить данную проблему можно с помощью Atom и VSCode (Sublime Text 3 пока что не поддерживает линтинг, больше информации вы найдете по этой ссылке).

Для Atom+linter-eslint

Зайдите в Settings → Packages → linter-eslint и добавьте text.html.vue в список List of scopes to run eslint on. Возможно, вам потребуется перезапустить Atom.

Для VSCode+Eslint:

Откройте файл User Settings и добавьте в него следующее:

"eslint.validate": [
    "javascript",
    "javascriptreact",
    {
        "language": "vue",
        "autoFix": true
    }
],

Если вы уже изменили свойство eslint.validate, просто добавьте к нему последний элемент из вышеприведенного списка.

Теперь eslint должен работать правильно и выдавать предупреждения и сообщения об ошибках для всех компонентов Vue.

Читайте также: Настройка ESLint и Prettier для проекта Vue.js