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