как выровнять весь код в visual studio
Форматирование кода с помощью Prettier в Visual Studio Code
Published on November 2, 2020
Введение
Согласованное форматирование кода — сложная задача, но современные инструменты разработчиков позволяют автоматически обеспечивать согласованность базы кода вашей команды.
В этой статье мы настроим Prettier для автоматического форматирования кода в Visual Studio Code или VS Code.
Для демонстрации мы будем форматировать следующий код:
Если вы знакомы с форматированием кода, вы можете заметить некоторые упущения:
Предварительные требования
Для прохождения этого учебного модуля вам нужно будет загрузить и установить Visual Studio Code.
Шаг 1 — Использование команды форматирования документа
После установки расширения Prettier вы можете использовать его для форматирования вашего кода. Для начала выполним обзор, используя команду Format Document. Эта команда сделает ваш код более согласованным с отформатированными пробелами, переносами строк и кавычками.
Чтобы открыть палитру команд, вы можете использовать COMMAND + SHIFT + P в macOS или CTRL + SHIFT + P в Windows.
Выполните в палитре команд поиск по ключевому слову format и выберите Format Document.
Возможно, вам будет предложено выбрать формат для использования. Для этого нажмите кнопку Configure:
Теперь ваш код отформатирован с пробелами, переносами строк и единообразными кавычками:
Это работает и для файлов CSS. Вы можете превращать код с несогласованными отступами, скобками, разрывами строк и точками с запятой в хорошо отформатированный код. Например:
Будет переформатирован как:
Мы изучили эту команду, и теперь посмотрим, как можно реализовать ее автоматическое выполнение.
Шаг 2 — Форматирование кода при сохранении
До сих пор вам нужно было вручную запускать команды для форматирования кода. Чтобы автоматизировать этот процесс, вы можете выбрать в VS Code настройку, чтобы ваши файлы автоматически форматировались при сохранении. Это также гарантирует, что неформатированный код не попадет в систему контроля версий.
Чтобы изменить эту настройку, нажмите COMMAND + в macOS или CTRL + в Windows, чтобы открыть меню Settings (Настройки). Выполните в меню поиск Editor: Format On Save и убедитесь, что эта опция включена:
Теперь вы можете писать код как обычно, и он будет автоматически форматироваться при сохранении файла.
Шаг 3 — Изменение параметров конфигурации Prettier
Prettier выполняет много действий по умолчанию, но вы также можете внести индивидуальные изменения в его настройки.
Откройте меню Settings (Настройки). Выполните поиск Prettier. Вы увидите список всех параметров, которые вы можете изменить:
Вот несколько наиболее распространенных параметров:
Недостаток использования меню встроенных параметров VS Code заключается в том, что при этом не обеспечивается согласованность между разработчиками в вашей команде.
Шаг 4 — Создание файла конфигурации Prettier
Если вы измените настройки VS Code, у другого разработчика может оказаться совершенно иная конфигурация. Вы можете обеспечить единство форматирования в своей команде, создав файл конфигурации для вашего проекта.
Вот пример простого файла конфигурации в формате JSON:
Более конкретную информацию о файлах конфигурации можно найти в документации по Prettier. После создания такого файла и его добавления в проект вы можете быть уверены, что все члены команды используют одинаковые правила форматирования.
Заключение
Иметь согласованный код — очень хорошая практика. Это особенно полезно при работе над проектом с несколькими участниками. Согласование конфигурации делает код более удобочитаемым и понятным. Это позволяет уделить больше времени решению технических проблем, а не тратить время на исправление отступов.
Prettier обеспечивает согласованность форматирования кода и позволяет автоматизировать этот процесс.
Как в 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 позволяет свернуть/развернуть все блоки.
20 сочетаний клавиш для ускорения работы в VS Code
Перевод статьи «20 VS Code Shortcuts For Fast Coding — Cheatsheet».
Не каждый будет изучать все приемы работы в VS Code: их попросту слишком много! В этой статье я перечислил свои любимые сочетания клавиш, позволяющие мне работать быстрее. Надеюсь, они пригодятся и другим людям.
Объединить строку
Форматирование кода
Это сочетание помогает выровнять код в соответствии с заранее прописанными настройками редактора.
Обрезка множественных пробелов
Данное сочетание клавиш помогает избавиться от лишних пробелов в начале или конце строки.
Совет: применяйте в самом конце, когда завершаете работу над кодом в текущем файле.
Есть и альтернативный подход. Можно включить обрезку пробелов в самих настройках:
Также мы добавили новую команду для запуска вручную (Trim Trailing Whitespace в палитре команд).
Если вы используете более новую версию VS Code, после открытия пользовательских настроек вы увидите следующее окно (поставьте галочку, как показано):
Сворачивание блоков кода
Иногда, если размер файла велик или если вы просто хотите понять код в целом, без подробностей, вам пригодится функция сворачивания блоков кода.
Свернуть внутреннюю область возле курсора вам помогут следующие сочетания клавиш:
Чтобы развернуть, применяйте те же сочетания, но с закрывающей квадратной скобкой:
Скопировать строку сверху или снизу
Назначенные сочетания можно посмотреть и отредактировать, пройдя по пути File > Preferences > Keyboard Shortcuts.
Разбить окно редактора по вертикали
Чтобы разбить окно редактора, можно воспользоваться командой split editor. Оригинальное сочетание клавиш для разделения окна — 123. Функция разделения полезна для параллельного редактирования файлов.
Назначенные сочетания также можно отредактировать, выбрав новые по своему вкусу (File > Preferences > Keyboard Shortcuts).
Окно редактора в виде сетки
По умолчанию группы редактора располагаются в вертикальных столбцах (например, когда вы разбиваете окно, чтобы открыть параллельно два файла). Но вы можете с легкостью расположить группы так, как вам больше нравится (хоть вертикально, хоть горизонтально).
Для поддержки гибких макетов можно создать пустые группы редактора. По умолчанию закрытие последнего редактора группы закрывает и саму группу, но это поведение можно изменить, добавив в настройках workbench.editor.closeEmptyGroups: false.
В меню View > Editor Layout можно посмотреть набор готовых вариантов разделения окна.
Выделить слово
Если нажать command + d больше одного раза, к выделению добавится еще одно вхождение того же слова далее по тексту.
Открыть или закрыть боковую панель
Иногда очень пригождается возможность закрыть боковую панель, например, если у файла слишком большая ширина или если хотите разбить окно и открыть одновременно два файла.
Переход к указанной строке
Примечание: чтобы перейти к нужной строке в файле, используйте сочетание клавиш ctrl + g, после которого введите номер строки. Или же сначала откройте меню файла при помощи command + p, затем введите двоеточие и номер нужной строки.
Переход к символу в файле
Символы можно группировать, добавив двоеточие:
Переход к символу в рабочем окружении
Удаление предыдущего слова
Полезно в ситуациях, если набрали лишнее, а жать несколько раз backspace не любите.
Выделение целых слов
Очень полезно для более быстрого выделения и редактирования.
Дублирование строки
Дублирование строк это очень полезный и хорошо известный функционал.
Удаление строки
Добавление курсора сверху / снизу
Функция дублирования курсоров в VS Code, пожалуй, сэкономит вам больше всего времени.
Переименование символа
Выделите нужный символ, а затем нажмите f2. Также можно использовать контекстное меню.
Выделение столбца
При помощи этих сочетаний клавиш и движения мыши можно выделять блоки текста. В конце каждой выделенной строки будет добавлен курсор.
Палитра команд
При помощи этих сочетаний клавиш можно получить доступ ко всем доступным в вашем контексте командам. Вот самые используемые из них:
1. Открыть файл
Чтобы перейти к определенному файлу, введите сочетание клавиш для открытия палитры команд, а затем начните вводить название искомого файла. Это позволит быстро найти нужный файл.
2. Посмотреть сочетание клавиш для команды
Все команды в палитре команд приводятся с назначенными им сочетаниями клавиш (если такие назначения есть). Поэтому, забыв нужное сочетание, можно подсмотреть его в палитре.
Полезных сочетаний клавиш в VS Code очень много. При желании можно ознакомиться с ними подробнее:
Рефакторинг для реализации переноса, отступа и выравнивания
Сворачивание и выравнивание цепочек вызовов
Область применения этого рефакторинга:
Что? Позволяет сворачивать и выравнивать цепочки вызовов методов.
Когда? Имеется длинная цепочка, состоящая из нескольких вызовов методов в одной инструкции.
Зачем? Читать длинный список будет проще, если используется сворачивание или отступ в соответствии с предпочтениями пользователя.
Практические советы
Поместите курсор в любую цепочку вызовов.
Нажмите клавиши CTRL+ . чтобы открыть меню Быстрые действия и рефакторинг.
Выберите Свернуть цепочку вызовов или Свернуть и выровнять цепочку вызовов, чтобы принять рефакторинг.
Аргументы или параметры переноса, отступа и выравнивания
Область применения этого рефакторинга:
Что? Обеспечивает параметры или аргументы переноса, отступа и выравнивания.
Когда? У вас есть объявление метода или вызов, который имеет несколько параметров или аргументов.
Зачем? Читать длинный список параметров или аргументов будет проще, если используется перенос или отступ в соответствии с предпочтениями пользователя.
Практические советы
Поместите курсор в список параметров.
Нажмите клавиши CTRL+ . чтобы открыть меню Быстрые действия и рефакторинг.
Выберите Переносить каждый параметр, чтобы принять рефакторинг.
Перенос двоичных выражений
Область применения этого рефакторинга:
Что? Позволяет выполнять перенос двоичных выражений.
Когда? У вас есть двоичное выражение.
Зачем? Читать двоичное выражение проще, когда оно переносится в соответствии с параметрами пользователя.
Практические советы
Поместите курсор в двоичное выражение.
Нажмите клавиши CTRL+ . чтобы открыть меню Быстрые действия и рефакторинг.
Выберите Перенос выражения, чтобы принять рефакторинг.
Конфигурирование стиля кода в Visual Studio 2017
Предлагаю вашему вниманию перевод полезной статьи о том, как настраивать и применять правила написания кода в вашей команде.
Visual Studio 2017 обеспечивает соблюдение стиля написания кода и поддержку EditorConfig. Новая версия включает в себя больше правил для code style и позволяет разработчикам настраивать стиль кода через EditorConfig.
Что такое EditorConfig?
EditorConfig — это формат файла с открытым исходным кодом, который помогает разработчикам настраивать и применять правила форматирования и соглашения о стиле написания кода для получения более читаемых кодовых баз (codebases). Файлы EditorConfig легко включаются в систему управления версиями и применяются на уровне репозитория и проекта. Соглашения EditorConfig переопределяют их эквиваленты в ваших личных настройках, так что соглашения из кодовой базы имеют приоритет над индивидуальным разработчиком.
Начало работы
Чтобы определить стиль кода и параметры форматирования для всего репозитория, просто добавьте файл .editorconfig в каталог верхнего уровня. Чтобы установить эти правила в качестве «корневых» параметров, добавьте следующее в .editorconfig (вы можете сделать это в своем редакторе / IDE по выбору):
# top-most EditorConfig file
root = true
Параметры EditorConfig применяются сверху вниз с переопределениями, то есть вы описываете общие правила наверху и переопределяете их дальше вниз в своем дереве каталогов по мере необходимости. В репозитории Roslyn файлы в каталоге Compilers не используют var, поэтому мы можем просто создать другой файл .editorconfig, который содержит различные настройки для предпочтений var, и эти правила будут применяться только к файлам в этом каталоге. Обратите внимание, что когда мы создаем этот EditorConfig файл в каталоге Compilers, то нам не нужно добавлять root = true (это позволит наследовать правила из родительского каталога или, в данном случае, из каталога Roslyn верхнего уровня).
Правила форматирования кода
Правила стиля кода
Давайте рассмотрим пример того, как могут быть определены соглашения о кодировании:
Если вам нужно переосмыслить различные уровни серьезности и то, что они делают:
Совет: серые точки, которые указывают на предложение, довольно серые. Чтобы разнообразить вашу жизнь, попробуйте изменить их на приятный розовый. Для этого перейдите в меню Tools > Options > Environment > Fonts and Colors > Suggestion ellipses (…) и задайте для параметра следующий настраиваемый цвет (R: 255, G: 136, B: 196):
Опыт работы в Visual Studio
Когда вы добавляете файл EditorConfig к существующему репозиторию или проекту, файлы не проверяются автоматически, чтобы соответствовать вашим соглашениям. Когда вы добавляете или редактируете EditorConfig файл, чтобы применить новые настройки, вы должны закрыть и открыть все открытые файлы, которые у вас есть. Чтобы весь документ придерживался правил форматирования кода, определенных в ваших настройках, вы можете использовать Format Document (Ctrl + K, D). Эта проверка не изменяет код, но вы можете использовать меню быстрых действий (Ctrl +.), чтобы применить исправление стиля кода ко всем вхождениям в документе/проекте/решении.
Совет: Чтобы проверить, что в вашем документе используются пробелы или табуляции, включите Edit > Advanced > View White Space.
Но как узнать, применяется ли файл EditorConfig к вашему документу? Вы можете взглянуть на нижнюю строку состояния Visual Studio и увидеть это сообщение:
Обратите внимание, что это означает, что EditorConfig файлы переопределяют любые настройки стиля кода, которые вы настроили в меню Tools > Options.
Чтобы получить поддержку языковых служб при редактировании EditorConfig файла в VS, загрузите расширение EditorConfig Language Service.
Вывод
Visual Studio 2017 — просто ступенька в конфигурации соглашения о написания кода. Чтобы узнать больше о поддержке EditorConfig в Visual Studio 2017, ознакомьтесь с документацией.