Подключаться к своему VPS через Visual Studio Code — удобный способ работать с сервером в привычной IDE. В статье пошагово показываем, как настроить подключение по SSH через Remote Explorer: добавить VPS в список, сохранить конфигурацию, подключиться и установить VS Code Server.

После настройки редактор работает с файлами на сервере так же привычно, как с локальными: можно просматривать структуру, редактировать и сохранять — все изменения сразу применяются на VPS. #vps #tools

Надеемся, что вы будете аккуратными и никому не расскажете свой пароль. А чтобы не вводить его каждый раз, прочитайте статью о работе с Git через консоль, там есть раздел о создании SSH-ключей.

👍 Читать статью

Qwen Code — AI-агент для VS Code, который генерирует готовый код прямо в терминале.

Создание даже простой портфолио-страницы обычно занимает часы: разметка, стили, адаптивность, тёмный режим.

В статье показываем, как за три запроса к Qwen Code получить готовую страницу с семантическим HTML, CSS-переменными и поддержкой тёмного режима. Разбираем установку расширения Qwen Code Companion в VS Code, запуск через команду qwen и пошаговое взаимодействие: от структуры проекта до финальной стилизации. #ai #tools

🎁 Читать статью

Форкнуть, клонировать, запушить — звучит просто, пока не откроешь терминал и не зависнешь на генерации SSH-ключа.

В статье проходим весь путь: установка Git, git config, регистрация на GitHub, настройка SSH. Потом — форк, git clone, создание ветки, первый коммит и пуш. В конце — пулреквест и синхронизация форка с мастер-репозиторием. Между шагами — квизы для самопроверки и словарик терминов. #tools #git

🎁 Читать статью

Если вы работаете в Figma только мышкой — вы работаете медленно. Переключение инструментов, экспорт, переименование слоёв — каждое действие через меню отнимает секунды, которые за день складываются в минуты.

Горячие клавиши это исправляют. Ctrl + \ прячет весь интерфейс, Ctrl + / открывает поиск по меню, V, F и T переключают инструменты мгновенно. Разбираем самые полезные сочетания с примерами и скриншотами. #tools #figma

🎁 Читать статью

Контейнерные запросы теперь умеют проверять не только размер, но и значения CSS-свойств — например, цвет фона.

Конструкция style() в директиве @container позволяет менять оформление дочерних элементов в зависимости от вычисленных свойств контейнера. При этом container-type: style задан по умолчанию — специально объявлять его не нужно. Выражения от размеров и стилей можно комбинировать в одном условии.

В статье разбираем, как устроен этот механизм, чем он отличается от привычных запросов по размеру и где у него пока границы. #css #tools

🎁 Читать статью

Если в VS Code у вас в ходу одни и те же пять-шесть горячих клавиш — в редакторе есть ещё десятки. Вот четыре, с которых стоит начать:

- F2 переименует переменную сразу во всех местах.
- F12 откроет файл с её объявлением — даже если оно в другом модуле.
- Ctrl + G поможет попасть к строке по номеру.
- Alt со стрелками поменяет строки местами.

Ещё шесть — в статье. #vscode #tools

👾 Читать статью

ESLint — статический анализатор: разбирает код в AST и проверяет по правилам, ничего не запуская. Поэтому ловит то, что трудно увидеть на ревью — теневое имя в замыкании, забытый await внутри .map(), недостижимую ветку switch, мутацию параметра.

Часть найденного линтер чинит автоматически — с флагом --fix. Остальное оставляет на ваш суд: не каждое нарушение правила означает баг.

В новой статье — как поставить ESLint, что делает --fix, как настраивать правила под конкретный проект и команду. Плюс интерактивный пример прямо на странице: вводите код — ESLint показывает проблемы. #js #tools

🔑 Читать статью

Пресеты для ESLint v10 от HTML Academy → https://github.com/htmlacademy/eslint-config-htmlacademy

Регрессия проявилась после обновления, тесты её не ловят, в main за неделю — 40 коммитов от семи разработчиков. Перебирать вручную, делая git checkout на каждый, — потерянный день.

git bisect сводит это к бинарному поиску по истории. Помечаете один коммит рабочим, второй сломанным. Git сам переключается на середину диапазона и спрашивает: «Здесь работает?» На 40 коммитов хватает 6 шагов, на 800 — 10.

Если поведение покрыто тестом — можно вообще ничего не нажимать. git bisect run npm test проходит весь путь сам и возвращает хеш виноватого коммита. В статье — пошаговый разбор с командами и интерактивная симуляция поиска. #tools #git

✍️ Читать статью

На ревью большого PR обсуждение тонет в комментариях про форматирование: переносы строк, висячие запятые, порядок импортов, который у каждого настроен по-своему. До архитектуры и логики дело может не дойти вообще.

Prettier забирает форматирование себе. Один раз настраиваете .prettierrc — он переписывает код по единым правилам при каждом запуске. npx prettier --write . приводит весь проект в порядок одной командой. В VS Code включается формат при сохранении, и вопрос снимается на уровне редактора. А --check в CI блокирует PR с неотформатированным кодом.

В статье — как подружить Prettier с ESLint без конфликтов правил. #js #tools

💥 Читать статью

Пресет для Prettier от HTML Academy → https://github.com/htmlacademy/prettier-config-htmlacademy

Иногда HTTP-сервер нужен на пять минут — отдать клиенту статический билд на проверку или открыть вёрстку с мобильного по локальной сети. Поднимать ради этого Vite или Nginx — избыточно: первый рассчитан на полный цикл разработки, второй требует своего конфига.

http-server запускается через npx http-server и работает сразу — раздаёт текущую папку на порту 8080. Другой порт, CORS-заголовки, автооткрытие браузера, отключение кеша на время разработки — всё это флаги. Никакого конфигурационного файла или установки в проект ему не нужно.

Бонус: сервер доступен и по локальному IP — удобно открывать страницу со смартфона для проверки адаптива. #npm #tools

🎲 Читать статью

Переключаться на браузер ради каждой проверки вёрстки, искать путь к файлу вручную, переименовывать парный тег отдельно — мелкая рутина, которая съедает время. Расширения VS Code её убирают.

Три из подборки:

📎 HTML Preview — предпросмотр разметки прямо в редакторе, без переключения на браузер.
📎 Live Server — перезагружает страницу автоматически после правок в HTML, CSS или JavaScript.
📎 CSS Peek — открывает правила CSS из файла HTML через «Перейти к определению».

Ещё семь — Prettier, Colorize, Auto Rename Tag и другие — со ссылками на установку в статье. Сохраните, чтобы настроить редактор на выходных. #tools #vscode

👉🏻 Читать статью

Поставили инструмент глобально через npm install -g, попользовались — и забыли удалить. За пару лет таких пакетов набираются десятки, разных версий, и они начинают конфликтовать.

npx запускает пакет прямо из реестра npm, ничего не устанавливая глобально. Создать проект на Vite — npx create-vite my-app. Та же история со статическим сервером (npx serve .) или прогоном Prettier по всему проекту (npx prettier --write .): запустили и работаете, в npm -g ничего не осело.

Внутри npx идёт по трём адресам: сначала node_modules/.bin в проекте, потом временный кеш, и только затем реестр. Нашёл локально или в кеше — оттуда и запустит, лишнего не качает. Версию можно зафиксировать через @, например npx prettier@2 — пригодится, когда надо воспроизвести чужую ошибку или проверить старый релиз. #npm #tools

В статье это всё на интерактивном примере: нажимаете команду и видите, что происходит.

🔄 Читать статью

curl <https://api.example.com/user> — и сервер отвечает одной строкой JSON без переносов и отступов. Вложенные объекты, пара килобайт данных, нужное поле где-то внутри. Глазами не найти.

jq — это grep и sed, но для JSON. Допишите | jq . в конец команды — и тот же ответ разложится по строкам с отступами.

А дальше jq достаёт любое вложенное поле, фильтрует записи по условию, считает агрегаты и вытаскивает токен из ответа авторизации — одной строкой в пайпе с curl. В статье — интерактивная песочница: меняете фильтр и сразу видите результат на живых данных, плюс синтаксис под каждую задачу. #js #tools

🎆 Читать статью