Линтинг и форматирование

Линтинг — это процесс автоматической проверки кода на соответствие заранее установленным правилам качества и стилю. В экосистеме Quasar обычно используется комбинация ESLint и специализированных плагинов для Vue.js. Конфигурация линтера может быть интегрирована как при создании проекта через CLI, так и в существующие проекты.

Для подключения ESLint в проект Quasar необходимо выполнить команду:

quasar ext add @quasar/eslint

После этого создаётся конфигурационный файл .eslintrc.js, где можно задать правила. Основные блоки конфигурации:

env — определяет среду выполнения (browser, node, jest).
extends — подключает готовые наборы правил, например, eslint:recommended, plugin:vue/vue3-recommended.
rules — задаёт конкретные правила, которые могут быть включены, отключены или иметь предупреждающий уровень.
overrides — позволяет создавать специфичные правила для отдельных типов файлов (например, тестов).

Пример базового правила для Vue-файлов:

module.exports = {
  env: {
    browser: true,
    node: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-recommended',
    'prettier'
  ],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'vue/max-attributes-per-line': ['error', {
      'singleline': 3,
      'multiline': 1
    }]
  }
};

Интеграция Prettier для автоматического форматирования

Prettier позволяет унифицировать стиль кода независимо от разработчика. В проектах на Quasar рекомендуется совместное использование ESLint + Prettier для предотвращения конфликтов правил.

Установка:

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

Настройка .prettierrc:

{
  "semi": true,
  "singleQuote": true,
  "trailingComma": "all",
  "printWidth": 100,
  "tabWidth": 2
}

Подключение Prettier к ESLint осуществляется через plugin:prettier/recommended, что обеспечивает автоматическую проверку форматирования вместе с линтингом.

Правила форматирования в Vue и Quasar

В Quasar-компонентах особое внимание уделяется структуре .vue файлов: <template>, <script>, <style>. Рекомендуется:

Использовать отступ 2 пробела.
Разделять блоки пустой строкой для улучшения читаемости.
Максимальная длина строки — 100 символов.
Все свойства компонентов в <script> должны следовать единому порядку: name, props, emits, data, computed, methods, watch.
В <template> использовать kebab-case для пользовательских компонентов и camelCase для JavaScript-переменных внутри директив.

Пример соблюдения правил:

<template>
  <q-page>
    <q-btn @click="increment" label="Добавить" />
    <p>Счётчик: {{ count }}</p>
  </q-page>
</template>

<script>
export default {
  name: 'CounterPage',
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count += 1;
    }
  }
};
</script>

<style scoped>
p {
  font-size: 16px;
  margin-top: 10px;
}
</style>

Автоматизация линтинга и форматирования

Для удобства интегрируются husky и lint-staged, которые позволяют запускать линтинг и Prettier перед каждым коммитом:

npm install --save-dev husky lint-staged
npx husky install

Добавление в package.json:

{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,vue}": [
      "eslint --fix",
      "prettier --write"
    ]
  }
}

Это гарантирует, что весь коммитированный код будет соответствовать стандартам проекта.

Совмещение Quasar CLI с линтингом

Quasar CLI позволяет автоматически проверять код при сборке и запуске проекта. Достаточно добавить флаг --lint:

quasar dev --lint
quasar build --lint

При использовании этих команд все ошибки ESLint и конфликты с Prettier будут выведены в консоль, что предотвращает попадание неконсистентного кода в репозиторий.

Линтинг и форматирование

Интеграция Prettier для автоматического форматирования

Правила форматирования в Vue и Quasar

Автоматизация линтинга и форматирования

Совмещение Quasar CLI с линтингом

Рекомендации по поддержанию качества кода