В нашей команде несколько инженеров-программистов, работающих над одной и той же кодовой базой, поэтому форматирование кода иногда становится проблемой. В зависимости от настроек редактора один и тот же код, работающий для одного человека, может быть автоматически отформатирован другим, что часто приводит к PR с большим количеством изменений форматирования.

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

Поскольку мы в основном разрабатываем приложение Angular на TypeScript / HTML / Sass, ниже я покажу вам мои настройки форматирования кода для этих типов файлов.

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

Как отформатировать код

Вы можете форматировать вручную или включить форматирование при сохранении.

  • Чтобы отформатировать вручную, нажмите SHIFT+CMD+P, затем введите «формат», выберите «форматировать документ» или «выбор формата». Или просто нажмите SHIFT+ALT+F

  • Чтобы включить форматирование при сохранении, добавьте эту строку в свои настройки: ”editor.formatOnSave”: true

Формат TypeScript

TypeScript поддерживается по умолчанию.

Подчеркните, VS Code использует js-beautify.

Однако импорт не сортируется по форматированию. Мы можем использовать расширение Typescript Hero для автоматической сортировки импорта.

  • Чтобы отсортировать импорт вручную, нажмите SHIFT+CMD+P, затем введите «импорт» и нажмите ENTER для первой команды.

  • Чтобы сортировать при сохранении, добавьте это в свои настройки: “typescriptHero.imports.organizeOnSave”: true

Форматировать HTML

Форматирование HTML поддерживается по умолчанию.

Подчеркните, VS Code использует js-beautify.

Пожалуйста, обратитесь здесь для настроек.

Настройки:

"html.format.wrapAttributes": "force-aligned",
"html.format.enable": true,

Форматировать Sass

VS Code по умолчанию поддерживает SASS, но мы также можем установить расширение Sass Formatter для лучшей поддержки.

Подчеркните, что в «Sass Formatter» используется «sass-convert», поэтому пользователь vim должен иметь такую ​​же функциональность.

Настройки:

"sassFormat.indent": 2,
"sassFormat.useSingleQuotes": true,

Этот пост принадлежит к серии Знай своего редактора: Visual Studio Code, где он содержит сборник советов и настроек Visual Studio Code.