Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

1 <p><strong>В этой статье рассказываем, за что разработчики любят Visual Studio Code, какие его расширения пригодятся в программировании на PHP и JavaScript, а также как их устанавливать.</strong></p>

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

3 <ul><li><a>Чем хорош редактор VS Code</a></li>

4 <li><a>VS Code для разработки на PHP</a></li>

5 <li><a>VS Code для разработки на JavaScript</a></li>

6 <li><a>Расширения, которые помогут эффективнее работать с Git и читать код</a></li>

7 <li><a>Итог</a></li>

8 </ul><h2>Чем хорош редактор VS Code</h2>

9 <p><a>Visual Studio Code</a>- популярный редактор кода. Важно отметить, что Visual Studio Code никак не связан с Visual Studio. Разработчики любят VS Code за то, что он предоставляет много полезных функций бесплатно. Это, например:</p>

10 <ul><li>Отладчик кода</li>

11 <li>Встроенный терминал</li>

12 <li>Удобные инструменты для работы с Git</li>

13 <li>Подсветка синтаксиса для множества популярных языков и файловых форматов</li>

14 <li>Удобная навигация</li>

15 <li>Встроенный предпросмотр<a>Markdown</a></li>

16 <li>Умное автодополнение</li>

17 <li>Встроенный пакетный менеджер с большим набором расширений.</li>

18 </ul><p>Также у VS Code есть большой набор расширений. Они упрощают разработку за счет новых или улучшенных функций программы. Так может выглядеть интерфейс редактора после установки расширений:</p>

19 <p>Разберемся, как устанавливать расширения и какие из них пригодятся в разработке на PHP и JavaScript.</p>

20 <h2>VS Code для разработки на PHP</h2>

21 <h3>Как устанавливать расширения</h3>

22 <p>Чтобы установить расширение, зайдите во вкладку "Extensions", введите название нужного пакета в строке поиска, а затем нажмите кнопку "Install".</p>

23 <p>Получится примерно так:</p>

24 <h3>Какие расширения выбрать для разработки на PHP</h3>

25 <h3>EditorConfig for VS Code</h3>

26 <p><a>EditorConfig</a>- это конфигурационный файл и набор расширений ко многим редакторам кода. Он подхватывает настройки из файла .editorconfig, который, как правило, размещается в корне проекта.</p>

27 <p>Расширение автоматически настраивает отступы и перевод строк единообразно для всех разработчиков, которые его используют. Чаще всего PHP-код выполняется на *nix системах, поэтому необходимо использовать стандарт<a>PSR</a>.</p>

28 <p>Ниже приведем пример файла .editorconfig, который используется в Laravel:</p>

29 <blockquote><h3>Читайте также:</h3>

30 <p>Почему PHP идеально подходит<a>для веб-разработки</a>: преимущество языка и запуск первого сайта</p>

31 </blockquote><h3>PHP Intelephense</h3>

32 <p>В VS Code уже есть поддержка синтаксиса и подсказок стандартных функций языка. Но без специального дополнения редактор не будет подсказывать пользовательские функции из других частей проекта.</p>

33 <p>Расширение<a>PHP Intelephense</a>поддерживает автодополнение и анализирует код. Также оно позволяет переходить к месту, где создана функция, класс или переменная с помощью шортката Alt+Click.</p>

34 <p>Чтобы подсказки не дублировались, необходимо отключить встроенную в редактор поддержку кода для PHP:</p>

35 <p>Extensions → Search @builtin php → PHP Language Features → Disable</p>

36 <h3>PHP Debug</h3>

37 <p>При разработке может возникнуть ситуация, когда простых функций отладки и логирования становится недостаточно. Тогда помогает специальный инструмент - дебаггер.</p>

38 <p>Для PHP есть расширение<a>Xdebug</a>, которое позволяет расставить точки останова и посмотреть окружение в предполагаемом месте ошибки, выполняя код поэтапно либо до следующей точки.</p>

39 <p>Чтобы воспользоваться<a>PHP Debug</a>, необходимо:</p>

40 <ol><li>Установить сам Xdebug. Без него расширение работать не будет.</li>

41 <li>Добавить конфигурацию для PHP в разделе Debug. После этого в корне проекта создастся файл .vscode/launch.json с задачами для дебаггера. Файл будет со стандартными параметрами.</li>

42 <li>Добавить настройки в файл конфигурации php - так XDebug будет общаться с нашим дебаггером. Чтобы найти этот файл, в терминале нужно выполнить команду php --ini или запустить веб-сервер с кодом phpinfo().</li>

43 <li>В Linux PHP подгружает не только основной файл, но и файл из этой директории. Например, на Ubuntu путь к директории конфигурационных файлов для PHP может быть таким: /etc/php/7.3/cli/conf.d/. В ней нужно создать файл с необходимыми правами (требуются root права):</li>

44 </ol><p>Содержимое файла:</p>

