автоформатирование кода в visual studio code
Форматирование кода с помощью 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?
Я знаю, что Visual Studio может автоматически форматировать, чтобы сделать мои методы и циклы отступами правильно, но я не могу найти параметр.
20 ответов
Для Visual Studio 2010/2013/2015/2017
ваши ярлыки могут отображаться иначе, чем мои, поскольку я настроен для кодирования C#, но навигация по панели инструментов приведет вас к вашим.
Если он не работает, ищите ошибки в своем коде, например, отсутствующие скобки, которые останавливают автоматический формат от работы
выполните следующие действия:
см. изображение ниже:
хотя вопрос немного старый, кто-то может найти его удобным.
Я установил расширение с именем «формат документа при сохранении», которое форматирует весь документ каждый раз, когда вы его сохраняете. Для установки его в VS15 или 17, на инструментах просто нажмите «расширения и обновления». «:
и затем просто зайти в «онлайн» на левой панели и найдите «формат документа при сохранении» 
надеюсь, это поможет!.
Если вы отобразите панель инструментов редактирования исходного кода HTML, также есть кнопка «форматировать весь документ»
решение, приведенное в принятом ответе, не относится к Microsoft Visual Studio 2012.
в случае VS2012 ярлыки:
Я использовал эту комбинацию. Я автоматизировал этот процесс при сохранении документа. Вы можете попробовать мое расширение формат документа при сохранении
нет необходимости в нажатиях клавиш.
исходный вопрос сказал: «Я не могу найти настройку.»
простой ответ: Посмотрите в верхнем меню, а затем
вы также увидите назначенных клавиш для этой функции. Ничего особенного, чтобы запомнить. Это действительно помогает, если вы используете несколько сред разработки на разных операционных системах.
затем вы просто выбираете текст и нажимаете кнопки увеличения отступа или уменьшения отступа. Я тестировал это только в Visual Studio 2013.
Правой Кнопкой Мыши:
работает в VS 2015, возможно, более ранней версии.
но. если вы хотите добавить кнопку формат документа на панель инструментов сделать это.
Щелкните правой кнопкой мыши на панели инструментов.
Выберите » Настроить..»
Выберите вкладку «команды».
Выберите переключатель «панель инструментов».
Выберите «текстовый редактор» из выпадающего рядом с переключателем (или какой-либо панели инструментов вы хотите, чтобы Боттон)
нажмите Добавить Команду.
Категории: Редактировать
Команды: Формат Документа
Нажмите OK
в более новых версиях ярлык для форматирования документа: Shift + Alt + F
с Непрерывное Форматирование расширение (коммерческое, разработанное мной), код форматируется действительно автоматически по мере ввода.
просто в дальнейшем Starwfanatic и Юэн’s выше ответы. Вы можете настроить IDE для добавления любой до любой toolbar-таким образом, вы можете добавить кнопку Format (как на панели инструментов редактирования исходного кода HTML) на любую другую панель инструментов (например, редактирование текста со всеми другими элементами управления редактированием, такими как увеличение/уменьшение отступа).
нажмите стрелку справа от панели инструментов > добавить или удалить кнопки > настроить. > Вкладку «команды» > «добавить» Команда. кнопка.
Формат Документа и Выбор Формата находятся под редактировать группы.
(протестировано в VS2010 и VS2013)
вырезать / вставить раздел Еще один быстрый способ (и легко запомнить).
Если вы можете себе это позволить (или если вы имеете право на 30-дневную бесплатную пробную версию) Для ReSharper JetBrains В можно переформатировать весь каталог проекта.
в Visual Studio 2015 и 2017 для кода c#. 1) прокрутите файл до конца 2) снимите последний » фигурный кронштейн» > 3) Подождите, пока строка над ней не покажет ошибку 4) заменить » фигурный кронштейн» > Фини. 🙂
Как форматировать код в Visual Studio Code (VSCode)
что эквивалентно Ctrl + K + F и Ctrl + K + D в Windows в Visual Studio для форматирования или» украшения » кода в редакторе кода Visual Studio?
30 ответов:
форматирование кода доступно в VS Code с помощью следующих ярлыков:
кроме того, вы можете найти ярлык, а также другие ярлыки, через поиск функциональность, предоставляемая в редакторе с Ctrl + Shift + P (или команда + Shift + P на Mac), а затем поиск документ в формате.
Контекстное Форматирование Кода:
вы также можете настроить этот ярлык через настройки, если это необходимо.
Форматирование Кода В То Время Как Сохранение файла:
Visual Studio code позволяет пользователю настраивать параметры по умолчанию.
Если вы хотите автоматически форматировать содержимое при сохранении, добавьте этот фрагмент кода ниже в настройках рабочего пространства visual studio code.
Примечание: теперь вы можете автоматически форматировать файлы typescript проверить мое обновление
или Visual Studio как:
правильная комбинация клавиш shift + alt + f
также обратите внимание, что на сегодняшний день форматирование доступно для этих языков:
VS Code 1.6.1 поддерживает «Формат При Сохранении » который будет автоматически подбирать соответствующие установленные расширения форматирования и форматировать весь документ на каждом сохранении.
включить «формат при сохранении», установив
и есть доступные сочетания клавиш (VS Code 1.7 и выше):
форматировать весь документ: Shift + Alt + F
только выбор формата: Ctrl K + Ctrl F
для других языков может потребоваться установить определенный языковой пакет.
на ubuntu это Ctrl + Shift + Я
Форматирование кода с помощью 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?
Я знаю, что Visual Studio может автоматически форматировать мои методы и циклы с отступом правильно, но я не могу найти настройку.
20 ответов:
Для Visual Studio 2010/2013/2015/2017
ваши ярлыки могут отображаться по-разному, поскольку я настроен для кодирования C#, но навигация по панели инструментов приведет вас к вашим.
Если он не работает, искать ошибки в коде, как отсутствующие скобки, которые останавливают автоматический формат от работы
см. изображение ниже:
хотя вопрос немного старый, кто-то может найти его удобным.
Я установил расширение с именем «формат документа при сохранении», которое форматирует весь документ каждый раз, когда вы его сохраняете. Для установки его в VS15 или 17, на инструментах просто нажмите кнопку » расширения и обновления. «:
а затем просто перейдите в раздел «Online» на левой панели и найдите » формат документа при сохранении» 
Я надеюсь, что это помогает!.
Если вы показываете панель инструментов редактирования источника HTML, есть кнопка «форматировать весь документ», а также
в случае VS2012 ярлыки:
Я использовал эту комбинацию. Я автоматизировал этот процесс при сохранении документа. Вы можете попробовать мое расширение форматировать документ при сохранении
нет необходимости в нажатиях клавиш.
в исходном вопросе говорилось: «Я не могу найти настройку.»
простой ответ: Посмотрите на верхнем меню, то
вы также увидите назначенные в настоящее время клавиши для этой функции. Ничего особенного, чтобы запомнить. Это действительно помогает, если вы используете несколько сред разработки на разных операционных системах.
вы можете добавить кнопки на панель инструментов, нажав на маленькую стрелку выпадающего меню справа от последней кнопки панели инструментов, выберите «Добавить или удалить кнопки», а затем нажмите кнопки, которые вы хотите добавить галочку к ним. Выбранные кнопки появятся на панели инструментов.
затем вы просто выделяете текст и нажимаете кнопки увеличения отступа или уменьшения отступа. Я тестировал это только на Visual Studio 2013.
работает в VS 2015, возможно, более ранняя версия.
но. если вы хотите добавить кнопку формат документа на панель инструментов сделать это.
Щелкните правой кнопкой мыши на панели инструментов.
Выберите » Настроить..»
Выберите вкладку «команды».
Выберите переключатель «панель инструментов».
Выберите «текстовый редактор» из выпадающего меню рядом с переключателем (или какой-либо панели инструментов вы хотите, чтобы Боттон был включен)
нажмите Добавить Команду.
Категории: Редактировать
Команды: Формат Документа
Нажмите ОК
в более новых версиях ярлык для форматирования всего документа: Shift + Alt + F
с Непрерывное Форматирование расширение (коммерческое, разработанное мной), код форматируется действительно автоматически при вводе.
просто дальше Starwfanatic и Юэн’s выше ответы. Вы можете настроить IDE для добавления любой до любой панель инструментов-таким образом, вы можете добавить кнопку Формат (как на панели инструментов редактирования исходного кода HTML) на любую другую панель инструментов (например, редактирование текста со всеми другими элементами управления редактированием, такими как увеличение/уменьшение отступа).
щелкните стрелку справа от панели инструментов > добавить или удалить кнопки > настроить. > Вкладку «команды» > «добавить» Команда. кнопка.
Формат Документа и Выбор Формата находятся под Edit группы.
(проверено в VS2010 и VS2013)
вырезать / вставить раздел Еще один быстрый способ (и легко запомнить).