В процессе работы над проектами разработчики придерживаются определенного кодстайла. Как правило, за это отвечает ESLint. ESLint — это линтер для языка программирования JavaScript. Он статически анализирует код на наличие проблем, многие из которых можно исправить автоматически. Как показывает практика, команды в проектах часто пренебрегают кастомной настройкой ESLint, оставляя дефолтную. В этом случае большая часть кодстайла остается на совести разработчика. Кодстайл, как правило, в таких проектах нигде не описан или существует в формате устной договоренности. При таком подходе большую часть правил приходится держать в уме, не говоря уже о том, что многие из них основаны на субъективных предпочтениях. Нередки случаи, когда разные части приложения отформатированы под разные правила. Например, если разработчики пишут код в разных операционных системах, то переносы строк у них отличаются. Правил так много, а настройки столь обширны, что использование разных редакторов кода в командной разработке может усложнить взаимодействие. В этой статье рассмотрим пример настройки ESLint для разработки приложений на Vue. В итоге мы получим настройки ESLint, которые будут проверять наш код на соответствие большинству правил официального стайлгайда Vue. Материал полезен начинающим разработчикам, которые хотят улучшить свой стиль кода, и более опытным на старте нового проекта в незнакомой или большой распределенной команде. Эти настройки помогут придерживаться кодстайла и отслеживать некоторые ошибки (синтаксические, логические, ошибки, связанные с динамической типизацией) еще на этапе написания кода, повысят его читаемость и упростят код-ревью. В конечном итоге это приведет к сокращению сроков разработки. Все форматирование кода будет осуществляться с помощью ESLint, поэтому если у вас установлен prettier или Vetur, желательно их отключить. ESLint необходимо установить в extensions вашей IDE, чтобы пользоваться его функционалом. В конце статьи приведем пример файла .eslintrc.js с настройками.   Создадим новое приложение. В настройках при установке выберем  ESLint + Airbnb config. Файл .eslintrc.js должен выглядеть так: В качестве базовых настроек используем конфигурацию @vue/airbnb, plugin:vue/essential заменим на plugin:vue/strongly-recommended (или plugin:vue/vue3-strongly-recommended, plugin:vue/vue3-essential, plugin:vue/vue3-recommended для vue 3) и дополним кастомными настройками. Если вы еще не знакомы с отличиями настроек essential от strongly-recommended, то рекомендуем изучить их здесь.  Далее в объект rules будем добавлять правила, которые хотим использовать. #vue/attributes-order Проверка порядка атрибутов: Пример настройки: Это правило упорядочивания атрибутов компонентов. Порядок по умолчанию указан в руководстве по стилю Vue.js. и определен: DEFINITION e.g. 'is', 'v-is' LIST_RENDERING e.g. 'v-for item in items' CONDITIONALS e.g. 'v-if', 'v-else-if', 'v-else', 'v-show', 'v-cloak' RENDER_MODIFIERS e.g. 'v-once', 'v-pre' GLOBAL e.g. 'id' UNIQUE e.g. 'ref', 'key' SLOT e.g. 'v-slot', 'slot' TWO_WAY_BINDING e.g. 'v-model' OTHER_DIRECTIVES e.g. 'v-custom-directive' OTHER_ATTR e.g. 'custom-prop="foo"', 'v-bind:prop="foo"', ':prop="foo"' EVENTS e.g. '@click="functionCall"', 'v-on="event"' CONTENT e.g. 'v-text', 'v-html' #vue/max-attributes-per-line Проверка на максимальное количество атрибутов в строке: Пример настройки: Значения singleline.max (number) и multiline.max (number) установим в значение 1, чтобы каждый атрибут начинался с новой строчки. #vue/html-self-closing Проверка на самозакрывающийся тег или компонент: html.void ("never" по умолчанию) — стиль хорошо известных пустых элементов HTML. html.normal ("always" по умолчанию) — стиль известных элементов HTML за исключением пустых элементов. html.component ("always" по умолчанию) — стиль пользовательских компонентов Vue.js. svg ("always" по умолчанию) — стиль известных элементов SVG. math ("always" по умолчанию) — стиль известных элементов MathML. Каждый параметр может быть установлен в одно из следующих значений: "always" — требовать самозакрытия элементов, у которых нет своего содержимого. "never" — запретить самозакрытие. "any" — не применять самозакрывающийся стиль. #vue/html-indent Проверка последовательного отступа в шаблоне <template>: Пример настройки: type (number | "tab") — тип отступа. Значение по умолчанию 2. Если это число, то это количество пробелов для одного отступа. Если это "tab", он использует одну вкладку для одного отступа. attribute (integer) — множитель отступа для атрибутов. Значение по умолчанию 1. baseIndent (integer) — множитель отступа для операторов верхнего уровня. Значение по умолчанию 1. closeBracket (integer | object) — множитель отступа для правых скобок. Значение по умолчанию 0.Вы можете применить все нижеперечисленное, установив числовое значение. closeBracket.startTag (integer) — множитель отступа для правых скобок открывающих тегов (<div>). Значение по умолчанию 0. closeBracket.endTag (integer) — множитель отступа для правых скобок закрывающих тегов (</div>). Значение по умолчанию 0. closeBracket.selfClosingTag (integer) — множитель отступа для правых скобок открывающих тегов (<div/>). Значение по умолчанию 0. alignAttributesVertically (boolean) — условие того, должны ли атрибуты выравниваться по вертикали с первым атрибутом в многострочном случае или нет. По умолчанию true. ignores (string[]) — селектор для игнорирования узлов. Со спецификацией AST можно ознакомиться здесь. #vue/component-name-in-template-casing Проверка регистра для стиля именования компонентов в шаблоне: Пример настройки: "PascalCase" (по умолчанию) — требует написание имен тегов в регистре паскаля. Например, <CoolComponent>. Это соответствует практике JSX. "kebab-case" — требует написание имен тегов в регистре кебаба: например, <cool-component>. Это согласуется с практикой HTML, которая изначально нечувствительна к регистру. registeredComponentsOnly — если true, проверяются только зарегистрированные компоненты (в PascalCase). если false, проверьте все. По умолчанию true. ignores (string[]) — имена элементов, которые следует игнорировать. Устанавливает разрешающее имя элемента. Например, пользовательские элементы или компоненты Vue со специальным именем. Вы можете установить регулярное выражение, написав его как "/^name/". #vue/no-irregular-whitespace Проверка нерегулярных пробелов: Пример настройки: skipStrings: true — разрешает любые пробельные символы в строковых литералах. По умолчанию true. skipComments: true — разрешает любые пробельные символы в комментариях. По умолчанию false. skipRegExps: true — разрешает любые пробельные символы в литералах регулярных выражений. По умолчанию false. skipTemplates: true — разрешает любые пробельные символы в литералах шаблона. По умолчанию false. skipHTMLAttributeValues: true — разрешает любые пробельные символы в значениях атрибутов HTML. По умолчанию false. skipHTMLTextContents: true — разрешает любые пробельные символы в текстовом содержимом HTML. По умолчанию false. #vue/component-definition-name-casing Проверка на определенный регистр для имени компонента: Пример настройки: "PascalCase" (по умолчанию) — требует преобразования имен компонентов к регистру паскаля. "kebab-case" — требует преобразования имен компонентов к регистру kebab. #vue/match-component-file-name Проверка имени компонента — оно должно соответствовать имени файла, в котором он находится: Пример настройки:  "extensions": [] — массив расширений файлов для проверки. По умолчанию установлено значение ["jsx"]. "shouldMatchCase": false — логическое значение, указывающее, должно ли имя компонента также соответствовать регистру имени файла. По умолчанию установлено значение false. #vue/no-dupe-keys Запретить дублирование имен полей: Пример настройки: "groups" (string[]) — массив дополнительных групп для поиска дубликатов. По умолчанию пусто. #vue/order-in-components Порядок свойств в компонентах: #comma-dangle Проверка  запятых: arrays для литералов массива и шаблонов деструктуризации массива. например, let [a,] = [1,]; objects для объектных литералов и объектных шаблонов деструктуризации.например, let {a,} = {a: 1}; imports предназначен для деклараций импорта модулей ES.например, import {a,} from "foo"; exports для экспортных деклараций модулей ES.например, export {a,}; functions предназначен для объявлений функций и вызовов функций.например, (function(a,){ })(b,); functions следует включать только при анализе ECMAScript 2017 или более поздней версии. Пример настройки: "never" (по умолчанию) запрещает запятые в конце. "always" требует наличие запятых в конце. "always-multiline" требует замыкающих запятых, когда последний элемент или свойство находятся в другой строке, а закрывающий “]” или  “}” на следующей и запрещает замыкающие запятые, когда последний элемент или свойство находится в той же строке, что и закрывающий “]” или “}”. "only-multiline" разрешает (но не требует) замыкающие запятые, когда последний элемент или свойство находятся в иной строке, чем закрывающий “]” или  “}”, и запрещает замыкающие запятые, когда последний элемент или свойство находятся на той же строке, что и закрывающий “]” или “}”. Вы также можете использовать параметр объекта, чтобы настроить это правило для каждого типа синтаксиса. Для каждого из следующих параметров можно установить значения "never", "always", "always-multiline", "only-multiline" или "ignore". Значение по умолчанию для каждого параметра равно "never", если не указано иное.  Рассмотрим на примере одного компонента, что у нас получилось. Для этого возьмем следующий компонент: После выполнения команды eslint --fix получаем следующее: Автоматически отформатировалось название компонента template в стиле kebab-case, атрибуты в компонентах выстроены по порядку и каждый с новой строки. Название myProps заменено на my-props в соответствии с кодстайлом vue. Появилась пустая строка 19 между секцией template и script. На 21 строке подсвечивается название компонента которое не совпадает с названием файла. Двойные кавычки при определении строковых переменных заменены на одинарные. Свойства в секции script выстроены по порядку name, components, props, data, computed, method. На строке 40 подсвечивается ошибка, так как мы создаем сайд-эффекты в вычисляемом свойстве. Итак, мы разобрали большое количество правил настройки ESLint, которые можно без труда скорректировать по собственному желанию. Результат в большей степени соответствует рекомендациям по стилю написания кода Vue style guide, а если настроить Auto Fix On Save, то код будет автоматически формироваться согласно этим правилам. Все это в целом приведет к написанию более качественного кода, упрощению и ускорению разработки и код ревью.  Полезные ссылки: Официальное руководство по стилю для Vue кода. Доступные правила для настройки eslint-plugin-vue можно посмотреть тут.  Общие правила настройки ESlint Спасибо за внимание! Полезные материалы для разработчиков мы также публикуем в наших соцсетях – ВК и Telegram.