Как вы форматируете код в Visual Studio Code (VSCode)


990

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


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

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

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

Ответы:


3851

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

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

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


29
Также обратите внимание, что код языка должен быть правильным. т.е. код формата не будет доступен, если выбран простой текст, но переход на JSON (например) удовлетворительно отформатирует выбранный текст. (как бы ни был счастлив текстовый редактор)
Стивен Прайс

4
@JoSmo: в Ubuntu я открыл «Файл»> «Настройки»> «Сочетания клавиш». Существует элемент для {"key": "ctrl + shift + i", "command": "editor.action.format", "when": "editorTextFocus"}. Команда "Ctrl + Shift + I" работает для меня.
Ашиш

18
Кроме того, по всей видимости, файл должен быть сначала сохранен на диск. У меня был кусок HTML + Javascript, где он не мог отформатировать JS, поэтому я вставил его во временное окно и установил язык, но это не помогло, пока он не был сохранен.
Джонас

9
Для людей, которые говорят, что это не работает на Mac, это похоже на конфликт между сочетанием клавиш и системой ввода текста OS X для акцентированных символов, который зависит от настроенной локали и настроек клавиатуры: github.com/Microsoft/vscode/issues / 8914 # issuecomment-245947844
Крис Адамс,

8
Это не работает для меня в последней версии VS Code и win 10, это предполагает наличие определенного расширения?
JayPex

479

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

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

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

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

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

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

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

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

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

{
    // Controls if the editor should automatically format the line after typing
    "beautify.onSave": true,

    "editor.formatOnSave": true,

    // You can auto format any files based on the file extensions type.
    "beautify.JSfiles": [
        "js",
        "json",
        "jsbeautifyrc",
        "jshintrc",
        "ts"
    ]
}

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


Также работает для другого языка с этим: Расширение
Beautify

3
не уверен, почему в CentOS все по-другому, но этоShift + Alt + I
a11smiles

2
beautify.onSave недействителен с установленным расширением eslint
Бен Петерсен

На Ubuntu Mate 17.04 это Shift + Alt + Iтоже
Pini Cheyni

2
@ClintEeastwood попробуйте использовать prettier.singleQuote: trueв настройках кода vs.
Энн

216

Вы можете добавить связывание клавиш в меню ФайлНастройкиСочетания клавиш.

{ "key": "cmd+k cmd+d", "command": "editor.action.formatDocument" }

Или Visual Studio, как:

{ "key": "ctrl+k ctrl+d", "command": "editor.action.formatDocument" }

23
В операционной системе Windows, замените cmdс ctrl- не просто слепо копировать и вставлять , как я сделал!
Йенс Эрих

3
"editor.action.format" снова работает. Теперь он форматирует весь документ, если ничего не выделено, иначе форматирует выделение.
Красная Шапочка

199
  1. Щелкните правой кнопкой мыши файл
  2. Выберите « Формат документа» в меню:
    • Окна: Alt Shift F
    • Linux: Alt Shift I
    • MacOS: F

Введите описание изображения здесь


18
Для Linux сочетания клавиш Ctlr + Shift + I
Лукас

Что такое окно меню?
Питер Мортенсен

@PeterMortensen поле, в котором вы видите меню. На скриншоте это белое поле с
надписью

117

Правильная комбинация клавиш Shift+ Alt+ F.


2
Когда вы просто копируете и вставляете код из буфера обмена на новую вкладку , тогда ничего не происходит. Решение. Сохраните код в файле с соответствующим расширением (например, * .json). Тогда это работает. Я предполагаю, что причина в том, что beautifyer знает язык из расширения и не выполняет автоопределение на основе кода.
Красота

Этот ярлык работает для MAC. В Windows это форматирует код.
К. Дамок

63

Для Fedora

  1. Нажмите File-> Preferences-> Keyboard shortcuts.
  2. Под Default Keyboard Shortcuts, найдите ( Ctrl+ F) для editor.action.format.

Мое чтение "key": "ctrl+shift+i"

Вы также можете изменить это. Обратитесь к этому ответу о том, как ... или, если вам немного лень прокручивать вверх:


Вы можете добавить связывание клавиш в «Настройки-> Сочетания клавиш»

{ "key": "cmd+k cmd+d", "command": "editor.action.format" }

Или Visual Studio, как:

{ "key": "ctrl+k ctrl+d", "command": "editor.action.format" }


Обратите внимание: cmdключ только для Mac. Для Windows и Fedora (клавиатура Windows) используйтеCtrl


РЕДАКТИРОВАТЬ :

В соответствии с версией Visual Code 1.28.2это то, что я нашел.

editor.action.formatбольше не существует. Теперь он был заменен на editor.action.formatDocumentи editor.action.formatSelection.

Введите editor.action.formatв поле поиска, чтобы просмотреть существующие ярлыки.

