Visual studio форматирование кода

Обновлено: 04.07.2024

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

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

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

const name = "James";
const person = >
console.log(person);
const sayHelloLinting = (fName) => console.log(`Hello linting, $`)
>
sayHelloLinting('James');

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

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

Требования

1: Команда Format Document

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

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

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

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

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

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

const name = 'James';
const person = < first: name >;
console.log(person);
const sayHelloLinting = (fname) => console.log(`Hello linting, $`);
>
sayHelloLinting('James');

Это также работает для файлов 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, которые вы можете изменить.

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

Single Quote: позволяет выбрать одинарные или двойные кавычки.
Semi: указывает, следует ли включать точку с запятой в конце строк.
Tab Width: указывает количество пробелов, которое нужно вставлять.

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

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

Создайте новый файл .prettierrc.extension, указав вместо extension одно из следующих расширений:

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

"trailingComma": "es5",
"tabWidth": 4,
"semi": false,
"singleQuote": true
>

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

Заключение

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

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

Этот раздел относится к Visual Studio в Windows. Информацию о Visual Studio для Mac см. в статье Поведение редактора в Visual Studio для Mac.

Стили кода в EDITORCONFIG-файлах

Стили кода в диалоговом окне "Параметры"

При выборе для каждого из элементов в списке выводится окно предварительного просмотра:

Параметры, заданные в этом окне, применяются к вашей учетной записи персонализации Visual Studio и не связаны с конкретным проектом или базой кода. Кроме того, они не применяются во время сборки, в том числе в сборках с непрерывной интеграцией (CI). Если вы хотите связать предпочтения к стилю кода со своим проектом и применяете стили во время сборки, укажите такие предпочтения в EDITORCONFIG-файле, связанном с проектом.

Предпочтения и степень серьезности

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

Принудительное применение стиля кода в сборке

Применение стилей кода

Вы можете настроить команду Форматировать документ (Правка > Дополнительно > Форматировать документ) для применения параметров стиля кода (из EDITORCONFIG-файла или параметров стиля кода) вместе с регулярным форматированием (например, отступами). Если EDITORCONFIG-файл существует в проекте, его параметры имеют приоритет.

Вы можете выбрать, какие параметры команда Форматировать документ будет применять, на странице параметров форматирования.

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

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

Во-первых, настройте стили кода, которые необходимо применять (в одном из двух профилей), используя диалоговое окно Настройка очистки кода. Чтобы открыть это диалоговое окно, щелкните стрелку рядом со значком метлы (очистка кода) и выберите команду Настроить очистку кода.

После настройки очистки кода вы можете щелкнуть значок метлы или нажать клавиши Ctrl+K, Ctrl+E, чтобы запустить очистку кода. Вы также можете выполнить очистку кода для всего проекта или решения сразу. Щелкните правой кнопкой мыши имя проекта или решения в обозревателе решений, выберите команду Анализ и очистка кода, а затем — Запустить очистку кода.

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

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

в формате на выбор: Ctrl + K , Ctrl + F

для форматирования документа: Ctrl + K , Ctrl + D

посмотреть предварительно определенные сочетания клавиш. (Эти двое Edit.FormatSelection и Edit.FormatDocument .)

Для Visual Studio 2010/2013/2015/2017

Формат Документа ( Ctrl+K , Ctrl+D ) так типа Ctrl+K , А ПОТОМ Ctrl+D как это последовательность
Выбор Формата ( Ctrl+K , Ctrl+F )

панели инструментов Изменить -> Дополнительно (если вы не видите дополнительно выберите файл кода в обозревателе решений и попробуйте еще раз)

Если он не работает, ищите ошибки в своем коде, например, отсутствующие скобки, которые останавливают автоматический формат от работы

выполните следующие действия:

см. изображение ниже:

хотя вопрос немного старый, кто-то может найти его удобным.

вы можете определить новые привязки ключей, перейдя в Tools -> options -> Environment -> keyboard

Я установил расширение с именем "формат документа при сохранении", которое форматирует весь документ каждый раз, когда вы его сохраняете. Для установки его в VS15 или 17, на инструментах просто нажмите "расширения и обновления". ":

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

надеюсь, это поможет!.

Если вы отобразите панель инструментов редактирования исходного кода HTML, также есть кнопка "форматировать весь документ"

решение, приведенное в принятом ответе, не относится к Microsoft Visual Studio 2012.

в случае VS2012 ярлыки:

для выделенного блока кода: Ctrl + K , Ctrl + F
для форматирования всего документа: Ctrl + K , Ctrl + D

перейдите в сервис - > расширения и обновления и введите "производительность" в поиске:
Установить "Производительность Электроинструментов 2015"
перезапустить VS.
перейдите в Инструменты - > Параметры - > производительность электроинструменты - > команды питания и проверьте " формат документа при сохранении":

Я использовал эту комбинацию. Я автоматизировал этот процесс при сохранении документа. Вы можете попробовать мое расширение формат документа при сохранении

Под Инструменты - > Параметры - > Текстовый Редактор, затем к Форматирование -> Общие раздел любого языка, который вы хотите отформатировать, вы найдете общие. Установите все три флажка форматирования.

