Как выровнять код в visual studio code

Visual Studio Code Formatting Setup

Our team has multiple software engineers working on the same codebase, formatting code sometimes becomes an issue. Depending on the editor setup, the same code working for one person might be automatically formatted by another, which results in PR often with lot of formatting changes.

The solution is to use the same formatting rules and tools across the team so the code format is standardized.

Since we mainly develop Angular application in TypeScript/HTML/Sass, below I’m going to show you my code formatting setup for those file types.

Also, the underline formatting tool VS Code uses is listed below, so if you are using other editors, you might be able to achieve the same format result.

How to format code

You can format manually or enable format on save.

• To format manually, press SHIFT+CMD+P then type ‘format’, select ‘format document’ or ‘format selection’. Or, just press SHIFT+ALT+F

• To enable format on save, add this line to your settings: ”editor.formatOnSave”: true

Format TypeScript

TypeScript is supported by default.

Underline, VS Code is using js-beautify.

However, imports are not sorted by formatting. We can use “Typescript Hero” extension to automatically sort the imports.

• To sort the imports manually, press SHIFT+CMD+P then type ‘imports’, hit ENTER on the first command.

• To sort on save, add this to your settings: “typescriptHero.imports.organizeOnSave”: true

Format HTML

HTML formatting is supported by default.

Underline, VS Code is using js-beautify.

Please refer here for settings.

Format Sass

VS Code has default support for SASS but we can also install ‘Sass Formatter’ extension for better support.

Underline, ‘Sass Formatter’ use ‘sass-convert’ so vim user should be able to achieve the same functionality.

This post belongs to a series “Know your editor: Visual Studio Code”, where it has a collection of Visual Studio Code tips and setup.

Как структурировать код в Visual Studio Code?

Помню, когда работал на Sublime Text, была возможность чтобы код правильно вставлялся. <div> под <div> , отступы и т.д.

Как сделать такое на Visual Studio Code?

Автоматическое форматирование кода в Visual Studio Code выполняется следующими комбинациями:

• Windows: Shift + Alt + F
• Mac: Shift ⇧ + Option ⌥ + F
• Ubuntu: Ctrl + Shift + I

В дополнении к ответу от @Эникейщик

В настройках можно установить форматирование при сохранении

Что искать в настройках

1. Или Editor: Format On Save в графическом интерфейсе
2. Или editor.formatOnSave в settings.json
   

Предупреждение:

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

Как сделать форматирование кода с помощью Prettier в Visual Studio Code

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

Здесь на помощь приходит Prettier Code Formatter. Это настраиваемый форматировщик кода, который поддерживает множество языков и интегрируется с большинством редакторов. В этой статье мы посмотрим, как работать с Prettier в Visual Studio Code. Другие интеграции и способы установки смотрите в документации Prettier .

Настройка рабочей среды

Будем исходить из того, что Visual Studio Code у вас уже установлен. А ещё есть файл с кодом, который срочно нуждается в форматировании. Например, вот такой фрагмент:

Здесь стандартные проблемы: не смогли определиться с тем, какие кавычки использовать, потеряли отступы и переносы. Если запустить код, то он выполнится — для машины все эти отступы в JavaScript особого значения не имеют. А вот человеку читать такое будет сложно.

Следующий шаг — установка расширения для автоматической простановки отступов, точек с запятыми и других вещей, которые делают код человекопонятным.

1. Выберите вкладку Extensions в меню VS Code (можно использовать сочетание Ctrl + Shift + X на Windows).
2. Найдите Prettier. У этого расширения для VS Code больше 20 млн установок.
3. Нажмите Install для установки.

Есть альтернативный способ. Нажмите сочетание Ctrl + P для вызова панели быстрого запуска и выполните команду:

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

Автоформатирование

Новое сообщение в Слаке от проджект-менеджера — нужно срочно отправлять в продакшн обновлённую страницу с преимуществами Timeweb Cloud . Всё готово и работает, но вот форматирование кода подкачало — команда за такое по голове не погладит. Но у нас же теперь есть расширение, которое поможет разобраться с этими неприятными недостатками быстро и безболезненно.

1. Нажмите сочетание Ctrl + Shift + P, чтобы открыть палитру команд.

2. Найдите и выполните команду Format Document With.

3. Выберите в выпадающем списке Prettier.

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

Очень удобная штука — быстрая установка инструментов для разных языков. Например, если вы запустите автоформатирование в файле кодом на Python, появится предложение добавить autopep8. Эта утилита автоматически форматирует код Python в соответствии с руководством по стилю PEP 8. Она использует pycodestyle, чтобы определить, какие части кода необходимо отформатировать. Autopep8 способен исправить большинство проблем, о которых сообщает pycodestyle.

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

1. Откройте Settings (на Windows это Ctrl + ,).
2. С помощью поисковой строки найдите параметр Editor: Format On Save.
3. Отметьте чекбокс, чтобы включить форматирование при сохранении файла.

Готово, теперь ручной запуск не понадобится.

Настройка собственных правил форматирования

Разработчики могут настраивать свои правила форматирования. Есть два способа:

1. Изменить конфигурацию прямо в настройках расширения.
2. Создать отдельный файл конфигурации.

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

Файл .prettierrc.extension с конфигурацией может иметь расширение yml, yaml, json, js или toml. Вот простейший пример в формате JSON:

Другие базовые варианты смотрите в документации Prettier .

Заключение

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

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

Форматирование кода с помощью Prettier в Visual Studio Code

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

В этой статье мы настроим 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.

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

Затем выберите 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 с одним из следующих расширений:

• yml
• yaml
• json
• js
• toml

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

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

Заключение

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

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

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.