Чтобы изменить комбинации клавиш, выполните следующие действия:

  1. Нажмите editor.action.formatDocumentилиeditor.action.formatSelection
  2. Слева появляется значок, похожий на перо - щелкните по нему.
  3. Появится всплывающее окно. Нажмите нужную комбинацию клавиш и нажмите ввод.

С помощью этой команды в моих файлах TypeScript одинарные кавычки становятся двойными. Как это решить?
Диобрандо

Не могу найти это в новых настройках пользовательского интерфейса мусора.
Оливер Диксон

63

В Linux это Ctrl+ Shift+ I.

На Windows это Alt+ Shift+ F. Протестировано с HTML / CSS / JavaScript и Visual Studio Code 1.18.0.

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


61

Visual Studio Code 1.6.1 поддерживает функцию « Форматировать при сохранении », которая автоматически выбирает соответствующие установленные расширения форматирования и форматирует весь документ при каждом сохранении.

Включите «Формат при сохранении», установив

"editor.formatOnSave": true

И есть доступные сочетания клавиш (код Visual Studio 1.7 и выше):

Форматировать весь документ : Shift+ Alt+F

Выбор формата только : Ctrl+ K, Ctrl+F


Я предлагаю расширение EsLint для VS Code marketplace.visualstudio.com/…
Дариуш

44

На Ubuntu это Ctrl+ Shift+ I.


7
Я думаю, это зависит от языка. CTRL + SHIFT + Iработает для JavaScript, но не для PHP, например.
Джейми Карл

32

Просто щелкните правой кнопкой мыши по тексту и выберите «Формат кода».

Visual Studio Code использует js-beautifyвнутренне, но ему не хватает возможности изменить стиль, который вы хотите использовать. Расширение «украсить» позволяет добавлять настройки.


1
Конечно, я использую Windows, и она работает как описано - это может зависеть от версии VScode (пожалуйста, обновите!) И от расширения файла. Пожалуйста, проверьте с HTML.
Герфрид


32

Файл меню → НастройкиНастройки

"editor.formatOnType": true

Когда вы вводите точку с запятой, она будет отформатирована.

В качестве альтернативы вы также можете использовать "editor.formatOnSave": true.


как ни странно, я обнаружил, что поведение этого параметра может отличаться от shift+alt+fопределенных ситуаций. хотя не знаю почему!
JzInqXc9Dg

Когда у меня есть эта возможность, и я создаю функцию в C #, я могу завершить все это и двигаться дальше, но функция не отформатирована, пока я не использую функцию «Формат документа». Я не знаю, почему вышеописанная настройка не форматируется после ввода функции.
Даниэль Джексон


24

По какой - то причине Alt+ Shift+ Fне работает для меня на Mac Visual Studio 1.3.1 Кодекса, а на самом деле команда «Формат документа» не работал вообще. Но команда Formatter сработала очень хорошо.

Таким образом, вы можете использовать Command+ Shift+ Pи набрать Formatter или создать свой собственный ярлык в меню ФайлНастройкиСочетания клавишCommand+ K Command+, Sзатем набрать Formatter и добавить свой ярлык.

Смотрите пример:

Введите описание изображения здесь


23

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

Я попытался отформатировать в Windows 8.

Просто следуйте скриншотам ниже.

  1. Нажмите View в верхней строке меню, а затем нажмите на Command Palette.

    Введите описание изображения здесь

  2. Тогда появится текстовое поле, где нам нужно типа Формат

    Shift+ Alt+F

    Введите описание изображения здесь


1
Иногда я копирую вставить XML в новый файл и хочу отформатировать его без сохранения файла. Это идеально подходит для таких ситуаций!
user3885927

19

В Visual Studio кодекса Shift+ Alt+ Fделает то , что Ctrl+ K+ Dделает в Visual Studio.


18

Ярлык формата в C # не работал для меня, пока я не установил Mono для Mac OS X, DNVM и DNX .

До того, как я установил Mono, ярлык автоформатирования ( Shift+ Alt+ F) работал только для .jsonфайлов.


Для форматирования C # необходимо установить расширения. Обычно омнишарп должен работать. Однако в омнишарпе есть ошибка. До исправления ошибки мы должны использовать расширение Leopotam.csharpfixformat. Это переопределяет omnisharp. После установки расширения C # FixFormat я снова могу отформатировать документы.
Oncel Umut TURER

18

На Mac, Shift+ Alt+ Fработает для меня.

Вы всегда можете проверить привязки клавиш в меню:

Файл меню → НастройкиСочетания клавиш и фильтр по ключевому слову «формат».


14

