visual studio code как выровнять код

20 сочетаний клавиш для ускорения работы в VS Code

visual studio code как выровнять код. 1 ZyIdgVCHw. visual studio code как выровнять код фото. visual studio code как выровнять код-1 ZyIdgVCHw. картинка visual studio code как выровнять код. картинка 1 ZyIdgVCHw. Перевод статьи «20 VS Code Shortcuts For Fast Coding — Cheatsheet».

Перевод статьи «20 VS Code Shortcuts For Fast Coding — Cheatsheet».

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

Объединить строку

visual studio code как выровнять код. 1*UyDM7R7QbTWMiUdWIERoqw. visual studio code как выровнять код фото. visual studio code как выровнять код-1*UyDM7R7QbTWMiUdWIERoqw. картинка visual studio code как выровнять код. картинка 1*UyDM7R7QbTWMiUdWIERoqw. Перевод статьи «20 VS Code Shortcuts For Fast Coding — Cheatsheet».

Форматирование кода

visual studio code как выровнять код. 1*e5rQrZB8WB5g9zzh MNllw. visual studio code как выровнять код фото. visual studio code как выровнять код-1*e5rQrZB8WB5g9zzh MNllw. картинка visual studio code как выровнять код. картинка 1*e5rQrZB8WB5g9zzh MNllw. Перевод статьи «20 VS Code Shortcuts For Fast Coding — Cheatsheet».

Это сочетание помогает выровнять код в соответствии с заранее прописанными настройками редактора.

Обрезка множественных пробелов

Данное сочетание клавиш помогает избавиться от лишних пробелов в начале или конце строки.

Совет: применяйте в самом конце, когда завершаете работу над кодом в текущем файле.

visual studio code как выровнять код. 1*h3XpGuLYp3yTzr F8rw4YA. visual studio code как выровнять код фото. visual studio code как выровнять код-1*h3XpGuLYp3yTzr F8rw4YA. картинка visual studio code как выровнять код. картинка 1*h3XpGuLYp3yTzr F8rw4YA. Перевод статьи «20 VS Code Shortcuts For Fast Coding — Cheatsheet».

Есть и альтернативный подход. Можно включить обрезку пробелов в самих настройках:

Также мы добавили новую команду для запуска вручную (Trim Trailing Whitespace в палитре команд).

Если вы используете более новую версию VS Code, после открытия пользовательских настроек вы увидите следующее окно (поставьте галочку, как показано):

visual studio code как выровнять код. 1 hwesLTI1NVXOmNVhkioMbA. visual studio code как выровнять код фото. visual studio code как выровнять код-1 hwesLTI1NVXOmNVhkioMbA. картинка visual studio code как выровнять код. картинка 1 hwesLTI1NVXOmNVhkioMbA. Перевод статьи «20 VS Code Shortcuts For Fast Coding — Cheatsheet».

Сворачивание блоков кода

Иногда, если размер файла велик или если вы просто хотите понять код в целом, без подробностей, вам пригодится функция сворачивания блоков кода.

visual studio code как выровнять код. 1*cy6XqWvKUFpnIi0YR yOFQ. visual studio code как выровнять код фото. visual studio code как выровнять код-1*cy6XqWvKUFpnIi0YR yOFQ. картинка visual studio code как выровнять код. картинка 1*cy6XqWvKUFpnIi0YR yOFQ. Перевод статьи «20 VS Code Shortcuts For Fast Coding — Cheatsheet».

Свернуть внутреннюю область возле курсора вам помогут следующие сочетания клавиш:

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

Скопировать строку сверху или снизу

visual studio code как выровнять код. . visual studio code как выровнять код фото. visual studio code как выровнять код-. картинка visual studio code как выровнять код. картинка . Перевод статьи «20 VS Code Shortcuts For Fast Coding — Cheatsheet».

Назначенные сочетания можно посмотреть и отредактировать, пройдя по пути File > Preferences > Keyboard Shortcuts.

Разбить окно редактора по вертикали

visual studio code как выровнять код. 1*hY5. visual studio code как выровнять код фото. visual studio code как выровнять код-1*hY5. картинка visual studio code как выровнять код. картинка 1*hY5. Перевод статьи «20 VS Code Shortcuts For Fast Coding — Cheatsheet».

Чтобы разбить окно редактора, можно воспользоваться командой split editor. Оригинальное сочетание клавиш для разделения окна — 123. Функция разделения полезна для параллельного редактирования файлов.

