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

Форматирование кода во Vue.js играет ключевую роль в поддержке читаемости, масштабируемости и качества приложений. Vue.js использует Single File Components (SFC), где каждая компонента может содержать три основных блока: <template>, <script> и <style>. Корректное оформление каждого блока упрощает навигацию и снижает вероятность ошибок.

Структура Single File Component

<template>
  <div class="app">
    <h1>{{ title }}</h1>
    <button @click="increment">Нажми меня</button>
    <p>Счетчик: {{ count }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'Пример Vue.js',
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}
</script>

<style scoped>
.app {
  font-family: Arial, sans-serif;
  padding: 20px;
}

button {
  background-color: #42b983;
  color: white;
  border: none;
  padding: 10px 15px;
  cursor: pointer;
}
</style>

Ключевые моменты структуры:

  • <template> содержит только разметку и связывается с реактивными данными через директивы Vue (v-if, v-for, v-model, @click и т.д.).
  • <script> включает логику компонента: данные, методы, вычисляемые свойства, наблюдатели (watchers) и жизненный цикл.
  • <style> отвечает за оформление компонента. Атрибут scoped позволяет изолировать стили, чтобы они не влияли на другие компоненты.

Правила форматирования шаблона

  1. Отступы и вложенность — использовать 2 пробела на уровень вложенности.
  2. Директивы Vue — писать в одну строку с соответствующим элементом: v-if="isVisible".
  3. Чистота разметки — избегать лишних оберток <div>. Для группировки элементов лучше применять <template> или <Fragment> (Vue 3).

Организация скриптов

  • Export default всегда на верхнем уровне.
  • Все data должны быть возвращаемыми объектами функции.
  • Методы и computed следует группировать по функционалу, сохраняя логический порядок.
  • Использование стрелочных функций внутри методов не рекомендуется, если требуется доступ к this.

Пример группировки методов:

methods: {
  // Работа с пользовательским вводом
  handleInput(event) {
    this.value = event.target.value;
  },

  // Работа с состоянием компонента
  toggleActive() {
    this.isActive = !this.isActive;
  }
}

Форматирование стилей

  • Разделять блоки по смыслу: общие стили, компоненты, модификаторы.
  • Именование классов через BEM (block__element--modifier) повышает читаемость.
  • Использовать отступы в 2 пробела для вложенных селекторов.
.button {
  padding: 10px 15px;
  border-radius: 4px;
}

.button--primary {
  background-color: #42b983;
  color: #fff;
}

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

Для поддержания единого стиля кода в проекте Vue.js рекомендуется настроить Prettier и ESLint:

  • Prettier автоматически форматирует код в <template>, <script> и <style>.
  • ESLint проверяет корректность синтаксиса и соблюдение правил Vue.js.
  • Конфигурация может быть объединена с плагинами eslint-plugin-vue и eslint-config-prettier.

Пример конфигурации .eslintrc.js:

module.exports = {
  root: true,
  env: {
    browser: true,
    es2021: true
  },
  extends: [
    'plugin:vue/vue3-recommended',
    'eslint:recommended',
    'prettier'
  ],
  parserOptions: {
    ecmaVersion: 12,
    sourceType: 'module'
  },
  rules: {
    'vue/html-indent': ['error', 2],
    'vue/max-attributes-per-line': ['error', { singleline: 3 }],
    'no-console': 'warn'
  }
}

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

  • Минимизировать длинные строки: переносить атрибуты и директивы на новые строки при превышении 80–120 символов.
  • Группировать функциональные блоки: данные, методы, computed, watchers и lifecycle hooks должны идти в логическом порядке.
  • Использовать комментарии для сложных вычислений и логики, избегая излишней документации очевидных операций.
  • Единообразие именования: переменные, методы и классы должны следовать общепринятому стилю camelCase или PascalCase для компонентов.

Форматирование в больших проектах

  • Разделение на мелкие компоненты помогает сократить длинные файлы и повышает модульность.
  • Использование компонентов высшего порядка (HOC) или Composable функций (Vue 3 Composition API) делает код более структурированным.
  • Следует применять scoped стили, чтобы избежать конфликтов в больших проектах с множеством компонентов.

Итоговые принципы

  1. Единообразие форматирования в <template>, <script> и <style>.
  2. Четкая структура компонентов с логическим порядком блоков.
  3. Поддержка и автоматизация через Prettier и ESLint.
  4. Минимизация дублирования и использование мелких, специализированных компонентов.

Форматирование кода в Vue.js — не только эстетическая практика, но и ключевой элемент поддерживаемости, особенно в масштабных проектах. Оно облегчает совместную работу, отладку и последующую модификацию компонентов.

Оглавление