под Инструменты - > Параметры - > Текстовый Редактор, затем к вкладки раздел любого языка, который вы хотите отформатировать, вы найдете выделить. Выберите умный и это будет активируйте автоматическое форматирование при использовании одного из закрывающих элементов;)> в этом блоке.

нет необходимости в нажатиях клавиш.

исходный вопрос сказал: "Я не могу найти настройку."

простой ответ: Посмотрите в верхнем меню, а затем

Редактировать --> Дополнительно --> Формат Документа

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

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

затем вы просто выбираете текст и нажимаете кнопки увеличения отступа или уменьшения отступа. Я тестировал это только в Visual Studio 2013.

Правой Кнопкой Мыши:

работает в VS 2015, возможно, более ранней версии.

в формате VS 2017 документ CTRL E + D .

но. если вы хотите добавить кнопку формат документа на панель инструментов сделать это.
Щелкните правой кнопкой мыши на панели инструментов.
Выберите " Настроить.."
Выберите вкладку "команды".
Выберите переключатель "панель инструментов".
Выберите "текстовый редактор" из выпадающего рядом с переключателем (или какой-либо панели инструментов вы хотите, чтобы Боттон)

нажмите Добавить Команду.
Категории: Редактировать
Команды: Формат Документа
Нажмите OK

в более новых версиях ярлык для форматирования документа: Shift + Alt + F

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

просто в дальнейшем Starwfanatic и Юэн's выше ответы. Вы можете настроить IDE для добавления любой до любой toolbar-таким образом, вы можете добавить кнопку Format (как на панели инструментов редактирования исходного кода HTML) на любую другую панель инструментов (например, редактирование текста со всеми другими элементами управления редактированием, такими как увеличение/уменьшение отступа).

нажмите стрелку справа от панели инструментов > добавить или удалить кнопки > настроить. > Вкладку "команды" > "добавить" Команда. кнопка.

Формат Документа и Выбор Формата находятся под редактировать группы.

(протестировано в VS2010 и VS2013)

вырезать / вставить раздел Еще один быстрый способ (и легко запомнить).

Если вы можете себе это позволить (или если вы имеете право на 30-дневную бесплатную пробную версию) Для ReSharper JetBrains В можно переформатировать весь каталог проекта.

просто установите - > щелкните правой кнопкой мыши каталог - > выберите код очистки из контекстного меню.

Что эквивалентно Ctrl + K + F и Ctrl + K + D в Windows в Visual Studio для форматирования или «украшения» кода в редакторе кода Visual Studio?

Для всех тех, кто отчаянно пытается отформатировать XML (что в настоящее время кажется невозможным из коробки), вы можете добиться этого, установив расширение. Я нашел XML Tools, чтобы сделать работу просто отлично. Отказ от ответственности: я не являюсь автором и не связан с этим проектом . В то время как VSCode имеет гораздо меньше опций меню, чем VS (новая тенденция?), Он имеет обширную информацию и учебные пособия в меню HELP, которые, возможно, ответили на этот вопрос. Для всех тех, кто пытается работать с форматированием даже после того, как попробуете допустимые комбинации в коде Visual Studio, не забудьте выбрать соответствующий тип языка программирования, он находится внизу справа в окне кода Visual Studio рядом с этим смайликом. Как только вы это сделаете, я обнаружил, что он работает «из коробки», и вам не нужно никаких дополнительных плагинов для форматирования кода.

Форматирование кода доступно в Visual Studio Code с помощью следующих ярлыков:

В Windows Shift + Alt + F
На Mac Shift + Option + F
В Linux Ctrl + Shift + I

Кроме того, вы можете найти ярлык, а также другие ярлыки, с помощью «Палитры команд», предоставленной в редакторе с помощью Ctrl + Shift + P (или Command + Shift + P на Mac), а затем выполнить поиск формата документа .

Также обратите внимание, что код языка должен быть правильным. т.е. код формата не будет доступен, если выбран простой текст, но переход на JSON (например) удовлетворительно отформатирует выбранный текст. (как бы ни был счастлив текстовый редактор) @JoSmo: в Ubuntu я открыл «Файл»> «Настройки»> «Сочетания клавиш». Существует элемент для <"key": "ctrl + shift + i", "command": "editor.action.format", "when": "editorTextFocus">. Команда "Ctrl + Shift + I" работает для меня. Кроме того, по всей видимости, файл должен быть сначала сохранен на диск. У меня был кусок HTML + Javascript, где он не мог отформатировать JS, поэтому я вставил его во временное окно и установил язык, но это не помогло, пока он не был сохранен. Это не работает для меня в последней версии VS Code и win 10, это предполагает наличие определенного расширения?

Ярлык форматирования кода:

Visual Studio Code для Windows - Shift + Alt + F

Код Visual Studio на MacOS - Shift + Option + F

Код Visual Studio в Ubuntu - Ctrl + Shift + I

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

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

Visual Studio Code позволяет пользователю настраивать параметры по умолчанию.

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

Файл меню → Настройки → Настройки рабочего пространства

Примечание: теперь вы можете автоматически форматировать файлы TypeScript. Проверьте мое обновление.

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