ESLint и Prettier с Vite и Vue.js 3

(перевод статьи Дэниэла Келли ESLint and Prettier with Vite and Vue.js 3)

В предыдущей статье цикла How to Structure a Large Scale Vue.js Application мы рассмотрели некоторые стандарты, которые вы можете задействовать в своем приложении на Vue.js, чтобы сделать свою кодовую базу предсказуемой, понятной и удобной в обращении. Следующим шагом, который можно предпринять для улучшения опыта разработчиков при создании крупномасштабных приложений (особенно в команде), это настройка автоматических процессов линтинга и форматирования кода.

Возможно, раньше вы никогда не пользовались этими инструментами. Давайте кратко рассмотрим, что такое линтинг и форматирование и зачем они нужны, а затем перейдем к настройке ESLint и Prettier на Vue-проекте, созданном при помощи Vite. Если вы уже знакомы с линтингом и форматированием при помощи ESLint и Prettier, то можете спокойно пропустить этот раздел и сразу перейти к разделу об их настройке с Vite.

Также стоит отметить, что большинство шагов по настройке ESLint и Prettier, которые будут здесь описаны, будут работать не только в проектах с Vite, но и, например, в проектах на Laravel и Vue и прочих.

Линтинг при помощи ESLint

Итак, что такое линтинг? Линтингом называют автоматизированный процесс статического анализа кода, служащий для выявления потенциальных ошибок. Обычно линтинг может выполнять такие действия, как обнаружение синтаксических ошибок (например, пропущенной запятой) или предупреждение о том, что в файле определена переменная, которая не используется. Линтинг не спасет ваш код от возможных недостатков бизнес-логики, но он гарантирует, что ваш код будет синтаксически точным и соответствующим лучшим практикам. Итак, какие решения доступны нам для линтинга проектов на Vue.js? Конечно же, ESLint — инструмент для линтинга кода на JS.

ESLint способен не только обнаруживать ошибки в коде, но и во многих случаях может исправлять их вместо вас. Он может запускаться из командной строки, кроме того, он интегрируется с большинством IDE. Это бесценно, поскольку в этом случае ошибки, обнаруженные ESLint, будут отображаться непосредственно в файле, который вы редактируете в данный момент — обычно это красная волнистая линия под строкой кода, в которой есть ошибка (похоже на проверку правописания, только для вашего кода). Также интеграция с IDE позволяет запустить автоматическое исправление ошибок при нажатии сочетания клавиш либо при сохранении файла.

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

Теперь давайте поговорим о форматировании кода. В чём разница между форматированием и линтингом? В то время как линтинг фокусируется на обнаружении ошибок, форматирование заключается в проверке соответствия кода некоему формату, который включает в себя такие моменты, как ширина табуляции, одинарные или двойные кавычки, висящие запятые, обязательно окончание строки точкой с запятой и тому подобное. Эти правила гарантируют, что код будет иметь согласованный стиль, даже если он будет написан разными разработчиками в разных IDE. Кроме того, это снимает необходимость самостоятельно решать, каким будет форматирование (например, нужно ли ставить точку с запятой в конце строки). Вместо этого можно просто писать код удобным способом и позволить инструменту форматирования переформатировать код, когда вы закончите.

Хорошо, а как форматирование будет работать на нас? Если вы уже используете ESLint, то у вас уже есть рабочий инструмент, поскольку ESLint хорош как в линтинге, так и в форматировании. Однако несмотря на то, что ESLint берёт на себя часть работы по форматированию кода, другой инструмент, Prettier, является более всеохватывающим и действительно считается бо́льшим отраслевым стандартом. Prettier можно использовать в паре с ESLint, и, совместно работая, они способны покрыть все потребности в линтинге и форматировании.

Одна из лучших особенностей Prettier — это то, что он полностью берёт на себя работу по форматированию, а значит, можно полностью сосредоточиться на написании качественного кода.

Так же как ESlint, Prettier хорошо интегрируется с большинством IDE и имеет те же фичи, что были ранее описаны в разделе про ESLint.

Настройка ESlint и Prettier в рамках проекта на Vite

Теперь когда мы знаем, что такое ESLint и Prettier и какие преимущества они дают, давайте настроим их для использования в проекте на Vite. В отличие от Vue-CLI, в Vite отсутствует автоматическая конфигурация ESLint и Prettier во время процесса установки приложения, поэтому нам нужно самостоятельно установить и настроить эти инструменты. Я шаг за шагом покажу этот процесс.