45 <p>Это настройки для локальной разработки, когда проект создается и запускается на одном компьютере.</p>

46 <h3>PHP CodeSniffer</h3>

47 <p>В языках программирования есть понятие - стиль кодирования. Это набор правил написания кода. Сейчас нас интересуют стандарты<a>PSR-1</a>и<a>PSR-12</a>: они касаются кодирования и правил оформления.</p>

48 <p>Программа, которая отвечает за проверку на соответствие стандартам - это линтер. В PHP в качестве линтера используется<a>PHP_CodeSniffer</a>. Для его работы необходимо установить сам линтер composer global require "squizlabs/php_codesniffer=*" и расширение<a>PHP Sniffer</a>.</p>

49 <p>Проверьте, что линтер установился:</p>

50 <p>Выполнить проверку кода в терминале можно с помощью команды phpcs, указав стандарт, который мы хотим использовать, и путь для проверки:</p>

51 <h3>Semicolon Insertion Shortcut</h3>

52 <p>PHP требует разделять инструкции с помощью точки с запятой. Расширение<a>Semicolon Insertion Shortcut</a>добавляет необходимый символ в конец строки с помощью шортката. Если при нажатии [Ctrl] + ; символ не вставляется, то необходимо проверить список горячих клавиш и при необходимости назначить комбинацию вручную:</p>

53 <p>File → Preferences → Keyboard Shortcuts</p>

54 <p>Введите в строку поиска insert semicolon, чтобы быстро найти нужную комбинацию.</p>

55 <blockquote><h3>Читайте также:</h3>

56 <p>Как включить<a>строгую типизацию в PHP</a>и для чего ее использовать</p>

57 </blockquote><h2>VS Code для разработки на JavaScript</h2>

58 <h3>Как устанавливать расширения</h3>

59 <p>Как мы уже сказали ранее, в VS Code есть встроенный пакетный менеджер. Он нужен для установки и удаления пакетов расширений - плагинов. Для удобной бэкенд- и фронтенд-разработки на JavaScript нужно установить несколько пакетов.</p>

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

61 <h3>Какие плагины установить для разработки на JavaScript</h3>

62 <h3>Babel</h3>

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

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

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

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

67 <h3>Стандарты кодирования</h3>

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

69 <p>Сначала нужно установить ESlint в системе, а потом установить расширение VS Code, которое будет использовать установленный линтер.</p>

70 <p>Есть разные способы интеграции линтера с расширением. Мы рассмотрим установку линтера глобально в системе.</p>

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

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

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

74 </ol><p>npm install -g eslint-config-airbnb-base eslint-plugin-import</p>

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

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

77 </ol><blockquote><h3>Читайте также:</h3>

78 <p>Как учитель на экзамене:<a>зачем разработчику линтер</a>и как он помогает сделать код понятнее</p>

79 </blockquote><h3>Автоматическое дополнение</h3>

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

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

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

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

84 <h3>Отладка</h3>

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

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

87 <blockquote><h3>Читайте также:</h3>

88 <p>Как использовать<a>точки останова</a>в своем коде на JavaScript</p>

89 </blockquote><h2>Расширения, которые помогут эффективнее работать с Git и читать код</h2>

90 <ul><li><a>GitLens</a>- в VS Code уже встроена поддержка Git. Но когда базовых возможностей становится недостаточно, на помощь приходит GitLens. Например, одна из его полезных фич - git blame на текущей строке.</li>

91 </ul><ul><li><a>Indent Rainbow</a>делает разноцветные отступы в коде и подсвечивает некорректные. Вместо радужных цветов можно установить оттенки серого.</li>

92 </ul><ul><li><a>Settings Sync</a>- плагин, который позволяет синхронизировать настройки редактора между разными компьютерами. В качестве облачного хранилища используется Github Gists. Все настройки можно скачать, указав нужный файл синхронизации.</li>

93 <li><a>Fira Code</a>- моноширинный шрифт, визуальная надстройка для более удобного чтения кода. В нем используют лигатуры, которые объединяют несколько символов в один.</li>

94 </ul><h2>Итог</h2>

95 <p>Мы привели самые популярные и необходимые расширения в Visual Studio Code, которые упростят разработку на PHP JavaScript. Все они - бесплатные и кроссплатформенные.</p>

96 <p>Если вы захотите ознакомиться с другими расширениями этого редактора, переходите на официальный портал<a>Visual Studio Marketplace</a>. Там есть плагины не только для PHP- и JavaScript-разработки, но и для программирования на Python, C++, C# и на других языках.</p>

97 <blockquote><h3>Никогда не останавливайтесь:</h3>

98 <p>В программировании говорят, что нужно постоянно учиться даже для того, чтобы просто находиться на месте. Развивайтесь с нами - на Хекслете есть<a>сотни курсов по разработке на разных языках и технологиях</a>.</p>

99 </blockquote>