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

Обновлено: 05.07.2024

Краткое пошаговое руководство по установке и использованию Prettier в VS Code (Visual Studio Code). Prettier — это самоуверенный форматировщик кода, который обеспечивает единый формат кода. Его можно использовать в VS Code, установив его из VS Code Marketplace. После того, как вы интегрировали его в VS Code, вы можете настроить Prettier для форматирования ваших файлов при их сохранении или фиксации в системе контроля версий (например, Git). Таким образом, вам никогда не придется беспокоиться о форматировании исходного кода, потому что об этом позаботится Prettier. Он подходит для личных проектов, но также упрощает работу с командой разработчиков.

Начнем с установки расширения Prettier для VS Code. Установив его, вы можете использовать его с CTRL + CMD + P (MacOS) или CTRL + Shift + P (Windows), чтобы вручную отформатировать файл или фрагмент кода.

Если вы не хотите каждый раз вручную форматировать файл с заданным ярлыком, вы также можете форматировать его при сохранении. Поэтому вам нужно открыть настройки/настройки пользователя VS Code в формате JSON и ввести следующую конфигурацию:

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

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

Однако имейте в виду, что теперь это относится к каждому проекту. Если вам случится работать над проектом с командой, в которой проект не использует Prettier, вы будете форматировать каждый файл после его сохранения. Если это не согласовано с вашими товарищами по команде, это может вызвать проблемы. Поэтому я рекомендую установить Prettier Formatting Toggle, который позволяет глобально переключать Prettier в проекте.

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

Вот и все. Вы форматируете файлы JavaScript при сохранении, но можете отключить Prettier для отдельных проектов. Кроме того, вы используете свои личные настройки Prettier по умолчанию, однако при работе над проектом в команде вы также можете использовать файл .prettierrc. Вот и все, вы успешно интегрировали Prettier в Visual Studio Code.

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

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

Для всех тех, кто отчаянно пытается отформатировать XML (что в настоящее время кажется невозможным из коробки), вы можете добиться этого, установив расширение. Я нашел Инструменты XML, чтобы отлично выполнить эту работу. Отказ от ответственности: я не являюсь автором и не имею отношения к этому проекту.

Хотя в VSCode гораздо меньше опций меню, чем в VS (новая тенденция?), он содержит обширную информацию и учебные пособия в меню HELP, которые, возможно, ответили на этот вопрос.

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

29 ответов 29

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

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

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

Открыть палитру команд (Win: F1 или Ctrl + Shift + P )

Найдите «Изменить языковую модель»

Выберите язык, например. json . К настоящему времени синтаксис должен быть выделен.

Форматировать документ (например, Открыть палитру команд -> 'Форматировать документ')

Выберите текст
Палитра команд -> Соединить линии

Также обратите внимание, что язык кода должен быть правильным. т.е. Код формата будет недоступен, если выбран обычный текст, но переключение на 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 Code в MacOS — Shift + Option + F

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

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

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

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

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

Последовательное форматирование кода может быть сложной задачей, особенно при работе в команде. Прелесть современной веб-разработки в том, что инструменты стали намного лучше! Эта статья поможет вам настроить Prettier для автоматического форматирования кода в Visual Studio Code.

Пример кода

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

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

Установка расширения Prettier

Для работы с Prettier в Visual Studio Code необходимо установить расширение. Найдите Prettier — форматировщик кода. Вы можете увидеть расширение ниже. Если вы устанавливаете его в первый раз, вы увидите кнопку «Установить» вместо кнопки «Удалить», как у меня.

Команда форматирования документа

Установив расширение Prettier, мы теперь можем использовать его для форматирования нашего кода. Мы поработаем над этим позже, но для начала можно использовать команду «Формат документа».

Чтобы открыть палитру команд, вы можете использовать Command + Shift + P на Mac или Control + Shift + P на Windows. В палитре команд найдите формат и выберите «Формат документа».

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

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

Вуаля! Ваш код хорош и отформатирован. Обратите внимание на все модные улучшения!

интервал
перенос строк
согласованные кавычки

Это также может работать с файлами CSS. Отсюда:

Автоматическое форматирование при сохранении

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

Вам больше не придется форматировать код вручную!

Убедитесь, что код отформатирован без необходимости думать об этом.
Неотформатированный код не регистрируется

Чтобы изменить этот параметр, используйте Command + на Mac или Control + на Windows, чтобы открыть меню настроек. Затем найдите Редактор: форматировать при сохранении и убедитесь, что он отмечен флажком.

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

Удобная конфигурация в настройках VS Code

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

Одинарные кавычки: выбор между одинарными и двойными кавычками
Semi — укажите, следует ли включать точку с запятой в конце строк.
Ширина вкладки — количество пробелов, из которых должна состоять вкладка.

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

Например, что, если я изменю ширину вкладки на 10.

Тогда сохраните мой файл.

Вероятно, это не та ширина вкладки, которую вы хотите сохранить, но все зависит от вас!

Создание более красивого файла конфигурации

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

Создайте единообразное форматирование в своей команде, создав файл конфигурации!

Чтобы решить эту проблему, вы можете создать файл конфигурации Prettier. Он должен называться .prettierrc.(ext) с одним из следующих расширений.

yml, yaml или json
JS
томл
включить в файл package.json (альтернативный вариант)

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

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

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

Заключение

Prettier – это полезный инструмент для ручного форматирования кода. Это требует времени, которое лучше потратить на написание большего количества кода. Воспользуйтесь потрясающими современными инструментами и настройте Prettier.

Хотите узнать больше? Присоединяйтесь к сообществу DigitalOcean!

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

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

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

В демонстрационных целях приведен пример кода, который вы будете форматировать:

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

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

Предпосылки

Чтобы следовать этому руководству, вам потребуется загрузить и установить Visual Studio Code.

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

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

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

В палитре команд найдите формат и выберите Формат документа.

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

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

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

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

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

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

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

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

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

Чтобы изменить этот параметр, нажмите COMMAND + в macOS или CTRL + в Windows, чтобы открыть меню настроек. Когда меню открыто, найдите Редактор: форматировать при сохранении и убедитесь, что этот параметр отмечен галочкой:

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

Шаг 3. Изменение настроек Prettier Configuration

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

Откройте меню настроек. Затем найдите Prettier. Откроются все настройки, которые вы можете изменить:

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

Одинарные кавычки. Выберите между одинарными и двойными кавычками.
Semi – укажите, следует ли включать точку с запятой в конце строк.
Ширина табуляции. Укажите, сколько пробелов вы хотите вставить на табуляции.

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

Шаг 4. Создание более красивого файла конфигурации

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

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

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

Заключение

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

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

Хотите узнать больше? Присоединяйтесь к сообществу DigitalOcean!

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