Хотя изменение поведения по умолчанию для кода Visual Studio требует расширения, вы можете переопределить поведение по умолчанию в рабочей области или на уровне пользователя. Он работает для большинства поддерживаемых языков (я могу гарантировать HTML, JavaScript и C #).

Уровень рабочего пространства

Льготы

  • Не требует расширения
  • Может быть разделен между командами

Результаты

  • .vscode/settings.json создается в корневой папке проекта

Как?

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

  2. Добавьте и сохраните "editor.formatOnType": trueфайл settings.json (который переопределяет поведение по умолчанию для проекта, над которым вы работаете, создав файл .vscode / settings.json).

    Как это выглядит

Уровень пользовательской среды

Льготы

  • Не требует расширения
  • Личная среда разработки настраивает их всех (настройки :))

Результаты

  • Пользователь settings.jsonизменен (см. Местоположение в зависимости от операционной системы ниже)

Как?

  1. Перейдите: меню ФайлНастройкиНастройки пользователя.

  2. Добавить или изменить значение "editor.formatOnType": falseдля "editor.formatOnType": trueв пользовательском settings.json

Ваше settings.jsonместоположение пользователя кода Visual Studio :

Расположение файла настроек в зависимости от вашей платформы, файл настроек пользователя находится здесь:

  • Окна: %APPDATA%\Code\User\settings.json
  • Mac: $HOME/Library/Application Support/Code/User/settings.json
  • Linux: $HOME/.config/Code/User/settings.jsonфайл настроек рабочей области находится в папке .vscode в вашем проекте.

Более подробную информацию можно найти здесь .


9

По умолчанию этот ключ не работал для меня в документах HTML, CSS и JavaScript.

После поиска я нашел популярный плагин JS-CSS-HTML Formatter с 133 796 установками .

После установки просто перезагрузить окна и удар Ctrl+ Shift+ F, и это сработало!


Да, но только 2 из 5 звезд? Шутки в сторону?
kmoser

Просто напоминание: этот ответ был изначально написан в 2017 году, и тогда функциональность VS Code была в значительной степени функциональной с помощью плагинов или других хаков, в то время у меня не работало ни одно из других решений, поэтому я обнаружил его сам, который на самом деле работал тогда и не все равно, сколько у него звезд :-) Теперь 2020 и поддержка форматирования просто фантастическая.
Mumair

Я не думаю, что VS Code пока поддерживает форматирование CSS из коробки. Я установил плагин Prettier ( prettier.io) ), который обрабатывает JavaScript, TypeScript, Flow, JSX, JSON, CSS, SCSS, Less, HTML, Vue, Angular, GraphQL, Markdown, YAML. 5,6 миллиона установок и 4 звезды.
kmoser

Я рад, что вы посчитали красивее: P Поддержка форматирования есть, но она не так хороша, как лучше, я использую красивее как dev-зависимость во всех моих проектах с .prettierrcи плагином. Боюсь, что однажды красивее сольется в vs-код :)
mumair

8

Выделите текст, щелкните правой кнопкой мыши на выделении и выберите опцию «Палитра команд»:

Введите описание изображения здесь

Откроется новое окно. Ищите «формат» и выберите вариант, форматирование которого соответствует требованию.




7

Для тех, кто хочет настроить файлы JavaScript для форматирования, вы можете использовать любое расширение в JSfilesсвойстве. То же самое относится и к HTML.

{
    "beautify.onSave": true,
    "beautify.JSfiles": ["js", "json", "jsbeautifyrc", "jshintrc", "ts"],
    "beautify.HTMLfiles": ["htm", "html"]
}

Это включит beautify при сохранении для TypeScript, и вы можете добавить XML в опцию HTML.


1
Куда мне это положить? Это также помогает добавить, что украшение - это расширение ...
Ротджерс

Вы могли бы упомянуть, где разместить этот код.
gromit190

6

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

Обратитесь к этому скриншоту:

IMG


6

Сначала вы должны установить соответствующий плагин (например, XML, C # и т. Д.).

Форматирование не будет доступно, пока вы не установили соответствующий плагин и не сохранили файл с соответствующим расширением.


Beautify спрашивает вас, не знает ли он, какой форматтер использовать, позволяя стилизовать cshtml.
Cees Timmerman

6

Простейший способ, которым я пользуюсь в Visual Studio Code (Ubuntu):

Выделите текст, который вы хотите отформатировать с помощью мыши.

Щелкните правой кнопкой мыши и выберите «Выбор формата» .


5

Не этот. Использовать этот:

Файл меню → НастройкиНастройки рабочего пространства , «editor.formatOnType» : true


3
Не этот что? Вы имеете в виду другой ответ? Если да, то какой?
Питер Мортенсен

2

Использовать расширение ...

Включает автоматическое форматирование кода при сохранении файла.

Запустите Visual Studio Code и Quick Open ( Ctrl+ P), вставьте следующую команду и нажмите Enter.

ext установить формат при сохранении

https://marketplace.visualstudio.com/items?itemName=gyuha.format-on-save


2
ссылка мертвая - расширение 404?
jordan.baucke

2

Код Visual Studio в Linux:

Ctrl+ [к неиспользуемому блоку кода и

Ctrl+ ]сделать массовый отступ

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.