Visual studio форматирование кода
Согласованное форматирование кода — сложная задача, но современные инструменты разработчиков позволяют автоматически обеспечивать согласованность базы кода вашей команды.
В этой статье мы настроим Prettier для автоматического форматирования кода в Visual Studio Code или VS Code.
Для демонстрации мы будем форматировать следующий код:
Если вы знакомы с форматированием кода, вы можете заметить некоторые упущения:
- Смесь одинарных и двойных кавычек.
- Первое свойство объекта person должно находиться в отдельной строке.
- Выражение консоли внутри функции должно быть выделено отступами.
- Вам могут понравиться или не понравиться необязательные скобки, в которые заключен параметр функции arrow.
Предварительные требования
Для прохождения этого учебного модуля вам нужно будет загрузить и установить Visual Studio Code.
Чтобы работать с Prettier в Visual Studio Code, вам потребуется установить расширение. Для этого выполните поиск инструмента Prettier - Code Formatter в панели расширений VS Code. Если вы устанавливаете его в первый раз, вы увидите кнопку install вместо кнопки uninstall, как показано здесь:
Шаг 1 — Использование команды форматирования документа
После установки расширения Prettier вы можете использовать его для форматирования вашего кода. Для начала выполним обзор, используя команду Format Document. Эта команда сделает ваш код более согласованным с отформатированными пробелами, переносами строк и кавычками.
Чтобы открыть палитру команд, вы можете использовать COMMAND + SHIFT + P в macOS или CTRL + SHIFT + P в Windows.
Выполните в палитре команд поиск по ключевому слову format и выберите Format Document.
Затем выберите Prettier - Code Formatter.
Примечание. Если вы не видите диалога выбора формата по умолчанию, вы можете вручную изменить его в разделе «Настройки». Установите для Editor: Default Formatter значение esbenp.prettier-vscode .
Теперь ваш код отформатирован с пробелами, переносами строк и единообразными кавычками:
Это работает и для файлов CSS. Вы можете превращать код с несогласованными отступами, скобками, разрывами строк и точками с запятой в хорошо отформатированный код. Например:
Будет переформатирован как:
Мы изучили эту команду, и теперь посмотрим, как можно реализовать ее автоматическое выполнение.
Шаг 2 — Форматирование кода при сохранении
До сих пор вам нужно было вручную запускать команды для форматирования кода. Чтобы автоматизировать этот процесс, вы можете выбрать в VS Code настройку, чтобы ваши файлы автоматически форматировались при сохранении. Это также гарантирует, что неформатированный код не попадет в систему контроля версий.
Чтобы изменить эту настройку, нажмите COMMAND + в macOS или CTRL + в Windows, чтобы открыть меню Settings (Настройки). Выполните в меню поиск Editor: Format On Save и убедитесь, что эта опция включена:
Теперь вы можете писать код как обычно, и он будет автоматически форматироваться при сохранении файла.
Шаг 3 — Изменение параметров конфигурации Prettier
Prettier выполняет много действий по умолчанию, но вы также можете внести индивидуальные изменения в его настройки.
Откройте меню Settings (Настройки). Выполните поиск Prettier. Вы увидите список всех параметров, которые вы можете изменить:
Вот несколько наиболее распространенных параметров:
- Single Quote — выберите, нужно ли использовать одинарные или двойные кавычки.
- Semi — выберите, нужно ли добавлять точку с запятой в конце строк.
- Tab Width — укажите, сколько пробелов должно вставляться при табуляции.
Недостаток использования меню встроенных параметров VS Code заключается в том, что при этом не обеспечивается согласованность между разработчиками в вашей команде.
Шаг 4 — Создание файла конфигурации Prettier
Если вы измените настройки VS Code, у другого разработчика может оказаться совершенно иная конфигурация. Вы можете обеспечить единство форматирования в своей команде, создав файл конфигурации для вашего проекта.
Создайте новый файл .prettierrc. extension с одним из следующих расширений:
Вот пример простого файла конфигурации в формате JSON:
Более конкретную информацию о файлах конфигурации можно найти в документации по Prettier. После создания такого файла и его добавления в проект вы можете быть уверены, что все члены команды используют одинаковые правила форматирования.
Заключение
Иметь согласованный код — очень хорошая практика. Это особенно полезно при работе над проектом с несколькими участниками. Согласование конфигурации делает код более удобочитаемым и понятным. Это позволяет уделить больше времени решению технических проблем, а не тратить время на исправление отступов.
Prettier обеспечивает согласованность форматирования кода и позволяет автоматизировать этот процесс.
Want to learn more? Join the DigitalOcean Community!
Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in our Questions & Answers section, find tutorials and tools that will help you grow as a developer and scale your project or business, and subscribe to topics of interest.
Этот раздел относится к Visual Studio в Windows. Информацию о Visual Studio для Mac см. в статье Поведение редактора в Visual Studio для Mac.
Стили кода в EDITORCONFIG-файлах
Стили кода в диалоговом окне "Параметры"
При выборе для каждого из элементов в списке выводится окно предварительного просмотра:
Параметры, заданные в этом окне, применяются к вашей учетной записи персонализации Visual Studio и не связаны с конкретным проектом или базой кода. Кроме того, они не применяются во время сборки, в том числе в сборках с непрерывной интеграцией (CI). Если вы хотите связать предпочтения к стилю кода со своим проектом и применяете стили во время сборки, укажите такие предпочтения в EDITORCONFIG-файле, связанном с проектом.
Предпочтения и степень серьезности
Для каждого параметра стиля кода на этой странице с помощью раскрывающихся списков в каждой строке можно задать значения для параметров Предпочтение и Серьезность. Для серьезности можно задать значения Только рефакторинг, Предложение, Предупреждение или Ошибка. Если вы хотите включить быстрые действия для стиля кода, убедитесь, что для параметра Серьезность задано значение, отличное от Только рефакторинг. Значок лампочки для быстрых действий , значок лампочки для ошибок или значок отвертки отображается при использовании альтернативного стиля. Вы можете выбрать нужный вариант в списке быстрых действий для автоматического повторного создания кода в предпочитаемом стиле.
Принудительное применение стиля кода в сборке
Применение стилей кода
Вы можете настроить команду Форматировать документ (Правка > Дополнительно > Форматировать документ) для применения параметров стиля кода (из EDITORCONFIG-файла или параметров стиля кода) вместе с регулярным форматированием (например, отступами). Если EDITORCONFIG-файл существует в проекте, его параметры имеют приоритет.
Вы можете выбрать, какие параметры команда Форматировать документ будет применять, на странице параметров форматирования.
Правила, настроенные с серьезностью Нет, не используются в ходе очистки кода, но могут применяться по отдельности через меню Быстрые действия и рефакторинг.
При первом запуске команды Форматировать документ вам следует настроить параметры очистки кода на желтой информационной панели.
Правила, настроенные с серьезностью Нет, не используются в ходе очистки кода, но могут применяться по отдельности через меню Быстрые действия и рефакторинг.
Во-первых, настройте стили кода, которые необходимо применять (в одном из двух профилей), используя диалоговое окно Настройка очистки кода. Чтобы открыть это диалоговое окно, щелкните стрелку рядом со значком метлы (очистка кода) и выберите команду Настроить очистку кода.
После настройки очистки кода вы можете щелкнуть значок метлы или нажать клавиши Ctrl+K, Ctrl+E, чтобы запустить очистку кода. Вы также можете выполнить очистку кода для всего проекта или решения сразу. Щелкните правой кнопкой мыши имя проекта или решения в обозревателе решений, выберите команду Анализ и очистка кода, а затем — Запустить очистку кода.
Правила, настроенные с серьезностью Нет, не используются в ходе очистки кода, но могут применяться по отдельности через меню Быстрые действия и рефакторинг.
Во-первых, настройте стили кода, которые необходимо применять (в одном из двух профилей), используя диалоговое окно Настройка очистки кода. Чтобы открыть это диалоговое окно, щелкните стрелку рядом со значком метлы (очистка кода) и выберите команду Настроить очистку кода.
После настройки очистки кода вы можете щелкнуть значок метлы или нажать клавиши Ctrl+K, Ctrl+E, чтобы запустить очистку кода. Вы также можете выполнить очистку кода для всего проекта или решения сразу. Щелкните правой кнопкой мыши имя проекта или решения в обозревателе решений, выберите команду Анализ и очистка кода, а затем — Запустить очистку кода.
Если вы хотите, чтобы параметры стиля кода применялись при каждом сохранении файла, выберите Параметры>Текстовый редактор>Очистка кода и щелкните Запустить профиль "Очистка кода" при сохранении.
Если вы хотите применять параметры стиля кода при каждом сохранении файла, вам может подойти расширение для очистки кода при сохранении.
Используйте страницы свойств, чтобы изменять поведение по умолчанию редактора кода при написании программ на языках C и C++.
Чтобы открыть эту страницу, в диалоговом окне Параметры в левой области разверните Текстовый редактор, C/C++ и щелкните Форматирование.
Отображаемые на компьютере имена или расположения некоторых элементов пользовательского интерфейса Visual Studio могут отличаться от указанных в следующих инструкциях. Это зависит от имеющегося выпуска Visual Studio и используемых параметров. Дополнительные сведения см. в разделе Персонализация интегрированной среды разработки Visual Studio.
Эта страница содержит параметры для форматирования операторов и блоков при их вводе.
Visual Studio 2017 версии 15.7 и выше:
страница также содержит параметры для настройки поддержки ClangFormat версии 5.0. ClangFormat — это служебная программа, которая упрощает задание стиля и формата кода на основе набора правил, которые можно настроить в файле .clang-format или _clang-format.
Настройка параметров ClangFormat
Visual Studio 2017 версии 15.7 и выше:
Поддержка ClangFormat включена по умолчанию. Вы можете выбрать, какие из этих общих соглашений о форматировании должны применяться ко всем вашим проектам: LLVM, Google, Chromium, Mozilla или WebKit. Можно также создать файл .clang-format или _clang-format для настраиваемого определения формата. Такой файл уже присутствует в папке проекта, Visual Studio использует его для форматирования всех файлов исходного кода в этой папке и вложенных в нее папках.
По умолчанию Visual Studio выполняет clangformat.exe в фоновом режиме, применяя форматирование по мере ввода. Можно также указать, чтобы эта программа запускалась только для вызываемых вручную команд форматирования Форматировать документ (CTRL+K, CTRL+D) или Форматировать выбранный фрагмент (CTRL+K, CTRL+F).
Эти страницы позволяют использовать различные настройки форматирования, но игнорируются, если включен ClangFormat.
Используйте страницу параметров Форматирование и ее вложенные страницы (Отступ, Новые строки, Интервал и Перенос) для задания параметров форматирования кода в редакторе кода.
В нижней части каждой вложенной страницы Отступ, Новые строки, Интервалы и Перенос отображается окно предварительного просмотра, в котором можно увидеть действие каждого параметра. Чтобы использовать окно предварительного просмотра, выберите параметр форматирования. В окне предварительного просмотра отображается пример выбранного параметра. При изменении параметра с помощью переключателя или флажка содержимое окна предварительного просмотра меняется, отображая эффект применения новой настройки.
Общие параметры
Эти параметры определяют, когда редактор кода применяет параметры форматирования к коду.
Метка | Описание |
---|---|
Автоматически форматировать при вводе | Если параметр не выбран, параметры форматирования оператора при вводе запятой ";" и форматирования блока при вводе фигурной скобки ">" отключены. |
Автоматически форматировать оператор при вводе ";" | Если установлен этот флажок, форматирование операторов выполняется по завершении в соответствии с выбранными для редактора параметрами. |
Автоматически форматировать блок при вводе ">" | Если установлен этот флажок, форматирование блоков кода выполняется в соответствии с выбранными для редактора параметрами, как только завершается блок кода. |
Автоматически форматировать при возврате | Если параметр выбран, при нажатии клавиши ВВОД текст форматируется в соответствии с параметрами форматирования, выбранными для редактора. |
Автоматически форматировать при вставке | Если этот параметр выбран, форматирование текста, вставляемого в редакторе, выполняется в соответствии с выбранными для редактора параметрами. |
Параметры форматирования документов
Эти параметры позволяют настроить команду Форматировать документ, чтобы выполнять дополнительную очистку кода в файле. Дополнительные сведения о применении этих параметров см. в разделе Команда "Форматировать документ".
This topic provides a quick overview of general C/C++ editor features, as well as some that are specific to C/C++. For more information about editing in Visual Studio Code, see Basic Editing and Code Navigation.
The C/C++ extension supports Remote Development.
Editing features
List members
When you type a member access symbol ( . or -> ) the editor will display a list of members. As you type additional letters, the list is filtered in real time:
Code formatting
The C/C++ extension for Visual Studio Code supports source code formatting using clang-format which is included with the extension.
You can format an entire file with Format Document ( ⇧⌥F (Windows Shift+Alt+F , Linux Ctrl+Shift+I ) ) or just the current selection with Format Selection ( ⌘K ⌘F (Windows, Linux Ctrl+K Ctrl+F ) ) in right-click context menu. You can also configure auto-formatting with the following settings:
- editor.formatOnSave - to format when you save your file.
- editor.formatOnType - to format as you type (triggered on the ; character).
By default, the clang-format style is set to "file" which means it looks for a .clang-format file inside your workspace. If the .clang-format file is found, formatting is applied according to the settings specified in the file. If no .clang-format file is found in your workspace, formatting is applied based on a default style specified in the C_Cpp.clang_format_fallbackStyle setting instead. Currently, the default formatting style is "Visual Studio" which is an approximation of the default code formatter in Visual Studio.
The Visual Studio clang-format style is not yet an official clang-format style but it implies the following clang-format settings:
To use a different version of clang-format than the one that ships with the extension, change the C_Cpp.clang_format_path setting to the path where the clang-format binary is installed.
For example, on the Windows platform:
Enhanced semantic colorization
When IntelliSense is enabled, the Visual Studio Code C/C++ extension supports semantic colorization. See Enhanced colorization for more details about setting colors for classes, functions, variables and so on.
Quick Info
You can hover over a symbol to see an inline view of its definition:
Peek Definition
The Peek Definition feature displays a few lines of code near the definition inside a peek window, so that you don't have to navigate away from your current location.
To peek at a symbol's definition, place your cursor on the symbol anywhere it's used in your source code and then press ⌥F12 (Windows Alt+F12 , Linux Ctrl+Shift+F10 ) . Alternatively, you can choose Peek Definition from the context menu (right-click, then choose Peek Definition).
Currently, the C/C++ extension doesn't parse code in a way that helps it distinguish between competing definitions based on how the symbol is used. These competing definitions arise when the symbol defines different things in different contexts, such as occurs with overloaded functions, classes and their constructors, and other situations. When this happens, each of the competing definitions is listed in the right-hand side of the peek window with the source code of the current selection displayed on the left.
With the peek window open, you browse the list of competing definitions to find the one you're interested in. If you want to navigate to the location of one of the definitions just double-click the definition you're interested in, or by double-clicking anywhere in the source code displayed on the left-hand side of the peek window.
Navigate source code
The source code navigation features provided by the C/C++ extension are powerful tools for understanding and getting around in your codebase. These features are powered by tags stored in a local database of symbol information. With the C/C++ extension installed, this database is generated whenever a folder containing C++ source code files is loaded into VS Code. The database icon appears next to the active configuration name ("Win32" in the image below) while the tag-parser is generating this information.
The icon disappears when all the symbols have been tagged.
Search for symbols
You can search for symbols in the current file or workspace to navigate your code more quickly.
To search for a symbol in the current file, press ⇧⌘O (Windows, Linux Ctrl+Shift+O ) , then enter the name of the symbol you're looking for. A list of potential matches will appear; it is filtered as you type. Choose from the list of matches to navigate to its location.
To search for a symbol in the current workspace, press ⌘T (Windows, Linux Ctrl+T ) , then enter the name of the symbol. A list of potential matches will appear as before. If you choose a match that was found in a file that's not already open, the file will be opened before navigating to the match's location.
Go to Definition
You can also quickly navigate to where a symbol is defined by using the Go to Definition feature.
To go to a symbol's definition, place your cursor on the symbol anywhere it is used in your source code and then press F12 . Or, choose Go to Definition from the context menu (right-click, then choose Go to Definition). When there's only one definition of the symbol, you'll navigate directly to its location, otherwise the competing definitions are displayed in a peek window as described in the previous section and you have to choose the definition that you want to go to.
Next steps
Read on to find out about:
If you have any other questions or run into any issues, please file an issue on GitHub. You may be asked to provide logging information from the extension to help diagnose the issue. See C/C++ extension logging for help on providing extension logs.
Читайте также: