как форматировать код в visual studio code
Параметры стиля кода
Код стиля параметров каждого проекта можно определить с помощью EDITORCONFIG-файла; для всего кода в Visual Studio можно задать настройки на странице Параметры в текстовом редакторе. Для кода на C# можно также настроить Visual Studio, чтобы применять эти параметры стиля кода с помощью команд Очистка кода (Visual Studio 2019) и Форматировать документ (Visual Studio 2017).
Этот раздел относится к Visual Studio в Windows. Информацию о Visual Studio для Mac см. в статье Поведение редактора в Visual Studio для Mac.
Стили кода в EDITORCONFIG-файлах
Вы можете вручную отредактировать файл EditorConfig или автоматически создать его в зависимости от установленных в Visual Studio параметров стиля кода в диалоговом окне Параметры. Страница «Параметры» находится в разделе Сервис > Параметры > Текстовый редактор > [C# или Basic] > Стиль кода > Общие. Нажмите кнопку Создать EDITORCONFIG-файл из параметров, чтобы автоматически создать EDITORCONFIG-файл стиля кода на основе параметров, которые вы задали на этой странице Параметры.
Стили кода в диалоговом окне «Параметры»
Параметры стиля кода для проектов C# и Visual Basic можно задать, открыв диалоговое окно Параметры из меню Сервис. В диалоговом окне Параметры выберите Текстовый редактор > [C# или Basic] > Стиль кода > Общие.
При выборе для каждого из элементов в списке выводится окно предварительного просмотра:
Параметры, заданные в этом окне, применяются к вашей учетной записи персонализации Visual Studio и не связаны с конкретным проектом или базой кода. Кроме того, они не применяются во время сборки, в том числе в сборках с непрерывной интеграцией (CI). Если вы хотите связать предпочтения к стилю кода со своим проектом и применяете стили во время сборки, укажите такие предпочтения в EDITORCONFIG-файле, связанном с проектом.
Предпочтения и степень серьезности
Для каждого параметра стиля кода на этой странице с помощью раскрывающихся списков в каждой строке можно задать значения для параметров Предпочтение и Серьезность. Для серьезности можно задать значения Только рефакторинг, Предложение, Предупреждение или Ошибка. Если вы хотите включить быстрые действия для стиля кода, убедитесь, что для параметра Серьезность задано значение, отличное от Только рефакторинг. Значок лампочки для быстрых действий 
, значок лампочки для ошибок 
или значок отвертки 
отображается при использовании альтернативного стиля. Вы можете выбрать нужный вариант в списке быстрых действий для автоматического повторного создания кода в предпочитаемом стиле.
Принудительное применение стиля кода в сборке
Применение стилей кода
Вы можете настроить команду Форматировать документ (Правка > Дополнительно > Форматировать документ) для применения параметров стиля кода (из EDITORCONFIG-файла или параметров стиля кода) вместе с регулярным форматированием (например, отступами). Если EDITORCONFIG-файл существует в проекте, его параметры имеют приоритет.
Применение стилей кода с помощью команды Форматировать документ доступно только для файлов кода на C#. Это экспериментальная функция.
Вы можете выбрать, какие параметры команда Форматировать документ будет применять, на странице параметров форматирования.
Правила, настроенные с серьезностью Нет, не используются в ходе очистки кода, но могут применяться по отдельности через меню Быстрые действия и рефакторинг.
При первом запуске команды Форматировать документ вам следует настроить параметры очистки кода на желтой информационной панели.
Для файлов кода на C# в Visual Studio 2019 есть кнопка Очистка кода в нижней части редактора (на клавиатуре: CTRL+K, CTRL+E) для применения стилей кода из EDITORCONFIG-файла или со страницы параметров стиля кода. Если EDITORCONFIG-файл существует в проекте, его параметры имеют приоритет.
Правила, настроенные с серьезностью Нет, не используются в ходе очистки кода, но могут применяться по отдельности через меню Быстрые действия и рефакторинг.
Во-первых, настройте стили кода, которые необходимо применять (в одном из двух профилей), используя диалоговое окно Настройка очистки кода. Чтобы открыть это диалоговое окно, щелкните стрелку рядом со значком метлы (очистка кода) и выберите команду Настроить очистку кода.
После настройки очистки кода вы можете щелкнуть значок метлы или нажать клавиши Ctrl+K, Ctrl+E, чтобы запустить очистку кода. Вы также можете выполнить очистку кода для всего проекта или решения сразу. Щелкните правой кнопкой мыши имя проекта или решения в обозревателе решений, выберите команду Анализ и очистка кода, а затем — Запустить очистку кода.
Если вы хотите применять параметры стиля кода при каждом сохранении файла, вам может подойти расширение для очистки кода при сохранении.
Как вы форматируете код в коде Visual Studio (VSCode)
Что эквивалентно Ctrl + K + F и Ctrl + K + D для Windows в Visual Studio для форматирования или «украшающего» кода в редакторе кода Visual Studio
ОТВЕТЫ
Ответ 1
Форматирование кода доступно в Visual Studio Code с помощью следующих ярлыков:
Кроме того, вы можете найти ярлык, а также другие ярлыки, с помощью функции поиска, предоставленной в редакторе с помощью Ctrl + Shift + P (или Command + Shift + P на Mac), а затем поиск формат документа.
Ответ 2
Ярлык форматирования кода:
Вы также можете настроить этот ярлык, используя настройки предпочтений, если это необходимо.
Форматирование кода при сохранении файла:
Visual Studio Code позволяет пользователю настраивать параметры по умолчанию.
Если вы хотите автоматически отформатировать содержимое во время сохранения, добавьте приведенный ниже фрагмент кода в настройках рабочего пространства кода Visual Studio.
Файл меню → Настройки → Настройки рабочего пространства
Примечание: теперь вы можете автоматически форматировать файлы TypeScript. Проверьте мое обновление.
Ответ 3
Вы можете добавить связывание клавиш в меню Файл → Настройки → Сочетания клавиш.
Или Visual Studio, как:
Ответ 4
Ответ 5
Ответ 6
Также обратите внимание, что на сегодняшний день форматирование доступно для следующих языков:
Ответ 7
Мой читал «key»: «ctrl+shift+i»
Вы также можете изменить это. Обратитесь к этому ответу о том, как. или если вам немного лень прокручивать вверх:
Вы можете добавить связывание клавиш в «Preferences-> Сочетания клавиш»
Или Visual Studio, как:
Обратите внимание: клавиша cmd предназначена только для компьютеров Mac. Для Windows и Fedora (клавиатура Windows) используйте Ctrl
РЕДАКТИРОВАТЬ:
Согласно Visual Code версии 1.28.2 это то, что я нашел.
Введите editor.action.format в поле поиска, чтобы просмотреть существующие ярлыки.
Чтобы изменить комбинации клавиш, выполните следующие действия:
Ответ 8
Для других языков вам может потребоваться установить определенный языковой пакет.
Ответ 9
Visual Studio Code 1.6.1 поддерживает функцию «Форматировать при сохранении», которая автоматически выбирает соответствующие установленные расширения форматирования и форматирует весь документ при каждом сохранении.
Включите «Формат при сохранении», установив
И есть доступные сочетания клавиш (Visual Studio Code 1.7 и выше):
Отформатируйте весь документ: Shift + Alt + F
Ответ 10
Ответ 11
Просто щелкните правой кнопкой мыши по тексту и выберите «Формат кода».
Visual Studio Code использует js-beautify внутри, но ему не хватает возможности изменить стиль, который вы хотите использовать. Расширение «украсить» позволяет добавлять настройки.
Ответ 12
По какой-то причине Alt + Shift + F у меня не работали в Mac Visual Studio Code 1.3.1, и фактически команда «Форматировать документ» вообще не работала. Но команда Formatter сработала очень хорошо.
Ответ 13
Shift + Alt + F отлично справляются со своей задачей в 1.17.2 и выше.
Ответ 14
Форматирование кода в Visual Studio.
Я пытался отформатировать в Windows 8.
Просто следуйте скриншотам ниже.
Нажмите «Вид» в верхней строке меню, а затем нажмите «Палитра команд».
Тогда появится текстовое поле, где нам нужно типа Формат
Ответ 15
В коде Visual Studio Shift + Alt + F делает то, что делает Ctrl + K + D в Visual Studio.
Ответ 16
Ярлык формата в С# не работал для меня, пока я не установил Mono для Mac OS X, DNVM и DNX.
Ответ 17
Вы всегда можете проверить привязки клавиш в меню:
Файл меню → Настройки → Сочетания клавиш и фильтр по ключевому слову «формат».
Ответ 18
Файл меню & rarr; Настройки & rarr; Настройки
Когда вы вводите точку с запятой, она будет отформатирована.
Ответ 19
Хотя изменение поведения по умолчанию для кода Visual Studio требует расширения, вы можете переопределить поведение по умолчанию в рабочей области или на уровне пользователя. Он работает для большинства поддерживаемых языков (я могу гарантировать HTML, JavaScript и С#).
Уровень рабочего пространства
Выгоды
Результаты
Перейдите: Файл меню → Настройки → Настройки рабочего пространства.
Уровень пользовательской среды
Выгоды
Результаты
Перейдите: меню Файл → Настройки → Настройки пользователя.
Ваше местоположение пользователя settings.json кода Visual Studio:
Расположение файла настроек в зависимости от вашей платформы, файл настроек пользователя находится здесь:
Более подробную информацию можно найти здесь.
Ответ 20
В ключевых привязках существует формат Shift + Alt + f
но для С++ он не работает (как и 16 мая), поэтому теперь переключился на net beans.
Ответ 21
По умолчанию этот ключ не работал для меня в документах HTML, CSS и JavaScript.
После поиска я нашел популярный плагин JS-CSS-HTML Formatter с 133 796 установками.
Ответ 22
Выделите текст, щелкните правой кнопкой мыши на выделении и выберите опцию «Палитра команд»:
Откроется новое окно. Ищите «формат» и выберите вариант, форматирование которого соответствует требованию.
Ответ 23
Просто установите Visual Studio Keymap от Microsoft. Задача решена. :п
Ответ 24
Ответ 25
Простейший способ, которым я пользуюсь в Visual Studio Code (Ubuntu):
Выделите текст, который вы хотите отформатировать с помощью мыши.
Щелкните правой кнопкой мыши и выберите «Выбор формата».
Ответ 26
Если вы хотите настроить стиль форматированного документа, вы должны использовать расширение Украсить.
Обратитесь к этому снимку экрана:
Ответ 27
Это включит украшение при сохранении для TypeScript, и вы можете добавить XML в опцию HTML.
Ответ 28
Сначала вы должны установить соответствующий плагин (например, XML, С# и т.д.).
Форматирование не будет доступно, пока вы не установили соответствующий плагин и не сохранили файл с соответствующим расширением.
Ответ 29
Не этот. Использовать этот:
Файл меню → Настройки → Настройки рабочего пространства, «editor.formatOnType»: true
Ответ 30
Включает автоматическое форматирование кода при сохранении файла.
ext установить формат при сохранении
Форматирование кода с помощью 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 Code с помощью ESLint
Если вы пишете JavaScript в редакторе, например в Visual Studio Code, у вас есть несколько способов убедиться, что ваш код имеет правильный синтаксис и соответствует передовым практикам. Для этого можно использовать линтер. Линтеры – это программы, которые проверяют ваш код на наличие синтаксических ошибок и выделяют их, чтобы вы могли быстро их найти и исправить. ESLint – это линтер, который вы можете интегрировать в Visual Studio Code, чтобы обеспечить целостность вашего кода.
ESLint может форматировать код и анализировать его, а также вносить предложения по улучшению. Кроме того, вы можете настроить способ оценки вашего кода.
В этом руководстве вы узнаете, как установить ESLint на Visual Studio Code и реализовать пользовательскую конфигурацию для работы с операторами логов при отладке. Также мы покажем, как настроить автоматическое исправление синтаксических ошибок в ESLint при сохранении файлов.
Требования
1: Создание простого кода JavaScript
Мы начнем с подготовки тестового проекта, на примере которого рассмотрим функции линтера. Создайте для своего проекта каталог с помощью следующей команды:
Теперь, когда папка для проекта готова, перейдите в нее:
Находясь внутри каталога linting, создайте файл JavaScript по имени app.js:
Откройте app.js в Visual Studio Code. Поместите следующий код JavaScript в файл app.js:
const sayHelloLinting = (fName) => <
С точки зрения форматирования вы можете сразу заметить несколько вещей, которые можно улучшить:
Подготовив этот файл JavaScript, вы можете инициализировать этот проект. Для этого вернитесь в командную строку и в каталоге linting выполните следующую команду:
Команда npm init при инициализации вашего проекта создаст в каталоге linting файл package.json. В package.json будут храниться зависимости и другие важные параметры конфигурации вашего проекта.
Теперь, когда тестовый проект JavaScript готов, мы можем установить ESLint.
2: Установка и настройка ESLint
Чтобы установить ESLint, введите:
В эту команду важно включить флаг –save-dev, поскольку он сохраняет пакет как зависимость разработки – и тогда он будет использован только в разработке, но не в производстве. Пакет eslint нужен только тогда, когда вы активно работаете над кодом и вносите изменения в свой проект. Как только ваш проект будет на стадии производства, eslint больше не понадобится. И флаг –save-dev гарантирует, что eslint будет указан в вашем файле package.json только как зависимость разработки.
Теперь, когда ESLint установлен, вы можете инициализировать конфигурацию ESLint для своего проекта, используя для этого следующую команду:
Прежде чем вы сможете получить доступ к своему конфигурационному файлу ESLint, программа задаст вам несколько вопросов о проекте. Эти вопросы помогут программе убедиться, что конфигурация, инициализированная для вашего проекта, наилучшим образом соответствует требованиям.
Первый вопрос будет выглядеть так:
? How would you like to use ESLint? …
To check syntax only
To check syntax and find problems
❯ To check syntax, find problems, and enforce code style
Здесь мы выберем To check syntax, find problems, and enforce code style – чтобы программа проверяла синтаксис, сообщала о проблемах и поддерживала единый стиль кода.
Следующий вопрос выглядит так:
What type of modules does your project use? …
JavaScript modules (import/export)
Выберите опцию CommonJS, чтобы использовать глобальные переменные CommonJS.
В следующем вопросе будет сказано:
? Which framework does your project use? …
Выберите вариант None of these.
Затем программа спросит:
? Does your project use TypeScript? › No / Yes
Выберите вариант No.
Затем появится такой вопрос:
? Where does your code run? … (Press to select, to toggle all, to invert selection)
Затем вы увидите такой вопрос:
✔ How would you like to define a style for your project? …
❯ Use a popular style guide
Answer questions about your style
Inspect your JavaScript file(s)
Выберите ответ Use a popular style guide.
Which style guide do you want to follow?
Ответьте Airbnb: https://github.com/airbnb/javascript.
Затем будет такой вопрос:
? What format do you want your config file to be in? …
Нужно выбрать JSON.
Вы получите такое сообщение:
Checking peerDependencies of eslint-config-airbnb-base@latest
The config that you’ve selected requires the following dependencies:
eslint-config-airbnb-base@latest eslint@^5.16.0 || ^6.8.0 || ^7.2.0 eslint-plugin-import@^2.21.2
Последний вопрос программы выглядит так:
? Would you like to install them now with npm? › No / Yes
Выберите вариант Yes, чтобы установить зависимости с помощью npm.
Вам также будет предложено установить дополнительные пакеты. Выберите yes.
3: Настройка ESLint
Чтобы интегрировать ESLint в Visual Studio Code, вам необходимо установить расширение ESLint для VS Code. Вернитесь в Visual Studio Code и найдите ESLint во вкладке Extensions. После того, как вы найдете это расширение, нажмите Install.
После установки расширения ESLint вы заметите красочное подчеркивание в файле app.js – это линтер выделил ошибки в файле. Отметки в ESLint имеют разные цвета в зависимости от степени серьезности. Если вы наведете курсор на подчеркнутый код, вы увидите сообщение, объясняющее вам ошибку. Таким образом, ESLint помогает находить ошибки в коде и устранять их.
ESLint может сделать для вас даже больше: к примеру, он может автоматически исправлять ошибки при каждом сохранении файла (для этого требуется отдельная настройка).
4: Форматирование при сохранении
Чтобы ESLint мог автоматически исправлять синтаксис и устранять ошибки форматирования при каждом сохранении, вам нужно открыть меню настроек. Меню в Visual Studio Code – это значок шестеренки в левом нижнем углу. Нажмите его и выберите Settings.
В меню настроек найдите Code Actions on Save. Первой идет опция Editor: Code Actions on Save, а ниже – Edit in settings.json, и как раз она нам нужна.
Файл settings.json откроется в редакторе кода. Чтобы ESLint исправлял ошибки при сохранении файла, вам нужно добавить следующий код в settings.json:
С помощью этого кода ESLint сможет автоматически исправляет ошибки и проверяет JavaScript при сохранении.
Вернитесь к файлу app.js и сохраните его. Вы увидите, что линтер внес некоторые изменения, и цвет подчеркивания тоже изменился. Вот некоторые из ошибок форматирования, которые исправил ESLint:
ESLint автоматически будет устранять синтаксические ошибки при сохранении файла app.js. Но пока у нас еще остались сообщения об ошибках. Их можно исправить, настроив ESLint для обнаружения или игнорирования определенных ошибок и проблем с форматированием.
5: Пользовательская настройка ESLint
«Из коробки» ESLint подчеркивает все операторы console.log() в app.js. В некоторых случаях распознавание операторов console.log в качестве ошибки может быть не в приоритете. Вы можете игнорировать операторы console.log.
Если вы не хотите подчеркивать операторы console.log как ошибки, вы можете назвать правило no-console и указать это имя в качестве ключа. Используйте off как значение:
Это правило удаляет подчеркивание операторов console.log в app.js.
Некоторые правила требуют нескольких фрагментов данных, включая уровень серьезности и значение. К примеру, чтобы указать тип кавычек, которые вы хотите использовать в своем коде, вы должны передать и выбранный тип кавычек, и уровень серьезности:
Если теперь вы включите в код одинарные кавычки, ESLint выдаст ошибку.
Заключение
Это руководство вкратце знакомит с некоторыми функциями интеграции ESLint в Visual Studio Code. Инструменты линтинга, такие как ESLint, помогут вам сэкономить время для более сложных задач за счет автоматизации и упрощения проверки синтаксиса и остальных требований к коду.
Если вам нужна дополнительная информация о правилах и о том, какие пары «ключ-значение» вы можете использовать для настройки ESLint, вы можете ознакомиться с документацией.