Назначенные сочетания также можно отредактировать, выбрав новые по своему вкусу (File > Preferences > Keyboard Shortcuts).

Окно редактора в виде сетки

visual studio code как выровнять код. . visual studio code как выровнять код фото. visual studio code как выровнять код-. картинка visual studio code как выровнять код. картинка . Перевод статьи «20 VS Code Shortcuts For Fast Coding — Cheatsheet».

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

Для поддержки гибких макетов можно создать пустые группы редактора. По умолчанию закрытие последнего редактора группы закрывает и саму группу, но это поведение можно изменить, добавив в настройках workbench.editor.closeEmptyGroups: false.

В меню View > Editor Layout можно посмотреть набор готовых вариантов разделения окна.

visual studio code как выровнять код. 1 F4s204XXQPUMa wlKECr8Q. visual studio code как выровнять код фото. visual studio code как выровнять код-1 F4s204XXQPUMa wlKECr8Q. картинка visual studio code как выровнять код. картинка 1 F4s204XXQPUMa wlKECr8Q. Перевод статьи «20 VS Code Shortcuts For Fast Coding — Cheatsheet».

Выделить слово

visual studio code как выровнять код. 1 0QSbS0gcAjLzqgj9YlgzIg. visual studio code как выровнять код фото. visual studio code как выровнять код-1 0QSbS0gcAjLzqgj9YlgzIg. картинка visual studio code как выровнять код. картинка 1 0QSbS0gcAjLzqgj9YlgzIg. Перевод статьи «20 VS Code Shortcuts For Fast Coding — Cheatsheet».

Если нажать command + d больше одного раза, к выделению добавится еще одно вхождение того же слова далее по тексту.

Открыть или закрыть боковую панель

visual studio code как выровнять код. 1*O1CGDGMIYdn Ag6X8fSzHQ. visual studio code как выровнять код фото. visual studio code как выровнять код-1*O1CGDGMIYdn Ag6X8fSzHQ. картинка visual studio code как выровнять код. картинка 1*O1CGDGMIYdn Ag6X8fSzHQ. Перевод статьи «20 VS Code Shortcuts For Fast Coding — Cheatsheet».

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

Переход к указанной строке

visual studio code как выровнять код. 1*Nz2DTqFoHsKi4oWHobjYGw. visual studio code как выровнять код фото. visual studio code как выровнять код-1*Nz2DTqFoHsKi4oWHobjYGw. картинка visual studio code как выровнять код. картинка 1*Nz2DTqFoHsKi4oWHobjYGw. Перевод статьи «20 VS Code Shortcuts For Fast Coding — Cheatsheet».

Примечание: чтобы перейти к нужной строке в файле, используйте сочетание клавиш ctrl + g, после которого введите номер строки. Или же сначала откройте меню файла при помощи command + p, затем введите двоеточие и номер нужной строки.

Переход к символу в файле

visual studio code как выровнять код. 1*kHR52ova0PdtT0PrEm9T2w. visual studio code как выровнять код фото. visual studio code как выровнять код-1*kHR52ova0PdtT0PrEm9T2w. картинка visual studio code как выровнять код. картинка 1*kHR52ova0PdtT0PrEm9T2w. Перевод статьи «20 VS Code Shortcuts For Fast Coding — Cheatsheet».

Символы можно группировать, добавив двоеточие:

visual studio code как выровнять код. 1 Sdoy2ztcrCgWE LeHMIScQ. visual studio code как выровнять код фото. visual studio code как выровнять код-1 Sdoy2ztcrCgWE LeHMIScQ. картинка visual studio code как выровнять код. картинка 1 Sdoy2ztcrCgWE LeHMIScQ. Перевод статьи «20 VS Code Shortcuts For Fast Coding — Cheatsheet».

Переход к символу в рабочем окружении

visual studio code как выровнять код. 1 An7ThNWhWKBiUhGT 8TY Q. visual studio code как выровнять код фото. visual studio code как выровнять код-1 An7ThNWhWKBiUhGT 8TY Q. картинка visual studio code как выровнять код. картинка 1 An7ThNWhWKBiUhGT 8TY Q. Перевод статьи «20 VS Code Shortcuts For Fast Coding — Cheatsheet».

Удаление предыдущего слова