Создание проекта с помощью Vite

Если у вас ещё нет проекта на Vite, запустите эту команду:

npm init vite@latest

Следуйте указаниям и после завершения установки перейдите в директорию созданного проекта.

Установка Prettier

Теперь перейдём к установке Prettier. Это можно сделать, введя следующую команду:

npm install --save-dev --save-exact prettier

Затем создадим пустой конфигурационный файл, чтобы оповестить IDE об использовании Prettier. Если вы хотите сразу настроить одно либо несколько правил, предоставляемых Prettier, смотрите документацию.

echo {}> .prettierrc.json

Отлично! Теперь настроим ESLint.

Установка ESLint

Мы можем установить ESLint и vue-плагин для ESLint при помощи следующей команды:

npm install --save-dev eslint eslint-plugin-vue

Затем настроим ESLint, создав файл .eslintrc.js cо следующей конфигурацией, настроенной на использование рекомендуемых правил ESLint, а также рекомендуемых правил для Vue 3:

module.exports = { 
  env: { 
    node: true, 
  }, 
  extends: [ 
    'eslint:recommended', 
    'plugin:vue/vue3-recommended', 
  ], 
  rules: { 
  // override/add rules settings here, such as: 
  // 'vue/no-unused-vars': 'error' 
  } 
}

Вы можете просмотреть документацию к eslint-plugin-vue, чтобы найти другие конфигурации, доступные для использования с Vue 3 (если хотите использовать менее строгие правила). Разные конфигурации соответствуют трём различным приоритетам, описанным в стайлгайде Vue 3.

Наконец, отключим правила форматирования ESLint, которые будут конфликтовать с Prettier. Если мы этого не сделаем, то у нас будет бесконечная смертельная схватка наподобие такой:

Если вы пропустили этот шаг прежде, чем узнали, какую это может принести головную боль, либо просто не знали о нём, прежде чем приступить к настройке ESLint и Prettier, то вам, вероятно, больше никогда не захочется снова использовать эти инструменты. К счастью, это легко исправить.

Нам нужно всего лишь установить eslint-config-prettier. Он отключает те правила форматирования в ESLint, за обработку которых будет отвечать Prettier:

npm install eslint-config-prettier --save-dev

Зарегистрируем конфигурацию в .eslintrc.js в разделе extends. Убедитесь, что это последний конфиг, перечисленный в массиве extends, поскольку порядок перечисления влияет на обработку правил, которые дублируются в разных конфигах (более поздние конфигурации приоритетнее, чем предыдущие):

//.eslintrc.js 
extends: [ 
  'eslint:recommended', 
  "plugin:vue/vue3-recommended", 
  "prettier" 
],

Запуск из командной строки

Здесь нам нужно будет добавить скрипты, которые позволят запустить исправление ошибок ESLint'ом, вывод отчётов о линтинге и форматирование Prettier'ом нашего исходного кода. Добавим следующие две строки в раздел scripts в package.json:

"scripts": {
  //...
  "lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src",
  "format": "prettier . --write"
},

Команда "lint", определённая в разделе scripts, хорошо подходит для использования в CI/CD-пайплайнах или для тестирования в терминале. Запустив соответствующие команды, можно увидеть, насколько быстро они отрабатывают, однако это не обязательный способ их использования на протяжении всего процесса разработки (то есть гораздо более лучшим вариантом будет настроить их автоматический запуск при определенном действии, например, при сохранении файла — Прим. пер.).

Настройка ESLint и Prettier для использования в VS Code с Vue 3

Для того, чтобы оптимизировать рабочий процесс, вам навереяка захочется интегрировать эти два инструмента с используемой IDE. Это позволит подчеркивать ошибки в режиме реального времени, а также обеспечит автоматическое исправление ошибок при помощи ESLint и более красивое форматирование при сохранении файла. Поговорим о том, как сэкономить время: поскольку VSCode бесплатна и является одной из самых популярных IDE, давайте посмотрим, как интегрировать ESLint и Prettier для использования в VS Code с проектом на Vue 3, созданном через Vite.

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

Далее в настройках VSCode нужно прописать следующее правило, чтобы отключить валидацию с помощью Vetur и переложить эту работу на ESLint, который будет проверять шаблоны компонентов, основываясь на правилах, прописанных в .eslintrc.js:

// Code/User/settings.json 
"vetur.validation.template": false

Сейчас, если вы откроете компонент HelloWorld, то увидите ESLint в действии. Под msg: String будет выведена жёлтая волнистая линия, и если навести курсор на эту строку, то появится информация о том, почему ESLint делает предупреждение (в данном случае не соблюдается правило vue/require-default-prop).

Чтобы исправить это, мы можем сделать одно их двух:

Либо отключить правило vue/require-default-prop, если мы хотим разрешить входные параметры без значений по умолчанию:

// Code/User/settings.json
rules: {
  //...
  "vue/require-default-prop": "off",
},

либо изменить код, добавив значение по умолчанию, и тогда подчёркивание исчезнет. Отлично!

Теперь ESLint оповещает об ошибках непосредственно в файле, но у нас нет настроек автоматизации ни для Prettier, чтобы форматировать код, ни для ESLint, чтобы исправлять ошибки. Мы можем сообщить VSCode о том, что при сохранении файла нужно выполнять оба действия, добавив следующие строки к настройкам:

// Code/User/settings.json 
{ 
  "editor.formatOnSave": true, 
  "editor.codeActionsOnSave": { 
    "source.fixAll.eslint": true 
  },
}

Нам также нужно убедиться, что наши файлы .vue и .js форматируются Prettier как средством форматирования по умолчанию:

// Code/User/settings.json 
"[vue]": { 
  "editor.defaultFormatter": "esbenp.prettier-vscode" 
}, 
"[javascript]": { 
  "editor.defaultFormatter": "esbenp.prettier-vscode" 
},

Теперь если вы откроете App.vue, поставите лишний таб перед тегом img и сохраните изменения, то тег автоматически вернется на один таб. Так выглядит Prettier в действии.

Если в цикле вы поставите key перед v-for как здесь:

<img :key="i" v-for="i in items" alt="Vue logo" src="./assets/logo.png" />

то вы увидите как ESLint задействует правило vue/attributes-order и исправит порядок следования атрибутов после сохранения файла. Удобно, не правда ли?

Вывод ошибок ESLint в браузере

Для большинства разработчиков и команд тех настроек, которые имеются у нас на данный момент, вероятно, будет достаточно для продуктивной работы. Однако можно пойти ещё дальше и установить плагин Vite ESLint, чтобы увидеть ошибки линтинга, которые будут выводиться поверх вашего приложения в браузере:

В таком случае станет невозможно игнорировать те ошибки ESLint, которые нельзя исправить автоматически. Установить плагин vite-plugin-eslint можно при помощи следующей команды:

npm install vite-plugin-eslint --save-dev

Затем нужно зарегистрировать плагин, импортировав его и добавив в раздел plugins в vite.config.js:

import { defineConfig } from 'vite'; 
import eslintPlugin from 'vite-plugin-eslint';

export default defineConfig({ 
  plugins: [eslintPlugin()], 
});

Теперь ESLint будет сообщать об ошибках непосредственно в браузере.

Ссылки

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

документация к ESLint - стандартный инструмент для линтинга
документация к Prettier - стандартный инструмент для форматирования
eslint-plugin-vue - конфигурация ESLint, содержащая правила, специфичные для Vue
eslint-config-prettier repo - конфигурация ESLint, отключающая правила, конфликтующие с Prettier
Vetur- расширение VS Code, выполняющее подсветку синтаксиса для .vue-файлов и многое другое
ESLint VS Code Extension
Prettier VS Code Extension
Vite - супербыстрый современный инструмент сборки
vite-plugin-eslint repo - плагин для Vite для демонстрации ошибок ESLint в браузере

Вывод

При создании крупномасштабных проектов на Vue настройка автоматических процессов линтинга и форматирования всегда является хорошей идеей, поскольку это позволяет сохранять код согласованным и безошибочным. В то время как Vue-CLI даёт возможность настроить эти процессы из коробки, более быстрый и современный инструмент сборки Vite — нет. Настройка ESLint и Prettier специально под различные окружения, где эти инструменты в идеале должны работать (терминал, IDE, браузеры) может несколько отпугнуть, но, проявив немного терпения, вы сможете настроить их один раз и использовать для своих vue-проектов на базе Vite на протяжении всего жизненного цикла проекта.