Блог
  • Разработка

Как настроить VS Code для разработки на PHP и JavaScript

Начинающие программисты чаще всего начинают писать и редактировать код в универсальных сервисах NotePad ++ и Sublime Text. Но первый не может обрабатывать большие объёмы, второй — платный. Поэтому многие в итоге обращаются к VS Code.

Что такое VS Code

Visual Studio Code — лёгкий редактор кода. Вес загрузочного файла меньше 200 Мб, и вес установленного приложения меньше 500 Мб. Кроме того, он кросс-платформенный — его можно устанавливать на операционные системы:

  • Windows

  • Linux

  • macOS

Это интересно! VS Code создала компания Microsoft в 2015 году, он распространялся бесплатно с открытым исходным кодом. 14 апреля 2016 года закончили бета-тестирование. Пользователи получили первую готовую версию редактора.

Многие путают эту утилиту с Visual Studio, однако это разные программы.

Достоинства утилиты от Microsoft для создания приложения

Вот несколько преимуществ: 

  • удобство в работе консольной утилитой Git

  • подсказка ошибок

  • множество бесплатных плагинов и расширений для редактора

  • встроенный терминал

  • удобство работы с большим объёмом кода

  • поддержка множества языков программирования

  • возможность отладки кода

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

В редакторе кода VS Code были написаны многие современные приложения.

Как работать с VS Code: общие правила и понятия

Прежде чем начать работать с программным кодом, скачайте утилиту Visual Studio Code. Установите редактор на операционную систему и следуйте инструкциям инсталлятора.

Важно! Для улучшения навигации по редактору установите русский языковой пакет. Войдите во вкладку «Расширения» в программе и пропишите Russian Language Pack for VSCode. Найдите этот пакет в результатах поиска и кликните «Установить».

В таблице представлены некоторые важные параметры, которые настраивают опытные разработчики после установки редактора кода.


Параметр

Значение

editor.tabsize

Количество пробелов при табуляции

editor.wordWrap

Перенос строки

editor.fontSize

Установка размера шрифта в пикселях

files.autoSave

Установка автосохранения файлов

editor.minimap.enabled

Включение или отключение отображения мини-карты

telemetry.enableCrashReporter

Разрешение или неразрешение отправки отчётов о сбоях в работе редактора кода

editor.formatOnSave

Автоматическое форматирование документа при сохранении


Импорт проекта на языке PHP и важные расширения

VS Code оснащён поддержкой языка программирования PHP и всех его фич. Кросс-платформенные инструменты находятся в свободном доступе.

Чтобы импортировать проект на языке PHP в редактор кода:

  1. Нажмите на первую иконку в левой строке меню. Эту операцию можно сделать с помощью горячих клавиш CTRL + SHIFT + E. Таким образом вы откроете «Проводник файлов».

  2. Найдите, где у вас лежит проект. Это может быть рабочий стол или отдельная папка на диске D. Кликните Import.

Либо вы можете сделать новый проект, создав папку с названием проекта. В ней будут находиться файлы с кодом.

Теперь потребуется выбрать необходимые расширения для работы в редакторе на языке PHP.

Полезные PHP-плагины для работы программиста

Для установки расширений необходимо зайти в File -> Preferences -> Extensions. Если вы работаете на «Маке», то войдите во вкладку View -> Extensions. Система отобразит целый список популярных и недавно появившихся плагинов для работы на PHP.

Давайте рассмотрим плагины, необходимые для программиста при написании кода на языке PHP в проектах:

EditorConfig For VS Code

Функции расширения: настройка промежутков и перевода строк.

Файл с набором настроек элементов для большинства утилит, в которых пишут код. Собирает настройки из документа .editconfig, располагающегося в корневой папке проекта. Для начинающих разработчиков важно знать одну фишку при работе с этим плагином: PHP-код исполняется на *nix системах, поэтому рекомендуется использовать PHP Standards Recommendations.

Intelephense

Функции расширения: автодополнение и анализ кода.

Плагин позволяет переходить к месту создания функции, переменной или класса с помощью горячих клавиш Alt + Click кнопкой мышки. В утилиту уже встроена поддержка кода PHP, рекомендуется её отключить для исключения дублирования подсказок.

PHP Debug — дебаггер

Чтобы воспользоваться расширением, рекомендуется установить XDebug.

В разделе Debug необходимо добавить конфигурацию для PHP. В корне каталога проекта появится файл .vscode/launch.json. Он имеет стандартные параметры. В него нужно добавить настройки от XDebug, чтобы инструмент и плагин смогли общаться между собой.

