структуризация
Область применения:Visual Studio Visual Studio для Mac 
Visual Studio Code
Чтобы скрыть область кода из представления, ее можно свернуть, чтобы она отображалась под знаком плюса (+) в текстовом редакторе. Затем, чтобы развернуть свернутую область, выберите знак плюса.
Если вы предпочитаете использовать клавиатуру, то можете нажать клавиши CTRL+M+M для свертывания и развертывания.
Чтобы свернуть область выделения, дважды щелкните любую строку в регионе в поле выделения, которое отображается только слева от кода. Содержимое свернутой области отображается в виде всплывающей подсказки при наведении указателя мыши на эту область.
Области в поле структуры также выделяются при наведении указателя мыши на поле. В некоторых конфигурациях цветов цвет выделения по умолчанию может показаться едва заметным. Его можно изменить, последовательно выбрав Сервис>Параметры>Среда>Шрифты и цвета>Свертываемая область.
При работе с указанным кодом можно развернуть разделы, над которыми вы хотите работать, свернуть их после завершения, а затем перейти к другим разделам. Если вы не хотите отображать структуру, можно использовать команду Stop Outlining , чтобы удалить сведения о структуре, не беспокоясь о базовом коде.
Эти действия выполняются с помощью команд Отменить и Вернуть в меню Правка. Операции Копировать, Вырезать, Вставить и операции перетаскивания сохраняют сведения о структуре, но не состояние свертываемой области. Например, при копировании региона, свернутого, операция вставки вставляет скопированный текст в развернутую область.
При изменении области структуры структурирование может быть утеряно. Например, операции удаления или поиска и замены могут удалить конец области.
Приведенные ниже команды находятся в подменю Правка>Структурирование.
| Имя | Описание |
|---|---|
| Скрыть выделенное | (CTRL M, CTRL++H) — свернуть выбранный блок кода, который обычно не будет доступен для выделения, например if блока. Чтобы удалить пользовательскую область, используйте команду Прервать скрытие текущей области (или сочетание клавиш CTRL+M, CTRL+U). Недоступно в Visual Basic. |
| Свернуть/развернуть сегмент | (CTRL+M, CTRL+L) — отменяет текущее скрытое или развернутое состояние самого внутреннего раздела структуры, если курсор находится во вложенном свернутом разделе. |
| Свернуть/развернуть все сегменты | (CTRL+M, CTRL+L) — задает для всех областей то же свернутое или развернутое состояние. Если одни области развернуты, а другие свернуты, свернутые области будут развернуты. |
| Прекратить показ структуры | (CTRL+M, CTRL+P) — удаляет все сведения о структуре для всего документа. (Чтобы включить его обратно, перейдите к Измените>структуру и нажмите кнопку «Начать автоматическую структуру«.) |
| Прервать скрытие текущей области | (CTRL+M, CTRL+U) — удаляет сведения о структуре для текущей выбранной определяемой пользователем области. Недоступно в Visual Basic. |
| Свернуть в определения | (CTRL+M, CTRL+O) — сворачивает члены всех типов. |
| Свернуть блок: | (C++) Сворачивает область в функции, в которой находится точка вставки. Например, если точка вставки находится внутри цикла, цикл скрывается. |
| Свернуть все в: | (C++) Сворачивает все структуры внутри функции. |
Дополнительные сведения об использовании клавиатуры исключительно см. в разделе «Сочетания клавиш» в Visual Studio.
Для определения областей текста, которые требуется развернуть или свернуть, можно также использовать пакет SDK для Visual Studio. См. статью Пошаговое руководство. Структурирование.
См. также
- Возможности редактора кода
- Редактор исходного кода (Visual Studio для Mac)
Как структурировать код в Visual Studio Code?
Автоматическое форматирование кода в Visual Studio Code выполняется следующими комбинациями:
- Windows: Shift + Alt + F
- Mac: Shift ⇧ + Option ⌥ + F
- Ubuntu: Ctrl + Shift + I
Отслеживать
7,722 13 13 золотых знаков 25 25 серебряных знаков 54 54 бронзовых знака
ответ дан 5 фев 2019 в 14:27
25.9k 7 7 золотых знаков 31 31 серебряный знак 48 48 бронзовых знаков
Огромное спасибо , наконец то не надо будет в онлайн форматере работать
6 фев 2019 в 6:58
В дополнении к ответу от @Эникейщик
В настройках можно установить форматирование при сохранении
Что искать в настройках
- Или Editor: Format On Save в графическом интерфейсе
- Или editor.formatOnSave в settings.json
Предупреждение:
Влючайте данную опцию, если вы точно уверены в своих настройках и используемых форматтерах. При сохранении файлы будут изменены. И это может давать побочные эффекты также для git-веток.
Как сделать отступ / форматировать выделенный код в visual studio code?
Привет, Как сделать отступ в строках, форматировать теги? Курс HTML/CSS ADVANCED. В уроке 37 говорятся про корректность кода / форматирование, но как это сделать, не сказали.
Заранее благодарю.
С уважением,
student_rcod7d6t
2 ответов
Нужно выделить в Visual Studio Code участок кода который нужно отформатировать, потом нажать правой кнопкой мыши по выделенному участку и в этом меню выбрать Format Selection. Или можно весь документ отформатировать, для этого тоже самое сделать и выбрать Format Document.
Нужно нажимать на tab при каждом новом уровне вложенности, например:
EXAMPLE Sign up or Log in to write an answer
- Интерактивные уроки и курсы программирования и создания сайтов (дистанционное обучение) помогут вам в игровой форме изучить основы языков программирования веб-разработки и веб-программирования с нуля. Обучение онлайн 24/7.
Общие ссылки
- Отзывы
- Политика конфидециальности
- Условия использования
- Блог
- Цена и оплата
- Курсы и скринкасты
- Сертификаты
- Партнерская программа
- Комьюнити
Наши курсы и скринкасты
- HTML/CSS Advanced
- Bootstrap 4
- Vue JS
- Linux, GIT and web-hosting
- HTML and CSS
- Modern Javascript
- Javascript/jQuery
- Codeigniter
- Все курсы и скринкасты
Форматирование кода с помощью Prettier в Visual Studio Code
Согласованное форматирование кода — сложная задача, но современные инструменты разработчиков позволяют автоматически обеспечивать согласованность базы кода вашей команды.
В этой статье мы настроим Prettier для автоматического форматирования кода в Visual Studio Code или VS Code.
Для демонстрации мы будем форматировать следующий код:
const name = "James"; const person =first: name > console.log(person); const sayHelloLinting = (fName) => console.log(`Hello linting, $fName>`) > sayHelloLinting('James'); Если вы знакомы с форматированием кода, вы можете заметить некоторые упущения:
- Смесь одинарных и двойных кавычек.
- Первое свойство объекта person должно находиться в отдельной строке.
- Выражение консоли внутри функции должно быть выделено отступами.
- Вам могут понравиться или не понравиться необязательные скобки, в которые заключен параметр функции arrow.
Предварительные требования
Для прохождения этого учебного модуля вам нужно будет загрузить и установить Visual Studio Code.
Чтобы работать с Prettier в Visual Studio Code, вам потребуется установить расширение. Для этого выполните поиск инструмента Prettier — Code Formatter в панели расширений VS Code. Если вы устанавливаете его в первый раз, вы увидите кнопку install вместо кнопки uninstall, как показано здесь:
Шаг 1 — Использование команды форматирования документа
После установки расширения Prettier вы можете использовать его для форматирования вашего кода. Для начала выполним обзор, используя команду Format Document. Эта команда сделает ваш код более согласованным с отформатированными пробелами, переносами строк и кавычками.
Чтобы открыть палитру команд, вы можете использовать COMMAND + SHIFT + P в macOS или CTRL + SHIFT + P в Windows.
Выполните в палитре команд поиск по ключевому слову format и выберите Format Document.
Возможно, вам будет предложено выбрать формат для использования. Для этого нажмите кнопку Configure:
Затем выберите Prettier — Code Formatter.
Примечание. Если вы не видите диалога выбора формата по умолчанию, вы можете вручную изменить его в разделе «Настройки». Установите для Editor: Default Formatter значение esbenp.prettier-vscode .
Теперь ваш код отформатирован с пробелами, переносами строк и единообразными кавычками:
const name = 'James'; const person = first: name >; console.log(person); const sayHelloLinting = (fname) => console.log(`Hello linting, $fName>`); > sayHelloLinting('James'); Это работает и для файлов CSS. Вы можете превращать код с несогласованными отступами, скобками, разрывами строк и точками с запятой в хорошо отформатированный код. Например:
body color: red; > h1 color: purple; font-size: 24px > Будет переформатирован как:
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. Вы увидите список всех параметров, которые вы можете изменить:
Вот несколько наиболее распространенных параметров:
- Single Quote — выберите, нужно ли использовать одинарные или двойные кавычки.
- Semi — выберите, нужно ли добавлять точку с запятой в конце строк.
- Tab Width — укажите, сколько пробелов должно вставляться при табуляции.
Недостаток использования меню встроенных параметров VS Code заключается в том, что при этом не обеспечивается согласованность между разработчиками в вашей команде.
Шаг 4 — Создание файла конфигурации Prettier
Если вы измените настройки VS Code, у другого разработчика может оказаться совершенно иная конфигурация. Вы можете обеспечить единство форматирования в своей команде, создав файл конфигурации для вашего проекта.
Создайте новый файл .prettierrc. extension с одним из следующих расширений:
Вот пример простого файла конфигурации в формате JSON:
"trailingComma": "es5", "tabWidth": 4, "semi": false, "singleQuote": true > Более конкретную информацию о файлах конфигурации можно найти в документации по Prettier. После создания такого файла и его добавления в проект вы можете быть уверены, что все члены команды используют одинаковые правила форматирования.
Заключение
Иметь согласованный код — очень хорошая практика. Это особенно полезно при работе над проектом с несколькими участниками. Согласование конфигурации делает код более удобочитаемым и понятным. Это позволяет уделить больше времени решению технических проблем, а не тратить время на исправление отступов.
Prettier обеспечивает согласованность форматирования кода и позволяет автоматизировать этот процесс.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.