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

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

Даже если в проектах используется одинаковый стек технологий, каждый из них обладает своими «проектными знаниями». И в этом случае снова на помощь приходит линтер и подсказывает участнику проекта в вопросах стилизации кода, предпочтительного синтаксиса и т. д.

В данной статье мы рассмотрим настройку ESLint и Prettier для JavaScript, TypeScript и в частности для Vue.js, покажем какими правилами мы руководствуемся в проекте Shtab и почему.

Установка зависимостей

Для начала необходимо установить зависимости в окружение проекта через менеджер пакетов, мы используем yarn.

yarn add -D eslint prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue eslint-plugin-import @vue/eslint-config-typescript

Рассмотрим каждую зависимость:

  • eslint-config-prettier — отключает все правила, которые не нужны или могут конфликтовать с Prettier;

  • eslint-plugin-prettier — запускает Prettier как правило ESLint и сообщает о различиях как об отдельных проблемах ESLint;

  • eslint-plugin-vue — официальный плагин ESLint для Vue.js;

  • eslint-plugin-import — предназначен для поддержки анализа синтаксиса импорта/экспорта и предотвращения проблем с орфографическими ошибками в путях к файлам и именах импорта;

  • @vue/eslint-config-typescript — плагин специально разработанный для vue/cli и create-vue. Этот набор правил является базовой конфигурацией для проектов Vue-TypeScript.

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

Добавление конфигурации

Далее нужно добавить файл конфигурации .eslintrc.js (или любой другой файл формата, который поддерживает ESLint)

module.exports = {
  root: true,
  env: {
    node: true,
  },
  plugins: [@typescript - eslintt', 'import'],
  extends: [
    'eslint:recommended',
    'plugin:vue/essential',
    @vuee / typescript',
    'plugin:prettier/recommended',
  ],
}

.prettierrc.js

module.exports = {
  singleQuote: true,
  trailingComma: 'all',
  endOfLine: 'lf',
  printWidth: 100,
};

Подробно с опциями prettier можно ознакомиться в документации.

Проектные правила

Помимо основных правил vue/essential, которые предлагает eslint-plugin-vue , мы используем и другие, некоторые из которых отличаются от Style Guide, который предлагает Vue.

Снизу представлены некоторые из них:

'vue/order-in-components': [
  'error',
  {
    order: [
      'name',
      'directives',
      'components',
      'mixins',
      ['provide', 'inject'],
      'model',
      'props',
      'filters',
      'data',
      'computed',
      'watch',
      'methods',
      'LIFECYCLE_HOOKS',
      'ROUTER_GUARDS',
    ],
  },
],
'vue/v-for-delimiter-style': ['error', 'of'],
'vue/next-tick-style': ['error', 'promise'],
'vue/require-prop-types': 'error',
'vue/prop-name-casing': ['error', 'camelCase'],
'vue/component-name-in-template-casing': ['error', 'PascalCase'],
'vue/component-definition-name-casing': ['error', 'PascalCase'],
'vue/custom-event-name-casing': ['error', 'camelCase'],
'vue/no-duplicate-attr-inheritance': 'error',
'vue/this-in-template': ['error', 'never'],
'vue/v-on-style': ['error', 'shorthand'],
'vue/no-multi-spaces': 'error',
'vue/padding-line-between-blocks': 'error',
'vue/component-tags-order': [
  'error',
  {
    order: ['template', 'script', 'style'],
  },
],
'vue/v-on-event-hyphenation': ['error', 'never'],
'vue/attribute-hyphenation': ['error', 'never'],
'vue/v-bind-style': 'error',
'vue/v-slot-style': ['error', 'shorthand'],
'vue/no-unused-properties': [
  'error',
  {
    groups: ['props', 'data', 'computed', 'methods', 'setup'],
    ignorePublicMembers: true,
  },
],

С правилами eslint-plugin-vue можно ознакомиться в документации.

Интеграция с IDE

Большинство IDE имеют возможность интеграции с линтерами, в частности рассмотрим VSCode от Microsoft и WebStorm от JetBrains.

В VSCode необходимо добавить файл в корневом каталоге .vscode/settings.json и указать настройки для вашего проекта, например:

{
  "eslint.format.enable": true,
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  }
}

В WebStorm необходимо перейти в соответствующий раздел настроек и, используя графический интерфейс, указать настройки: Preferences → Languages & Frameworks → JavaScript → Code Quality Tools → ESLint.

Заключение

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

Всегда рассматривайте вариант автоматизации улучшения кода, следите за обновлениями настроек и правил линтера. Если отсутствует необходимая настройка для вашего проекта, подумайте над тем, чтобы написать своё правило для линтера. Например, мы в своей команде придерживаемся отступов между опциями SFC, наше видение совпало с комьюнити и мы решили добавить данное правило в eslint-plugin-vue, если интересно узнать подробнее, можете обратиться к следующему Pull Request.

И наконец, если у вас есть предложения, вопросы, мы с радостью ответим, это должно помочь нам делать проекты лучше.

Материал подготовили:

Максим Стихарев – технический директор Shtab

Магомед Чемурзиев – frontend-разработчик Shtab