Плагин умеет выполнять проверку кода от точки до точки и находить ошибки в нём, указывая на них программисту.

CodeSniffer для PHP.

Функции расширения: отвечает за единый стиль кодирования.

Чтобы плагин заработал, устанавливают линтер composer global require "squizlabs/php_codesniffer=*. Затем ставят CodeSniffer.

Semicolon Insertion Shortcut.

Функции расширения: отвечает за правильность синтаксиса.

Плагин добавляет «;» в конце строки, когда разработчик нажимает Ctrl + «;», и автоматически переводит курсор на новую строку.

Работа с проектом на языке JavaScript и важные расширения

Установленные разработчиком расширения увеличат эффективность работы над проектом на языке JS и оптимизируют её. Установка не отнимет много времени, зато плагины увеличат производительность программиста.

Например, плагин Babel. Он отвечает за перекодирование из более сложного формата ES6 в обычный формат ES5 с поддержкой Source Maps. Программисту после подключения плагина надо включить задание в документ tasks.json в директории .vscode. С помощью клавиш Ctrl + Shift + B вы сможете запустить сборку проекта с автоматическим перекодированием.

Полезные Javascript-плагины, используемые в VS Code

Познакомьтесь с полезными плагинами, которые понадобятся вам при написании программного кода. Они сделают за вас рутинную работу и автоматизируют написание кода.

ESLint

Плагин ESlint показывает подсказки. Вы сможете встроить ESLint в систему проверки кода, чтобы лишний раз убедиться в правильности написанного. После этого можно смело отправлять готовый код в репозиторий.

В отличие от встроенного IntelliSence ESlint показывает подсказки там, где первый не срабатывает. Плагин используют, когда нужно поработать с разными настройками для JSX, чистого кода JavaScript или окружения Node.js.

Внимание! ESLint — утверждённый стандарт для тестирования кода в среде JS.

Code Runner

Плагин Code Runner позволит запустить код на разных языках программирования. Например, вот на этих:

  • С+.

  • С++.

  • PHP.

  • Python.

Устанавливайте его в среду VS Code и экспериментируйте с языками без необходимости дополнительных программ. Code Runner экономно расходует ресурсы компьютера. Особенно полезен тем, кому приходится отлаживать код в любимой IDE, которая не поддерживает нужного языка.

Rest Client

Если вы не знаете, придёт ли ответ на HTTP-запрос или правильным ли он будет, используйте плагин Rest Client. После его установки вы сможете отсылать запросы HTTP, например GET, и мгновенно получать на него ответ.

Установите Rest Client и пропишите в коде GET + URL. Рядом появится клавиша, после нажатия на которую в правой части экрана откроется страница с ответом на HTTP-запрос.

Editor Config

Если вы разрабатываете одно большое приложение, а заказчик дал задание писать в едином стиле при разработке программы или приложения, используйте плагин Editor Config. Расширение перезаписывает настройки рабочей среды, пользователя, заменяя на настройки, находящиеся в документе .editorconfig. Система автоматически, без вашего участия приводит программный код к одному стилю.

Prettify JSON

Все вы знаете формат JSON. Чтобы привести программный код к этому формату, используйте плагин Prettify JSON.

Давайте посмотрим на расширения, которые позволят эффективнее работать с Git и читать код.

Расширения, помогающие визуализировать некорректный или изменённый код

Для эффективной работы и быстрого считывания кода программисту помогут расширения:

GitLens. В утилите VS Code уже встроена поддержка Git. Плагин помогает быстро узнать, когда, кто и почему поменял код. Например, GitLens предлагает фичу GitBlame. С помощью её вы узнаете, кто и когда внёс последние изменения в строку.

Commit Graph позволяет визуализировать репозиторий и отслеживать незавершённую работу.

GitKraken Workspaces и Focus помогут сгруппировать несколько репозиториев вместе. С помощью команды сводят запросы воедино.

Расширение Indent Rainbow подсвечивает отступы и некорректный код стандартным серым или любым выбранным цветом.

Плагин FiraCode вносит удобства в чтение кода программистом. Специальные лигатуры, встроенные в расширение, объединяют несколько символов в один.

Приведённые выше расширения бесплатны. Они упрощают работу программиста с кодом, в том числе при использовании API Exolve. Если вы не увидели что-то конкретное, загляните в интернет-магазин от VS Code. В нём вы найдёте ещё больше плагинов для автоматизации работы и упрощения написания кода. Некоторые из них платные.

Заключение

После установки описанных выше плагинов вы оптимизируете свою работу, оставив время на углублённое изучение редактора кода и языков программирования.

Предыдущая статья
Оцените статью:
Следующая статья