Начинающие программисты чаще всего начинают писать и редактировать код в универсальных сервисах 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 в редактор кода:
-
Нажмите на первую иконку в левой строке меню. Эту операцию можно сделать с помощью горячих клавиш CTRL + SHIFT + E. Таким образом вы откроете «Проводник файлов».
-
Найдите, где у вас лежит проект. Это может быть рабочий стол или отдельная папка на диске 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. В нём вы найдёте ещё больше плагинов для автоматизации работы и упрощения написания кода. Некоторые из них платные.
Заключение
После установки описанных выше плагинов вы оптимизируете свою работу, оставив время на углублённое изучение редактора кода и языков программирования.