Как сделать поиск по коду в vs

Добавил пользователь Skiper
Обновлено: 05.10.2024

Visual Studio Code - это среда разработки от компании Microsoft, созданная совсем недавно с использованием новых технологий (например Node.js). В отличие от полного пакета Visual Studio, эта среда представляет собой текстовый редактор с возможностью подключения огромного количества плагинов. Она предназначена для разработки на различных языках программирования и для разных платформ. Поддерживаются не только Windows, но и Linux, а также MacOS.

По умолчанию среда - это всего лишь очень продвинутый текстовый редактор. Поэтому для полноценной работы её предстоит настроить. В этой статье я расскажу, как пользоваться Visual Studio Code и как настроить полноценное окружение для веб-разработки. А если быть более точным - для беэкнд разработки. Поговорим про внешний вид, русификацию и, конечно же, полезные расширения.

Как пользоваться Visual Studio Code

В отличие от предыдущих статей на эту тему, я не буду рассказывать про установку. Об этом есть полноценная статья, поэтому посмотрите там. Программа без труда ставится с официального сайта или из snap-пакета в любом дистрибутиве, основанном на Debian или RedHat. Первым делом остановимся на интерфейсе программы. Причём будет рассмотрена именно работа Visual Studio Code для начинающих. Если вы уже опытный разработчик, вряд-ли вы найдёте для себя что-то новое.

1. Интерфейс Visual Studio Code

Интерфейс программы типичен для многих редакторов кода. Но есть и свои особенности. Условно главное окно программы можно разделить на семь частей:


Именно этими участками вы будете пользоваться во время работы с VS Code:

  1. Главное меню программы - можно использовать для доступа к настройкам, открытия проектов и папок и многого другого;
  2. Левая панель - эта панель есть только в VS Code, она позволяет переключаться между просмотром дерева каталогов, поиском, отладкой и окном установки дополнений. Сюда же некоторые расширения добавляют свои меню, например Docker, Git и расширение для управления проектами.
  3. Проводник - по умолчанию здесь отображается дерево каталогов, но тут же вы обнаружите настройки отладки или доступные для установки расширения, если выбран соответствующий пункт на боковой панели.
  4. Рабочая область - здесь выполняется редактирование файла.
  5. Мини карта - позволяет быстро ориентироваться по открытому исходнику.
  6. Нижняя панель - здесь отображается вывод программы при выполнении, консоль самой Visual Code, а также здесь есть встроенный терминал.
  7. Статус бар - отображается общая информация о состоянии программы.

2. Русификация Visual Studio Code

По умолчанию среда устанавливается на английском языке. Лучше так всё и оставить: большинство информации по программированию в интернете на английском языке, и, если вы привыкните к такому формату, вам будет проще во всём этом ориентироваться. Но если вас интересует, как русифицировать Visual Studio Code, то делается это очень просто. На боковой панели кликните по значку с квадратиками, который отвечает за установку дополнений, и наберите в поле поиска vscode-language-pack-ru; утилита найдёт только один пакет, нажмите Install, чтобы установить его:


Для выбора языка нажмите Ctrl+Shift+P и начните набирать Config, в предложенном списке выберите Configure Display Language:


Затем выберите ru и перезапустите программу. Всё. После этого интерфейс программы станет русским.

3. Внешний вид

Одна из важных вещей для среды разработки - её внешний вид и тема оформления. Чтобы изменить тему оформления, надо нажать сочетание Ctrl+Shift+P и набрать Theme. Затем в меню надо выбрать Color Theme:


Затем в открывшемся меню осталось выбрать нужную тему стрелками и нажать Enter. По умолчанию доступно несколько тёмных и светлых тем:


4. Управление проектами

Очень часто бывает, что приходится переключаться между несколькими проектами во время работы. По умолчанию в VS Code для этого надо открывать рабочую папку проекта через меню. Но есть выход. Это расширение Project Manager. С его помощью вы можете сохранять проекты и переключаться между ними в один клик. Установите Project Manager как было описано выше, затем кликните на боковой панели по значку с папкой.

Здесь отображается список доступных проектов. Чтобы запомнить текущую папку в качестве проекта, кликните по значку с дискетой и введите имя проекта:


После этого вы сможете очень просто управлять своими проектами.

5. Авто-форматирование кода

Один из самых важных моментов в работе с кодом - это его однообразие. Приводить код к одному виду вручную не всегда удобно - для этого и были придуманы различные расширения. Это PHP-CS-Fixer для PHP и Prettier для JS/HTML/CSS. Установите их через меню установки дополнений, а затем используйте сочетание клавиш Ctrl+Shift+F в Windows или Ctrl+Shift+I в Linux, для того чтобы выполнять выравнивание кода Visual Studio Code.


6. Автодополнение

Очень сильно помогает в разработке автоматическое дополнение кода. Вы пишите начало слова, а среда сама вам подсказывает, чем его можно завершить. Пакеты, которые позволяют выполнять автодополнение, называются *-intellisense. Рекомендуется установить PHP Intellisense, CSS Intellisense и Path Intellisense для автодополнения путей к файлам. Для разных фреймворков существуют свои расширения автоматического дополнения кода, например, для Laravel есть Laravel Extra Intellisense. Подсветка синтаксиса обычно уже встроена в VS Code для многих языков, однако если её нет, тоже ищите расширение.


7. Управление Vim

Я привык к редактору Vim и хочу использовать его стиль везде, даже в Visual Studio Code. Если вы тоже хотите, для нас с вами есть расширение Vim, которое переносит все сочетания клавиш и режимы работы Vim в редактор Visual Studio. После его установки вы сможете перемещаться по файлу кнопками h, j, k, l , использовать Esc и сохранять файл командой :w.

8. Отладка кода

В Visual Code есть интерфейс, с помощью которого выполняется отладка кода, но прежде, чем вы его сможете использовать для PHP, его придётся настроить. Для отладки кода на PHP используется отладчик Xdebug, поэтому необходимо установить дополнение PHP Debug. Далее кликните по треугольнику со значком жука на боковой панели. Если вы раньше ничего не отлаживали в этом проекте, то программа предложит вам создать файл launch.json. Кликните по этой ссылке. В открывшемся списке выберите PHP:


В полученном файле надо обратить внимание только на поле port. Он должен быть такой же, как и значение переменной xdebug.remote_port в php.ini. У меня это 9008. Сохраните изменения и нажмите зелёный треугольник для начала отладки.


Возможно, программа ещё спросит путь к папке с файлами проекта. Если это локальный компьютер, то проблем возникнуть не должно. Затем нужно выбрать точки остановки. Эти точки ставятся в самой левой части области редактора напротив строчки, в которой вы хотите остановится:


Последний шаг: надо открыть отлаживаемую страницу в браузере, но при этом для Chrome надо использовать расширение Xdebug Helper, которое включает необходимый флаг и сообщает Xdebug, что этот код надо отлаживать. Для этого надо выбрать режим Debug в расширении:


Затем Xdebug подключается к VS Code по выбранному нами порту и передаёт туда всю необходимую информацию. Только после этого вы сможете смотреть переменные и выполнять код пошагово:


9. Терминал

В завершении поговорим о чём-то более простом. Одно из преимуществ VS Code перед другими редакторами - это встроенный терминал, который позволяет выполнять команды в системной оболочке Linux или в выбранной оболочке Windows. Если терминал ещё не открыт, вы можете сделать это с помощью Ctrl+Shift+P или из меню Терминал -> Создать терминал:


10. Использование Git

Ещё одна очень полезная возможность в Visual Studio Code - это интеграция с Git. Она работает по умолчанию, и вам даже не надо ничего дополнительно устанавливать. Достаточно только, чтобы в директории с проектом уже был инициализирован Git-репозиторий. Все новые или изменённые файлы будут подсвечены в проводнике.

Кроме того, вы можете делать фиксацию изменений (коммиты) и отправлять изменения на сервер прямо в графическом интерфейсе. Сначала надо добавить файлы в коммит: кликните по значку разветвления на боковой панели. Здесь отображаются все изменённые файлы. Нажмите + напротив файлов, которые надо добавить:


Для того чтобы зафиксировать изменения, наберите пояснение к комиту в текстовой строке, затем нажмите Ctrl+Enter или галочку над текстовым полем:


Выводы

В этой статье мы рассмотрели, как работать в Visual Studio Code для программирования на PHP и других языках программирования, предназначенных для веб-разработки. Как видите, эта среда намного лучше подготовлена по умолчанию, чем тот же Atom и то, что приходится настраивать там, здесь уже есть "из коробки". А какой средой разработки пользуетесь вы? Напишите в комментариях!

Нет похожих записей


Статья распространяется под лицензией Creative Commons ShareAlike 4.0 при копировании материала ссылка на источник обязательна.

Новичку очень трудно найти нужный символ или слово в массе кода, однако это делается очень быстро и просто. Если не знаете как, то читайте дальше.

В следующей статье, мы приступим к редактированию шаблона, и нам придётся находить нужные элементы в коде темы.

Если кто-то ещё не видел, что из себя представляет код шаблона, то зайдите в Консоль — Внешний вид — Редактор.

Перед Вами откроется код файла style.css . Покрутите его вниз, и первое, что придёт Вам в голову будет: ё-моё, как же в этой массе английских слов, цифр и символов, найти то, что нам будет нужно.

Для полноты ощущения, можно открыть один из php файлов, которые расположены в колонке справа от поля редактора.

Рассмотрим два варианта, в зависимости от начальных условий, нахождения нужного элемента в коде.

Условие: мы точно знаем то, что нам нужно найти.

Для примера возьмём код страницы.

Комбинация клавиш Contrl-F откроет окно поиска в правом верхнем углу, в которое можно ввести искомый элемент кода. Элемент и все его повторения подсветятся.

Поиск в коде

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

Условие: мы видим элемент на странице, но не знаем ни его html, ни css.

В этом случае потребуется web-инспектор, или по другому Инструмент разработчика.

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

Главное не выбирайте "Просмотреть код страницы". Похоже, но не то.

После этого появится web-инспектор. Его интерфейс в разных браузерах немного отличается, но принцип действия везде одинаковый.

Я покажу на примере web-инспектора Chrome.

Заходим на страницу и открываем web-инспектор. По умолчанию он откроется в двух колонках, в левой будет html код всех элементов, находящихся на странице, а в правой — css оформление.


Изначально, код откроется в сложенном виде, то есть будут видны только основные элементы страницы, но если щёлкнуть по треугольничку в начале строки, то откроются все вложения, находящиеся в элементе.

И вот так, открывая вложение за вложением, можно добраться практически до любого элемента, находящегося на странице.

Определить, какой код, какому элементу соответствует, очень просто.

Надо просто вести по строкам курсором, и как только курсор оказывается на строке с кодом, так тут-же элемент, которому соответствует этот код, подсвечивается.


Теперь найдём css этого элемента. Для этого надо один раз щёлкнуть левой клавишей по строке с html, и в правой колонке отобразятся все стили, которые ему заданы, а так-же стили, влияющие на элемент, от родительских элементов.


Желаю творческих успехов.



Перемена

— Мам, ну почему ты думаешь, что если я была на дне рождения, то сразу пила?!
— Дочь а нечего что я папа?
Объявление в метро: «при обнаружении подозрительных предметов сделайте подозрительное лицо.

Программист постоянно работает с исходными кодами. Инструменты для написания кода можно разделить на две группы: среды разработки (IDE) и редакторы. Первые предоставляют большие возможности при разработке программ: отладку, управление пакетами, интеграцию с тестами и тд. Например: Visual Studio, Intellij IDEA, Eclipse. Редакторы – легковесные программы, в которых нет таких широких возможностей как в IDE. Тем не менее они выполняют главную функцию – помогают быстро писать код. А многие из них предоставляют богатые возможности по настройке под себя. Примеры редакторов кода: Sublime Text, Atom, Notepad++.

Visual Studio Code – промежуточный вариант между IDE и простым редактором. Он позиционируется как редактор кода, но содержит ряд возможностей, свойственных средам разработки. Сегодня мы разберемся, что из себя представляет VS Code, и рассмотрим некоторые функции, которые могут вам пригодиться. Поэтому пост заинтересует и тех, кто не знаком с этим редактором, и активных пользователей, которые найдут полезное для себя.

Visual Studio Code – редактор кода от Microsoft. Он бесплатный, и скачать его можно на официальном сайте. VS Code соответствует новой политике Microsoft, поэтому он опенсорсный и работает на нескольких платформах. Рассмотрим отличительные черты этого редактора:

  • Explorer. На изображении выше открыт этот блок. В нем определяется workspace – файлы, с которыми вы работаете. Имя рабочего пространства соответствует корневой директории. Над ним перечислены все открытые в редакторе файлы. Кружком помечены те, которые не сохранены.
  • Search. Поиск по workspace. Можно искать с учетом регистра, целых слов и по шаблону. В этом же блоке работает замена строк. Для перехода в режим поиска можно использовать комбинацию CTRL + SHIFT + F . При наведении курсора на любой блок VS Code подскажет какие комбинации клавиш им соответствуют.
  • Source Control. Встроенная поддержка git и других систем контроля версий.
  • Debug. Все для отладки: Variables, Call Stack, Watch, Breakpoints.
  • Extensions. Набор всевозможных плагинов, которые можно установить. Вот список самых популярных:

В VS Code можно настроить очень многое под свои нужды. Меняйте внешний вид редактора и автоматизируйте ваши действия.

Изменение темы

Изменение настроек

Рассмотрим некоторые настройки, которые могут вам пригодиться:

  • Настройки редактирования.
    • Размер шрифта. "editor.fontSize": 14
    • Размер таба. "editor.tabSize": 4
    • Шрифт. "editor.fontFamily": "Consolas, 'Courier New', monospace"
    • Перенос слов. "editor.wordWrap": "on"

    Если с первыми тремя настройками все понятно, то последнюю нужно пояснить. Когда она включена, слово, которое не помещается по длине в размер редактора, будет целиком перенесено на следующую строку. При этом горизонтальный скролл никогда не появится. Удобная настройка, которая по умолчанию отключена.

    • Автосохранение. "files.autoSave": "on"
    • Задержка при автосохранении. "files.autoSaveDelay": 5000

    По умолчанию файлы сохраняются только тогда, когда пользователь об этом попросит. Это поведению можно изменить, включив автосохранение файлов. Также можно настроить задержку после ввода перед автосохранением. Величина записывается в миллисекундах.

    • Размер шрифта. "terminal.integrated.fontSize": 14
    • Выбор терминала. "terminal.integrated.shell.windows": "C:\\WINDOWS\\System32\\WindowsPowerShell\\v1.0\\powershell.exe"
    • Тип курсора. "terminal.integrated.cursorStyle": "line"

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

    Создание задач

    Зачем нужны задачи покажу на конкретном примере. Для локального запуска сайта я использую команды:

    Для того, чтобы делать это, не выходя из редактора, можно использовать встроенный терминал. Однако, можно автоматизировать и этот процесс. Для этого существуют задачи. Откроем их конфигурацию через Command Palette: Tasks. Configure Tasks . В открывшемся файле tasks.json создадим кастомную задачу.

    Однако, это несильно автоматизирует наш процесс. Для запуска этой задачи нужно открывать Command Palette и искать ее среди других команд. Чтобы запускать задачу по кнопке, откроем файл keybindings.json (в Command Palette: Preferences. Open Keyboard Shortcuts File ) и добавим нужные комбинации клавиш.

    Также задачи часто используются для автоматизации сборки кода и прогона тестов.

    Создание сниппетов

    Рассмотрим стандартные команды и соответствующие им комбинации клавиши, которые полезны в самых разных ситуациях. Маппинг команд и сочетаний клавиш можно открыть через CTRL + K, CTRL + S и переопределить на свой вкус.

    • Zen Mode ( CTRL + K, Z ). В этом режиме окно с кодом занимает весь экран. Это располагает к максимальной сосредоточенности на этом файле и работе. Он отличается от полноэкранного режима ( F11 ), в котором все пространство занимает именно редактор. В режиме Zen вы не будете отвлекаться ни на что. Для переключения на другой файл используйте комбинацию CTRL + P . Она работает во всех режимах и позволяет искать именно по файлам в рабочем пространстве. Выход из режима Zen осуществляется двойным ESC .
    • Markdown Preview ( CTRL + K, V ). Полезная операция для тех, кто пользуется Markdown. Она отображает справа от текста результаты вашей верстки.
    • Дублирование строки вниз/вверх ( ALT + SHIFT + DOWN/UP ).
    • Перемещение строки вниз/вверх ( ALT + DOWN/UP ).
    • Комментирование строки ( CTRL + / ).

    Команды выше работают и для нескольких строк.

    • Вставка новой строки вверх/вниз ( CTRL + ENTER / CTRL + SHIFT + ENTER ).
    • Выделение строки ( CTRL + I ).
    • Выделение слова ( CTRL + D ).
    • Множественный курсор. ( ALT + CLICK ).

    Мне трудно представить свой рабочий процесс без VS Code. Если вы им не пользуетесь, то советую хотя бы попробовать. Сегодня мы посмотрели на малую часть того, как можно упростить работу с кодом с помощью этого редактора. В следующий раз мы рассмотрим некоторые полезные плагины, которые есть в маркете VS Code.

    Visual Studio Code — бесплатный и очень популярный редактор кода от Microsoft.

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

    Полезные материалы

    Первый запуск

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

    Интерфейс при первом запуске редактора

    Редактор поддерживает множество языков программирования и легко настраивается под пользователя. Можно установить различные сочетания клавиш и цветовые схемы.

    Посмотрим интерфейс редактора на примере одного из проектов.

    Интерфейс редактора VS Code

    Основную часть экрана занимает окно с текстовым содержимым файла. В левой части экрана находятся вкладки активного меню, в котором находятся главные функции редактора. Вкладка проводника открывается по умолчанию при запуске программы. В неё выводятся список открытых файлов и каталог открытой папки.

    Поиск

    Следующий пункт — поиск. В поле можно ввести искомое значение, и редактор покажет, в каких местах оно находится. При желании можно поменять значение через поле замены.

    Поиск файла в проекте

    VS Code из коробки поддерживает работу с системой контроля версий Git. Можно выполнить базовые операции и посмотреть, как изменились файлы с момента последнего коммита.

    Настройка Git в Visual Studio Code подробна описана в официальной документации.

    Отладчик

    Расширения

    Последний пункт активного меню позволяет устанавливать расширения. В VS Code есть расширения для большинства языков программирования. Верстальщики тоже не обделены — например, мы собрали подборку из 9 полезных плагинов VS Code.

    Главное меню

    File. В пункте File находятся команды, которые отвечают за работу с файлами рабочей папки. Через неё можно сохранять и открывать файлы, выбирать папки и выполнять другие действия.

    Edit. Через этот пункт можно работать с открытым файлом — отменять последние действия, производить поиск по файлу.

    Selection. В пункте Selection можно найти команды для выделения нужного участка кода.

    View. Открывать различные приложения, встроенные в редактор кода, можно через пункт View. Здесь дублируются пункты активного меню, а ещё здесь можно открыть терминал, настроить элементы интерфейса и другое.

    Go. Через пункт Go можно перемещаться между открытыми файлами и по документу. Также можно разделять рабочую область на части. Это удобно для работы на большом мониторе — можно держать в одном месте разметку и файлы стилей.

    Debug. Здесь собраны команды для отладки скриптов.

    Terminal. В редактор встроен терминал (он же командная строка). Он может выполнять как отдельные задачи, так и выводить командную строку в интерфейс редактора.

    Help. В этом пункте собраны справочные материалы по работе редактора, его основным функциями и общая информация о программе.

    VS Code используется разработчиками в компаниях разного размера, а также очень удобен при обучении на профессиональных курсах в HTML Academy. В нём есть все функции, с помощью которых можно написать, протестировать и успешно защитить выпускной проект.

    VS Code — инструмент фронтендера

    Пройдите обучение в HTML Academy, чтобы работать с редактором кода и другими инструментами как профессионал.

    Читайте также: