WSL и окружение для JavaScript

Автор: Трубицин Вячеслав Александрович

Интеграция WSL 2 с Visual Studio Code — мощь Linux в Windows

Почему WSL — must have для JS-разработки

Windows Subsystem for Linux (WSL) — не эмулятор, а полноценный слой совместимости Linux-приложений.

• позволяет запускать дистрибутивы Linux и использовать командную строку BASH прямо с компьютера под управлением Windows.
• помогает разработчикам Windows использовать богатую экосистему и инструменты Linux без необходимости переходить в другую операционную систему или виртуальную машину.
• проект автоматически собирается в Linux, можно использовать все расширения, которые работают в этой системе (ES Lint, NPM Intellisense и другие).
• обеспечивает согласованность между средой разработки и средой развертывания
• докер без виртуализации
• общее ускорение работы с проектом (установка пакетов, сборка и тд)

1. Активация WSL 2

# В PowerShell от админа:
wsl --install
wsl --set-default-version 2

2. Выбор дистрибутива

wsl --list --online  # Показать доступные ОС
wsl --install Ubuntu-24.04  # Новая LTS-версия

3. Интеграция с VS Code

1. Установите расширение WSL
2. Откройте папку проекта через:

code . --remote wsl+Ubuntu-24.04

Настройка JavaScript-окружения

4. Установка Node.js

# Для Ubuntu/WSL (2025):
curl -fsSL https://deb.nodesource.com/setup_22.x | sudo -E bash -
sudo apt-get install -y nodejs

# Альтернатива через nvm:
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v2.0.0/install.sh | bash
nvm install --lts

5. Создание Vue-проекта

npm create vue@latest
✔️ Выберите необходимый стек

Рабочий процесс: WSL vs Native Windows

6. Сравнение производительности

Продвинутые техники

7. Доступ к Windows-файлам

# Доступ к файлам Windows сохраняется
cd /mnt/c/...

8. Настройка Vue DevTools

# В WSL:
npm install @vue/devtools@next --save-dev

// main.js
import { devtools } from '@vue/devtools'
app.use(devtools)

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

9. Установка Docker Desktop

1. Скачайте Docker Desktop 2025
2. В настройках активируйте:

 WSL 2 Backend
 GPU Acceleration

10. Пример Dockerfile для Vue

FROM node:22-slim
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
CMD ["npm", "run", "dev"]

Решение частых проблем

11. Ошибки HMR в WSL

1. В vite.config.js добавьте:
   server: { watch: { usePolling: true } }
2. Перезапустите сервер разработки

12. Сброс кэша

# Для Vue CLI:
vue inspect --clean

Статистика эффективности

Советы для профессионалов

13. Оптимизация WSL для Vue

# В /etc/wsl.conf:
[interop]
appendWindowsPath = false  # Ускоряет запуск npm

Pro Tip: Используйте Vitest для тестирования прямо в WSL — скорость выполнения тестов выше на 40%.

Итоги

WSL 2 — это мост между экосистемой Linux и удобством Windows, критически важный для JavaScript-разработки. Он обеспечивает:

• Суперсилу производительности — ускорение npm install на 40%, сборки проектов на 41% и HMR на 66% за счет оптимизированной работы с файловой системой.
• Согласованность окружений — идентичная среда разработки и продакшена, что исключает ошибки из-за различий ОС.
• Прямую интеграцию с Docker — контейнеризация без виртуализации и GPU-ускорение.
• Доступ к Linux-инструментам (ESLint, Vitest) прямо из Windows.

WSL 2 экономит до 62% времени на рутинные задачи, превращая Windows в идеальную платформу для современных JS-фреймворков (Vue, React) и DevOps-практик.

Упражнение: Создайте проект через bash

# 1. Инициализируйте Vue-проект
npm create vue@latest
# 2. Запустите сервер разработки
npm run dev
# 3. Откройте http://localhost:5173 в Windows