ESLint Plugin Vue Code Order

Для связи рекомендую использовать телеграм: @ByEfimovv

ESLint плагин для автоматической проверки и обеспечения правильного порядка кода в Vue файлах с <script setup>. Помогает поддерживать чистоту и читаемость кода в ваших Vue.js проектах.

🚀 Установка

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

📋 Быстрый старт

Базовая настройка

В вашем .eslintrc.js:

module.exports = {
  plugins: ["vue-code-order"],
  rules: {
    "vue-code-order/vue-script-setup-order": "error",
  },
};

Готовые конфигурации

Рекомендуемая конфигурация:

module.exports = {
  extends: ["plugin:vue-code-order/recommended"],
};

Строгий режим:

module.exports = {
  extends: ["plugin:vue-code-order/strict"],
};

🎯 Как это работает

Плагин проверяет порядок кода в блоках <script setup> и предупреждает о нарушениях. Он помогает поддерживать единообразную структуру кода во всем проекте.

Правильный порядок кода:

1. 🔧 Framework initialization - Инициализация фреймворка

   const { $moment } = useNuxtApp();
   const route = useRoute();

2. 🏪 Stores - Инициализация сторов

   const authStore = useAuthStore();
   const userStore = useUserStore();

3. 📚 Libraries - Импорты и инициализация библиотек

   import { useModal } from "vue-final-modal";
   const { copy } = useClipboard();

4. 📊 Variables - Реактивные переменные

   const userData = ref({});
   const isLoading = ref(false);

5. 🔄 Computed & Custom Hooks - Вычисляемые свойства и кастомные хуки

   const fullName = computed(() => `${user.firstName} ${user.lastName}`);
   const { filteredData } = useFilter(data);

6. 🌐 Server Requests - Запросы к серверу

   const { data: users } = await useAsyncData("users", () => fetchUsers());

7. ⚡ App Functions - Функции приложения

   const handleSubmit = () => {
     // логика обработки
   };

8. 🔍 Modals - Работа с модальными окнами

   const openModal = () => {
     const { open } = useModal({ component: MyModal });
     open();
   };

9. 👀 Watchers & Listeners - Наблюдатели и слушатели

   watch(userId, (newId) => {
     loadUserData(newId);
   });

10. 🔄 App Lifecycle - Жизненный цикл приложения

    onMounted(() => {
      initializeApp();
    });
    
    definePageMeta({
      auth: true,
    });

⚙️ Настройка

Кастомизация порядка групп

{
  "vue-code-order/vue-script-setup-order": ["error", {
    "order": [
      "imports",
      "types",
      "framework-init",
      "stores",
      "libraries",
      "variables",
      "computed-hooks",
      "server-requests",
      "app-functions",
      "modals",
      "watchers-listeners",
      "app-lifecycle"
    ]
  }]
}

Добавление пользовательских групп

{
  "vue-code-order/vue-script-setup-order": ["error", {
    "order": [
      "imports",
      "types",
      "framework-init",
      "stores",
      "analytics", // ваша группа
      "libraries",
      // остальные группы...
    ],
    "groups": {
      "analytics": {
        "patterns": [
          "useGoogleAnalytics",
          "useYandexMetrica",
          "trackEvent.*"
        ],
        "description": "Analytics services"
      }
    }
  }]
}

Расширение существующих групп

{
  "vue-code-order/vue-script-setup-order": ["error", {
    "groups": {
      "libraries": {
        "patterns": [
          // базовые паттерны сохраняются
          "useMyCustomLibrary", // добавляем новый
          "myCompanyFramework.*"
        ]
      }
    }
  }]
}

Работа с циклическими зависимостями

allowCyclicDependencies

Позволяет разрешить циклические зависимости между группами. По умолчанию: false.

{
  "vue-code-order/vue-script-setup-order": ["error", {
    "allowCyclicDependencies": true
  }]
}

Пример использования:

<script setup lang="ts">
// Без allowCyclicDependencies: true - будет ошибка
const userStore = useUserStore(); // stores группа
const computedData = computed(() => userStore.data); // computed-hooks группа

const apiClient = createApiClient(); // libraries группа
const processedData = computed(() => apiClient.process(computedData.value)); // циклическая зависимость
</script>

skipDependencyCheck

Позволяет полностью пропустить проверку зависимостей для указанных групп.

{
  "vue-code-order/vue-script-setup-order": ["error", {
    "skipDependencyCheck": ["libraries", "computed-hooks"]
  }]
}

Когда использовать:

• При работе со сложными композаблами
• Для групп с множественными взаимосвязями
• При рефакторинге legacy кода

Пример:

{
  "vue-code-order/vue-script-setup-order": ["error", {
    "order": [
      "imports",
      "framework-init",
      "stores",
      "libraries",
      "computed-hooks"
    ],
    "skipDependencyCheck": ["libraries"], // библиотеки могут использоваться в любом порядке
    "allowCyclicDependencies": true // разрешить циклические зависимости между остальными группами
  }]
}

📖 Пример

❌ Неправильно:

<script setup lang="ts">
// Функция идет перед инициализацией stores
const handleClick = () => console.log("clicked");

// Store инициализируется после функций
const userStore = useUserStore();

// Route инициализируется в конце
const route = useRoute();
</script>

✅ Правильно:

<script setup lang="ts">
// 1. Framework initialization
const route = useRoute();

// 2. Stores
const userStore = useUserStore();

// 3. App functions
const handleClick = () => console.log("clicked");
</script>

🔧 Совместимость

• ESLint: >= 8.0.0
• Vue: >= 3.0.0
• Node.js: >= 16.0.0

🎯 VS Code Расширение

В дополнение к ESLint плагину, мы создали VS Code расширение Vue Code Order Hover, которое показывает категории функций при наведении курсора!

📦 Установка из VS Code Marketplace

Самый простой способ:

1. Откройте VS Code
2. Перейдите в Extensions (Ctrl/Cmd + Shift + X)
3. Найдите "Vue Code Order Hover"
4. Нажмите Install

Или через командную строку:

code --install-extension byefimov.vue-code-order-hover

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

1. Откройте Vue файл с <script setup>

2. Наведите курсор на любую функцию в Vue файле и увидите всплывающую подсказку с категорией:

   • При наведении на useRoute() → "🔧 Framework initialization"
   • При наведении на ref() → "📊 Variables"
   • При наведении на computed() → "🔄 Computed & Custom Hooks"
   • И так далее для всех поддерживаемых функций!

Возможности расширения

• ✨ Мгновенная категоризация функций при наведении
• 📊 Отображение порядка групп в рекомендуемой последовательности
• 🎨 Красивые эмодзи для каждой категории
• ⚙️ Настраиваемое поведение через настройки VS Code
• 🔄 Синхронизация с ESLint - использует ту же логику категоризации

Подробные инструкции по установке и тестированию смотрите в vscode-extension/INSTALLATION.md.

📝 Лицензия

MIT

🤝 Поддержка

Если у вас есть вопросы или предложения, создайте issue в репозитории.