visual studio code как выровнять код. 1*UfXB qu4BqiVEmo4KT6d3Q. visual studio code как выровнять код фото. visual studio code как выровнять код-1*UfXB qu4BqiVEmo4KT6d3Q. картинка visual studio code как выровнять код. картинка 1*UfXB qu4BqiVEmo4KT6d3Q. Перевод статьи «20 VS Code Shortcuts For Fast Coding — Cheatsheet».

Полезно в ситуациях, если набрали лишнее, а жать несколько раз backspace не любите.

Выделение целых слов

visual studio code как выровнять код. 1*jwqSqPZTr3IjHHlydvyYkQ. visual studio code как выровнять код фото. visual studio code как выровнять код-1*jwqSqPZTr3IjHHlydvyYkQ. картинка visual studio code как выровнять код. картинка 1*jwqSqPZTr3IjHHlydvyYkQ. Перевод статьи «20 VS Code Shortcuts For Fast Coding — Cheatsheet».

Очень полезно для более быстрого выделения и редактирования.

Дублирование строки

visual studio code как выровнять код. . visual studio code как выровнять код фото. visual studio code как выровнять код-. картинка visual studio code как выровнять код. картинка . Перевод статьи «20 VS Code Shortcuts For Fast Coding — Cheatsheet».

Дублирование строк это очень полезный и хорошо известный функционал.

Удаление строки

visual studio code как выровнять код. 1*J0ZRS3WhA7qQVKK JA8S g. visual studio code как выровнять код фото. visual studio code как выровнять код-1*J0ZRS3WhA7qQVKK JA8S g. картинка visual studio code как выровнять код. картинка 1*J0ZRS3WhA7qQVKK JA8S g. Перевод статьи «20 VS Code Shortcuts For Fast Coding — Cheatsheet».

Добавление курсора сверху / снизу

visual studio code как выровнять код. 1*ZzJAoJZEvRj1jkzQYzZ6bA. visual studio code как выровнять код фото. visual studio code как выровнять код-1*ZzJAoJZEvRj1jkzQYzZ6bA. картинка visual studio code как выровнять код. картинка 1*ZzJAoJZEvRj1jkzQYzZ6bA. Перевод статьи «20 VS Code Shortcuts For Fast Coding — Cheatsheet».

Функция дублирования курсоров в VS Code, пожалуй, сэкономит вам больше всего времени.

Переименование символа

visual studio code как выровнять код. . visual studio code как выровнять код фото. visual studio code как выровнять код-. картинка visual studio code как выровнять код. картинка . Перевод статьи «20 VS Code Shortcuts For Fast Coding — Cheatsheet».

Выделите нужный символ, а затем нажмите f2. Также можно использовать контекстное меню.

Выделение столбца

visual studio code как выровнять код. 1*wmV3HSsDd oil5eyp6Jhhg. visual studio code как выровнять код фото. visual studio code как выровнять код-1*wmV3HSsDd oil5eyp6Jhhg. картинка visual studio code как выровнять код. картинка 1*wmV3HSsDd oil5eyp6Jhhg. Перевод статьи «20 VS Code Shortcuts For Fast Coding — Cheatsheet».

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

Палитра команд

visual studio code как выровнять код. 1*m3d4062wn VRTJd B d07A. visual studio code как выровнять код фото. visual studio code как выровнять код-1*m3d4062wn VRTJd B d07A. картинка visual studio code как выровнять код. картинка 1*m3d4062wn VRTJd B d07A. Перевод статьи «20 VS Code Shortcuts For Fast Coding — Cheatsheet».

При помощи этих сочетаний клавиш можно получить доступ ко всем доступным в вашем контексте командам. Вот самые используемые из них:

1. Открыть файл

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

visual studio code как выровнять код. . visual studio code как выровнять код фото. visual studio code как выровнять код-. картинка visual studio code как выровнять код. картинка . Перевод статьи «20 VS Code Shortcuts For Fast Coding — Cheatsheet».

2. Посмотреть сочетание клавиш для команды

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

visual studio code как выровнять код. 1 hkc58WQ2gZRWsWJrpTgwEw. visual studio code как выровнять код фото. visual studio code как выровнять код-1 hkc58WQ2gZRWsWJrpTgwEw. картинка visual studio code как выровнять код. картинка 1 hkc58WQ2gZRWsWJrpTgwEw. Перевод статьи «20 VS Code Shortcuts For Fast Coding — Cheatsheet».

Полезных сочетаний клавиш в VS Code очень много. При желании можно ознакомиться с ними подробнее:

