🗺️ Инструменты разработчика

Editor, DevTools, терминал, линтеры, pre-commit, AI-помощники.

С чего начать

1. VS Code -- установка и настройка — поставить редактор
2. Полезные расширения — must-have пак для фронта
3. Обзор DevTools — браузерные инструменты одним взглядом
4. Терминал -- базовые команды — ls, cd, mkdir, cp, mv, rm
5. ESLint + Prettier -- совместная работа — единый стиль без конфликтов

VS Code

Настройка

• Настройка VS Code — первый запуск, темы, шрифты
• VS Code -- установка и настройка — скачивание, базовая конфигурация
• VS Code -- настройка settings.json — конфиг как код
• VS Code -- workspace настройки — настройки на проект
• VS Code -- работа с файлами и папками — explorer, поиск
• VS Code -- встроенный терминал — терминал в редакторе

Горячие клавиши

• Горячие клавиши — клавиатурные сокращения по категориям
• VS Code -- основные горячие клавиши — навигация, поиск, рефакторинг
• VS Code -- мультикурсор и выделение — Alt+Click, Ctrl+D, column select
• VS Code -- сниппеты — свои шаблоны кода
• Emmet -- быстрый набор HTML и CSS — div.foo>ul>li*3

Расширения

• Полезные расширения — стартовый пак
• VS Code -- расширения для начинающих — что ставить первым
• VS Code -- создание расширений — пишем своё

Debug

• VS Code -- отладчик (Debugger) — breakpoints, launch.json()
• VS Code -- задачи (Tasks) — кастомные команды на горячих клавишах

Chrome DevTools

Панели

• Обзор DevTools — все панели одним взглядом
• DevTools -- открытие и обзор панелей — F12, Cmd+Opt+I
• Console tab — console.*, выполнение JS, фильтры
• Elements tab — DOM, CSS, computed styles
• DevTools -- инспекция элементов — Inspect Element, $0
• Network tab — запросы, headers, waterfall, throttling
• DevTools -- Sources и отладка JS — пошаговая отладка
• Debugging JS — breakpoints, watch, call stack
• Performance tab — flame chart, FPS, профилирование
• DevTools -- Application панель — storage, cookies, service workers

Source Maps

• Source Maps -- отладка prod кода — дебаг минифицированного билда

Терминал

Команды

• Терминал -- базовые команды — ls, cd, mkdir, cp, mv, rm
• Полезные команды — grep, find, sed, awk, xargs
• Навигация по файловой системе — pwd, относительные/абсолютные пути
• Создание и удаление файлов — touch, mkdir, rm -rf
• Переменные окружения — $PATH, .env, export

Bash скрипты

• Bash основы — что такое shell, синтаксис команд
• Bash -- скрипты и автоматизация — .sh, shebang, циклы, условия

Пакетные менеджеры

• Пакетные менеджеры -- npm vs yarn vs pnpm — выбор и сравнение
• Git установка и настройка — git config --global, SSH ключи

Линтеры и форматтеры

ESLint

• ESLint — правила, конфиги, plugins

Prettier

• Prettier — единый стиль без споров
• ESLint + Prettier -- совместная работа — без конфликтов правил
• Stylelint — линтер для CSS/SCSS

EditorConfig

• EditorConfig — кросс-редакторные базовые настройки

Pre-commit

Husky · lint-staged · commitlint

• Husky -- Git hooks — pre-commit, commit-msg, pre-push
• Husky и pre-commit hooks — запуск проверок до коммита
• lint-staged -- линтинг staged файлов — проверяем только diff
• commitlint -- стандарт коммитов — conventional commits
• Автоматизация проверок перед коммитом — связка husky+lint-staged+commitlint

AI-помощники

• AI-assisted development — обзор подхода, плюсы и риски
• GitHub Copilot — автодополнение в редакторе
• Claude Code — CLI-агент для рутинных задач
• Cursor — fork VS Code с глубокой AI-интеграцией

Практики:

• prompt-инжиниринг для кода (контекст, примеры, edge cases)
• review AI-сгенерированного кода — не доверяй слепо
• работа с большим контекстом — @file, @folder, @docs
• сравнение моделей: Claude / GPT / Gemini под разные задачи

Связанные

• _MOC Основы · _MOC Git · _MOC JavaScript · _MOC CSS · _MOC Node.js · _MOC DevOps

Навигация

⬅️ Предыдущий	_MOC Основы
➡️ Следующий	_MOC Git
⬆ К главной	🗺️ MOC