Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

1 <p><strong><a>Visual Studio Code</a>- популярный бесплатный редактор кода, созданный Microsoft'ом для программистов. VS Code никак не связан с Visual Studio. VS Code работает быстрее<a>Атома</a>, активно развивается и легко расширяется плагинами.</strong></p>

2 <p>Пакетный менеджер нужен для установки и удаления пакетов расширений (плагинов). Для удобной разработки на JavaScript для бэкенда и фронтенда нужно установить несколько пакетов.</p>

3 <p>Для установки нового пакета зайдите в выпадающее меню "View" на вкладку "Extensions" и введите название пакета в строке поиска, а затем нажмите кнопку "Install".</p>

4 <h2>Содержание</h2>

5 <ul><li><a>Babel и ES6</a></li>

6 <li><a>Стандарты кодирования</a></li>

7 <li><a>Автоматическое дополнение</a></li>

8 <li><a>Отладка</a></li>

9 <li><a>Ссылки</a></li>

10 </ul><h2>Babel и ES6</h2>

11 <p>VS Code содержит понятие "сборки проекта". Редактор можно настроить таким образом, чтобы сборка JavaScript-проекта заключалась в конвертации кода из ES6 в читаемый ES5 с Source Maps с помощью Babel.</p>

12 <p>Добавьте таск (задание) в файл tasks.json в директории .vscode в корне вашего проекта:</p>

13 <p>Теперь комбинация клавиш Shift+Ctrl+B (Windows/Linux) или Shift+CMD+B(macOS) запустит сборку.</p>

14 <p>Подробнее о tasks можно<a>узнать на сайте VS Code</a>.</p>

15 <h2>Стандарты кодирования</h2>

16 <p><strong>Eslint</strong>- это утилита, проверяющая стандарты кодирования на JavaScript. Стандарт де-факто в мире JS.</p>

17 <p>Нужно сначала установить eslint в системе, а потом установить расширение VS Code, которое будет использовать установленный линтер. Есть разные способы интеграции линтера с расширением. Мы рассмотрим установку линтера глобально в системе.</p>

18 <ol><li><p>Установите Node.js, используя<a>пакетный менеджер вашей операционной системы</a>.</p>

19 </li>

20 <li><p>Установите eslint командой npm install -g eslint. Вероятно, вам понадобится использовать sudo.</p>

21 </li>

22 <li><p>Установите плагины, которые конфигурируют eslint. Без них (по умолчанию) eslint ничего не проверяет.</p>

23 </li>

24 <li><p>eslint требует наличия конфигурационного файла. Создайте в корне вашего проекта файл .eslintrc.yml со следующим содержанием:</p>

25 </li>

26 <li><p>Установите расширение "<a>linter-eslint</a>" в VS Code.</p>

27 </li>

28 </ol><h2>Автоматическое дополнение</h2>

29 <p>VS Code содержит мощную систему анализа кода для автодополнений и подсказок -<a>IntelliSense</a>.</p>

30 <p>IntelliSense работает сразу, но для настройки деталей нужно создать конфигурационный файл jsconfig.json.</p>

31 <h3>jsconfig.json</h3>

32 <p>Если положить в корень директории с JavaScript-проектом конфигурационный файл jsconfig.json, то VS Code будет использовать эту конфигурацию для работы с вашим проектом. Вот пример такого файла:</p>

33 <p>Здесь можно настроить, например, какие директории стоит исключить из системы автодополнений IntelliSense. VS Code совместим с node, webpack, bower, ember и другими популярными инструментами. Полная документация по jsconfig<a>доступна на сайте VS Code</a>.</p>

34 <h2>Отладка</h2>

35 <p>VS Code содержит встроенный отладчик кода. Вы можете, например, отметить брейкпойнты (точки остановки) и следить за состоянием приложения в реальном времени.</p>

36 <p>Для отладки бэкенд-кода достаточно встроенных возможностей. Для отладки фронтенд-кода нужно установить плагин для соответствующего браузера:</p>

37 <ul><li><a>Debugger for Chrome</a></li>

38 <li><a>Debugger for Firefox</a></li>

39 <li><a>Debugger for Edge</a></li>

40 </ul><p>Подробнее об отладке можно узнать<a>на сайте VS Code</a>.</p>

41 <h2>Ссылки</h2>

42 <p><a>Курс</a>по настройке окружения для работы в современной экосистеме JavaScript.</p>