Источник

Как в visual studio 2012 выровнять текст кода?

Подскажите, пожалуйста, как выровнять текст кода в студии (горячие клавиши), как например в QtCreator(I+Ctrl).
в общем, например, у меня получился вот такой код:
while (true)<
while (true)<
while (true)<
>
>
>
как его выровнять?? чтобы он выглядел так:
while (true)<
_____while (true)<
__________while (true)<
__________>
_____>
>

Трюки в редакторе Visual Studio

1. Вертикальное выделение тексты

Наверное одна из моих самых любимых функций редактора Visual Studio – выделение текста колонками, а не строками. Нажмите Alt и левую клавишу маши и выделяйте текст колонкой.

2. Альтернативный поиск строк

Нажмите Ctrl + I и начинайте вводить некоторый текст. Будут выделяться совпадающие символы первого вхождения строки от положения курсора и ниже.

3. Множественное копирование

Иногда так хочется скопировать в буфер обмена несколько строк сразу, а потом, перейдя к другому файлу вставлять скопированные строки в произвольном порядке. Visual Studio умеет и это!

Для начала выделите некоторый фрагмент кода и скопируйте его в буфер (Ctrl + C), после этого выделите другой фрагмент и скопируйте его тоже. Ну и еще один, интереса ради.

Теперь установите курсор ввода куда-нибудь еще и зажмите клавиши Ctrl + Shift и нажимайте клавишу V (не отпуская Ctrl + Shift). Вы увидите, что вставляемые фрагменты циклично чередуются.

4. Копирование текста на Toolbox и с Toolbox

Великий и могучий Drag & Drop при редактировании кода также может быть не менее полезен, чем при добавлении контролов на форму. Вы можете выделить кусочек текста и перетащить его на панель Toolbox, чтобы потом, также перетаскивая, вставлять куда угодно. Еще один удобный аналог стандартного буфера обмена.

5. Быстрое комментирование/раскомментирование фрагментов кода

Выделите фрагмент кода, который хотите закоментировать и нажмите Ctrl + K, C (удерживая Ctrl нажать K, затем C). Для снятия комментариев нужно выделить закомментированный кусок и нажать Ctrl + K, U.

6. Отображение IntelliSense

Если вы хотите отобразить IntelliSense, то нужно нажеть Ctrl + J. Это может пригодится, если по каким-то причинам подсказка не отображается (вы на «полуслове» наступили «на горло песне», то есть нажали Esc).

7. Перемещение между открывающими/закрывающими скобками

