Установка и настройка окружения разработки

Установка Node.js и менеджера пакетов

Для работы с SvelteKit необходимо иметь установленный Node.js версии 18+, так как более старые версии могут вызвать ошибки совместимости с современными библиотеками и инструментами сборки. Рекомендуется использовать официальную версию LTS.

После установки Node.js проверка производится командами:

node -v
npm -v

Для проектов SvelteKit часто используют pnpm или yarn вместо npm, так как они обеспечивают более быструю установку зависимостей и оптимизированное хранение пакетов. Установка pnpm:

npm install -g pnpm
pnpm -v

Создание нового проекта SvelteKit

Инициализация нового проекта выполняется командой:

pnpm create svelte@latest my-app

При этом будет предложено выбрать тип шаблона (Skeleton project или с примером TypeScript), поддержку TypeScript, тестовые фреймворки и линтеры. Для крупных проектов рекомендуется сразу включать TypeScript и eslint с prettier, чтобы облегчить поддержку кода.

После создания проекта необходимо перейти в директорию проекта:

cd my-app

Установка UI-библиотек

SvelteKit не включает встроенный набор компонентов, поэтому для интерфейсов часто используют сторонние библиотеки:

  1. Svelte Material UI (SMUI) – реализует компоненты Material Design:
pnpm add @smui/button @smui/textfield @smui/card
  1. Svelte Headless UI – библиотека без стилей, предоставляет доступные интерактивные элементы:
pnpm add @rgossiaux/svelte-headlessui
  1. Shadcn UI для Svelte – на основе TailwindCSS, позволяет быстро собирать интерфейсные элементы с адаптивной версткой:
pnpm add shadcn-svelte

Настройка TailwindCSS с SvelteKit

Многие UI-библиотеки требуют TailwindCSS для стилизации. Установка выполняется следующими шагами:

  1. Установка TailwindCSS и зависимостей:
pnpm add -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
  1. Настройка tailwind.config.cjs для SvelteKit:
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{html,js,svelte,ts}",
    "./node_modules/shadcn-svelte/**/*.{js,svelte,ts}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
  1. Подключение Tailwind в основной файл стилей src/app.css:
@tailwind base;
@tailwind components;
@tailwind utilities;
  1. Импорт CSS в src/routes/+layout.svelte:
<script>
  import "../app.css";
</script>
<slot />

Настройка TypeScript и проверки типов

Если проект создавался с TypeScript, важно проверить конфигурацию tsconfig.json:

{
  "extends": "./.svelte-kit/tsconfig.json",
  "compilerOptions": {
    "strict": true,
    "moduleResolution": "node",
    "types": ["svelte"]
  },
  "include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.svelte"]
}

Режим strict: true обеспечивает раннее выявление ошибок типов, особенно при использовании UI-компонентов с пропсами и событиями.

Настройка Vite

SvelteKit использует Vite как сборщик. Настройка Vite позволяет интегрировать дополнительные плагины, например для Tailwind, изображений или иконок:

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [sveltekit()],
  server: {
    port: 5173,
    open: true
  }
});

Важно убедиться, что порты и прокси-настройки соответствуют требованиям окружения, особенно если проект интегрируется с backend или внешними API.

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

После установки всех зависимостей и настройки UI-библиотек проект можно запустить:

pnpm run dev

По умолчанию сервер работает на http://localhost:5173. Любые изменения в коде автоматически обновляют страницу благодаря встроенному hot module replacement (HMR).

Организация структуры проекта для UI-библиотек

Рекомендуется придерживаться следующей структуры для удобства работы:

src/
 ├─ lib/
 │   ├─ components/       # переиспользуемые UI-компоненты
 │   ├─ ui/               # интеграция сторонних библиотек, стили
 ├─ routes/
 │   └─ ...               # страницы приложения
 ├─ app.css               # глобальные стили

Такой подход облегчает масштабирование приложения и поддержку кода при добавлении новых UI-библиотек.

Настройка линтеров и форматирования

Для поддержания единообразия кода рекомендуется настроить ESLint и Prettier:

pnpm add -D eslint prettier eslint-config-prettier eslint-plugin-svelte3

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

module.exports = {
  extends: ["eslint:recommended", "plugin:svelte3/recommended", "prettier"],
  overrides: [
    {
      files: ["*.svelte"],
      processor: "svelte3/svelte3"
    }
  ],
  rules: {
    "no-unused-vars": "warn"
  },
  settings: {
    "svelte3/typescript": require("typescript")
  }
};

Файлы .prettierrc можно настроить для автоматического форматирования компонентов и стилей:

{
  "semi": true,
  "singleQuote": true,
  "printWidth": 100,
  "svelteSortOrder": "scripts-styles-markup",
  "svelteStrictMode": true
}

Эти настройки гарантируют совместимость с SvelteKit и сторонними UI-библиотеками, минимизируя конфликты при разработке.

Оглавление