Установите курсор ввода на скобку, для перехода на ее пару нажмите Ctrl + ]. Это же работает для многострочных комментариев (/* */), регионов (#region #endregion) и кавычек, обрамляющих строки.

8. Сворачивание/разворачивание блока (региона, функции, цикла и т. п.)

Если вам лениво ползать мышью до значка +/-, то нажатие Ctrl + M, M (удерживая Ctrl нажать M два раза) сделает то, что нужно. Ctrl + M, L позволяет свернуть/развернуть все блоки.

Источник

Форматирование кода с помощью Prettier в Visual Studio Code

Published on November 2, 2020

Введение

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

В этой статье мы настроим Prettier для автоматического форматирования кода в Visual Studio Code или VS Code.

Для демонстрации мы будем форматировать следующий код:

Если вы знакомы с форматированием кода, вы можете заметить некоторые упущения:

Предварительные требования

Для прохождения этого учебного модуля вам нужно будет загрузить и установить Visual Studio Code.

visual studio code как выровнять код. prettier1. visual studio code как выровнять код фото. visual studio code как выровнять код-prettier1. картинка visual studio code как выровнять код. картинка prettier1. Перевод статьи «20 VS Code Shortcuts For Fast Coding — Cheatsheet».

Шаг 1 — Использование команды форматирования документа

После установки расширения Prettier вы можете использовать его для форматирования вашего кода. Для начала выполним обзор, используя команду Format Document. Эта команда сделает ваш код более согласованным с отформатированными пробелами, переносами строк и кавычками.

Чтобы открыть палитру команд, вы можете использовать COMMAND + SHIFT + P в macOS или CTRL + SHIFT + P в Windows.

Выполните в палитре команд поиск по ключевому слову format и выберите Format Document.

visual studio code как выровнять код. prettier2. visual studio code как выровнять код фото. visual studio code как выровнять код-prettier2. картинка visual studio code как выровнять код. картинка prettier2. Перевод статьи «20 VS Code Shortcuts For Fast Coding — Cheatsheet».

Возможно, вам будет предложено выбрать формат для использования. Для этого нажмите кнопку Configure:

visual studio code как выровнять код. prettier3. visual studio code как выровнять код фото. visual studio code как выровнять код-prettier3. картинка visual studio code как выровнять код. картинка prettier3. Перевод статьи «20 VS Code Shortcuts For Fast Coding — Cheatsheet».

visual studio code как выровнять код. prettier4. visual studio code как выровнять код фото. visual studio code как выровнять код-prettier4. картинка visual studio code как выровнять код. картинка prettier4. Перевод статьи «20 VS Code Shortcuts For Fast Coding — Cheatsheet».

Теперь ваш код отформатирован с пробелами, переносами строк и единообразными кавычками:

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

Будет переформатирован как:

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

Шаг 2 — Форматирование кода при сохранении

До сих пор вам нужно было вручную запускать команды для форматирования кода. Чтобы автоматизировать этот процесс, вы можете выбрать в VS Code настройку, чтобы ваши файлы автоматически форматировались при сохранении. Это также гарантирует, что неформатированный код не попадет в систему контроля версий.

Чтобы изменить эту настройку, нажмите COMMAND + в macOS или CTRL + в Windows, чтобы открыть меню Settings (Настройки). Выполните в меню поиск Editor: Format On Save и убедитесь, что эта опция включена:

visual studio code как выровнять код. prettier5. visual studio code как выровнять код фото. visual studio code как выровнять код-prettier5. картинка visual studio code как выровнять код. картинка prettier5. Перевод статьи «20 VS Code Shortcuts For Fast Coding — Cheatsheet».

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

Шаг 3 — Изменение параметров конфигурации Prettier

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

Откройте меню Settings (Настройки). Выполните поиск Prettier. Вы увидите список всех параметров, которые вы можете изменить:

visual studio code как выровнять код. prettier6. visual studio code как выровнять код фото. visual studio code как выровнять код-prettier6. картинка visual studio code как выровнять код. картинка prettier6. Перевод статьи «20 VS Code Shortcuts For Fast Coding — Cheatsheet».

Вот несколько наиболее распространенных параметров:

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

Шаг 4 — Создание файла конфигурации Prettier

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

Вот пример простого файла конфигурации в формате JSON:

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

Заключение

Иметь согласованный код — очень хорошая практика. Это особенно полезно при работе над проектом с несколькими участниками. Согласование конфигурации делает код более удобочитаемым и понятным. Это позволяет уделить больше времени решению технических проблем, а не тратить время на исправление отступов.

Prettier обеспечивает согласованность форматирования кода и позволяет автоматизировать этот процесс.

Источник

Форматирование кода с помощью Prettier в Visual Studio Code

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

Данный мануал научит вас использовать инструмент Prettier, который автоматически форматирует код в Visual Studio Code (или VS Code)

Для демонстрации мы возьмем такой фрагмент кода:

Если вы знакомы с правилами форматирования кода, вы заметите несколько ошибок:

Требования

1: Команда Format Document

Установив расширение Prettier, вы можете использовать его для форматирования вашего кода. Для начала давайте рассмотрим команду Format Document. Эта команда сделает ваш код более последовательным по интервалам, переносам строк и кавычкам.

Чтобы открыть панель команд, нажмите Command+Shift+P в macOS или Ctrl+Shift+P в Windows.

В палитре команд найдите format, а затем выберите Format Document.

Затем панель может предложить вам выбрать формат, который нужно использовать. Для этого нажмите кнопку Configure.

Затем выберите Prettier – Code Formatter.

Примечание. Если панель не предложила вам выбрать формат по умолчанию, вы можете выбрать его вручную в Settings. Установите в Editor: Default Formatter значение ebsenp.prettier-vscode.

Теперь код будет отформатирован с учетом всех пробелов, переносов строк и правильных кавычек:

Это также работает для файлов CSS. Вы можете превратить код с неправильно расставленными скобками, точками с запятой и разбивкой на строки в хорошо отформатированный файл. Например, такой код:

Будет переформатирован так:

body <
color: red;
>
h1 <
color: purple;
font-size: 24px;
>

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

2: Форматирование кода при сохранении

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

Чтобы изменить этот параметр, нажмите Command+ в MacOS или Ctrl+ в Windows. Вы попадете в меню Settings. Открыв это меню, найдите параметр Editor: Format On Save и выберите его, поставив галочку.

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

3: Конфигурация Prettier

Prettier делает много полезного по умолчанию, но стандартное поведение можно изменить, отредактировав настройки.

Откройте меню Settings и найдите Prettier. На вашем экране появятся все параметры Prettier, которые вы можете изменить.

Вот несколько параметров, которые меняют чаще всего:

Главный недостаток встроенного меню конфигураций в VS Code – это то, что оно не обеспечивает согласованности настроек в вашей команде.

4: Создание конфигурационного файла Prettier

Даже если вы измените настройки Prettier в своем экземпляре VS Code, остальные разработчики в вашей команде могут использовать совершенно другую конфигурацию. Чтобы исправить эту ситуацию, можно установить для своего проекта последовательное форматирование с помощью конфигурационного файла.

Вот пример конфигурационного файла в формате JSON:

<
«trailingComma»: «es5»,
«tabWidth»: 4,
«semi»: false,
«singleQuote»: true
>

Более подробную информацию о конфигурационных файлах можно найти в документации Prettier. Создав один из таких файлов и протестировав его в своем проекте, вы можете убедиться, что все члены вашей команды применяют одинаковые правила форматирования.

Заключение

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

Prettier обеспечивает согласованность кода и может форматировать его автоматически.

Источник

Настройка редактора Visual Studio Code для разработки на PHP

visual studio code как выровнять код. image loader. visual studio code как выровнять код фото. visual studio code как выровнять код-image loader. картинка visual studio code как выровнять код. картинка image loader. Перевод статьи «20 VS Code Shortcuts For Fast Coding — Cheatsheet».

Пора перейти от слов к действиям и познакомиться с Visual Studio Code поближе. В этом посте представлена поэтапная настройка VS Code для разработки на PHP.

Скачайте и установите Visual Studio Code

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

visual studio code как выровнять код. image loader. visual studio code как выровнять код фото. visual studio code как выровнять код-image loader. картинка visual studio code как выровнять код. картинка image loader. Перевод статьи «20 VS Code Shortcuts For Fast Coding — Cheatsheet».

visual studio code как выровнять код. image loader. visual studio code как выровнять код фото. visual studio code как выровнять код-image loader. картинка visual studio code как выровнять код. картинка image loader. Перевод статьи «20 VS Code Shortcuts For Fast Coding — Cheatsheet».

Встроенные функции работы с PHP

VS Code поддерживает множество языков, в том числе PHP. На портале Visual Studio Marketplace доступны расширения VS Code, обеспечивающие поддержку дополнительных языков. Для PHP работает подсветка синтаксиса, определение парных скобок и фрагменты кода.

Когда вы начнете набирать код в файле PHP, то заметите автоматическое срабатывание цветового выделения синтаксиса, определения парных скобок и функции IntelliSense.

visual studio code как выровнять код. image loader. visual studio code как выровнять код фото. visual studio code как выровнять код-image loader. картинка visual studio code как выровнять код. картинка image loader. Перевод статьи «20 VS Code Shortcuts For Fast Coding — Cheatsheet».

Настройка статического анализа PHP

По умолчанию VS Code будет проводить статический анализ кода на PHP в ходе проверки при сохранении файла. Для этого используется исполняемый файл php. Если вы работаете с VS Code впервые, то получите сообщение об ошибке, в котором сказано, что исполняемый PHP файл не обнаружен.

visual studio code как выровнять код. image loader. visual studio code как выровнять код фото. visual studio code как выровнять код-image loader. картинка visual studio code как выровнять код. картинка image loader. Перевод статьи «20 VS Code Shortcuts For Fast Coding — Cheatsheet».

Необходимо указать путь к исполняемому файлу PHP на вашем компьютере. Для этого следует изменить файл настроек (в VS Code существуют различные уровни файлов настроек, подробнее см. в документации). В нашем примере мы настроим параметры PHP глобально для пользователя.

Откройте пользовательские настройки с помощью панели команд: нажмите F1, введите «user» и нажмите Enter.

visual studio code как выровнять код. image loader. visual studio code как выровнять код фото. visual studio code как выровнять код-image loader. картинка visual studio code как выровнять код. картинка image loader. Перевод статьи «20 VS Code Shortcuts For Fast Coding — Cheatsheet».

Откроется два документа JSON. В документе слева содержатся настройки по умолчанию, в документе справа — пользовательские настройки. В пользовательских настройках можно переопределить настройки по умолчанию. Чтобы включить статический анализ кода PHP, необходимо изменить значения трех параметров.

visual studio code как выровнять код. image loader. visual studio code как выровнять код фото. visual studio code как выровнять код-image loader. картинка visual studio code как выровнять код. картинка image loader. Перевод статьи «20 VS Code Shortcuts For Fast Coding — Cheatsheet».

Чтобы настроить путь к исполняемому файлу PHP, укажите его в файле пользовательских настроек:

visual studio code как выровнять код. image loader. visual studio code как выровнять код фото. visual studio code как выровнять код-image loader. картинка visual studio code как выровнять код. картинка image loader. Перевод статьи «20 VS Code Shortcuts For Fast Coding — Cheatsheet».

После этого функция проверки будет включена для всех файлов PHP. Некорректный код PHP будет подчеркнут красным (в примере ниже пропущена точка с запятой).

visual studio code как выровнять код. image loader. visual studio code как выровнять код фото. visual studio code как выровнять код-image loader. картинка visual studio code как выровнять код. картинка image loader. Перевод статьи «20 VS Code Shortcuts For Fast Coding — Cheatsheet».

Настройка отладки

Расширение PHP Debug (спасибо Феликсу Беккеру!) добавляет в VS Code поддержку отладчика XDebug. Установите расширение через панель команд VS Code: нажмите F1, введите «install ext», нажмите Enter, введите «PHP Debug» и вновь нажмите Enter. После установки расширения может потребоваться перезапуск VS Code.

visual studio code как выровнять код. image loader. visual studio code как выровнять код фото. visual studio code как выровнять код-image loader. картинка visual studio code как выровнять код. картинка image loader. Перевод статьи «20 VS Code Shortcuts For Fast Coding — Cheatsheet».

Обратите внимание: это расширение использует отладчик XDebug. Поэтому для его работы необходимо установить XDebug. Скачать XDebug можно здесь (для Windows выбирайте 32-разрядную non-thread-safe версию).
Затем внесите в файл php.ini следующие настройки. Я установил XDebug в подкаталог ext установочной папки PHP. Если вы выбрали для XDebug другой каталог установки, убедитесь, что параметр zend_extension содержит правильное значение.

visual studio code как выровнять код. image loader. visual studio code как выровнять код фото. visual studio code как выровнять код-image loader. картинка visual studio code как выровнять код. картинка image loader. Перевод статьи «20 VS Code Shortcuts For Fast Coding — Cheatsheet».

Убедитесь, что корневой раздел веб-сервера соответствует вашему проекту. Тогда при каждом запросе файла PHP XDebug будет предпринимать попытку подключения к порту 9000 для отладки.
Чтобы начать отладку, откройте вкладку Debugging в VS Code.

visual studio code как выровнять код. image loader. visual studio code как выровнять код фото. visual studio code как выровнять код-image loader. картинка visual studio code как выровнять код. картинка image loader. Перевод статьи «20 VS Code Shortcuts For Fast Coding — Cheatsheet».

Щелкните значок шестеренки, чтобы сформировать файл launch.json, который позволит VS Code начать сеанс отладки XDebug.

visual studio code как выровнять код. image loader. visual studio code как выровнять код фото. visual studio code как выровнять код-image loader. картинка visual studio code как выровнять код. картинка image loader. Перевод статьи «20 VS Code Shortcuts For Fast Coding — Cheatsheet».

Чтобы начать отладку, нажмите F5 или щелкните зеленую стрелку на вкладке Debugging. Чтобы задать точку останова в исходном коде, выберите строку и нажмите F9.

visual studio code как выровнять код. image loader. visual studio code как выровнять код фото. visual studio code как выровнять код-image loader. картинка visual studio code как выровнять код. картинка image loader. Перевод статьи «20 VS Code Shortcuts For Fast Coding — Cheatsheet».

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

visual studio code как выровнять код. image loader. visual studio code как выровнять код фото. visual studio code как выровнять код-image loader. картинка visual studio code как выровнять код. картинка image loader. Перевод статьи «20 VS Code Shortcuts For Fast Coding — Cheatsheet».

Заключение

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

На портале Visual Studio Marketplace доступны и другие расширения для работы с PHP.

Источник

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *