Материал подготовлен командой Simple-Server для администраторов VPS и выделенных серверов. Команды и пути проверяйте на тестовой машине перед production.
Кратко о задаче
Будем исходить из того, что Visual Studio Code у вас уже установлен. А ещё есть файл с кодом, который срочно нуждается в форматировании. Например, вот такой фрагмент:
const name = "Simple-Server";
const service ={first: name
}
console.log(service);
const printName = (fName) => {
console.log(`This is ${fName}`)
}
printName ('Simple-Server');Здесь стандартные проблемы: не смогли определиться с тем, какие кавычки использовать, потеряли отступы и переносы. Если запустить код, то он выполнится — для машины все эти отступы в JavaScript особого значения не имеют. А вот человеку читать такое будет сложно.
Следующий шаг — установка расширения для автоматической простановки отступов, точек с запятыми и других вещей, которые делают код человекопонятным.
- Выберите вкладку Extensions в меню VS Code (можно использовать сочетание Ctrl + Shift + X на Windows).
- Найдите Prettier. У этого расширения для VS Code больше 20 млн установок.
- Нажмите Install для установки.
Есть альтернативный способ. Нажмите сочетание Ctrl + P для вызова панели быстрого запуска и выполните команду:
ext install esbenp.prettier-vscodeТеперь можно использовать утилиту для быстрого исправления внешнего вида кода.
Новое сообщение в Слаке от проджект-менеджера — нужно срочно отправлять в продакшн обновлённую страницу с преимуществами Simple-Server. Всё готово и работает, но вот форматирование кода подкачало — команда за такое по голове не погладит. Но у нас же теперь есть расширение, которое поможет разобраться с этими неприятными недостатками быстро и безболезненно.
1. Нажмите сочетание Ctrl + Shift + P, чтобы открыть палитру команд.
2. Найдите и выполните команду Format Document With.
3. Выберите в выпадающем списке Prettier.
Код отформатируется со всеми необходимыми пробелами, отступами, переносами и единообразными кавычками.
const name = "Simple-Server";
const person = { first: name };
console.log(person);
const sayHelloLinting = (fName) => {
console.log(`Hello linting, ${fName}`);
};
sayHelloLinting("Simple-Server");Очень удобная штука — быстрая установка инструментов для разных языков. Например, если вы запустите автоформатирование в файле кодом на Python, появится предложение добавить autopep8. Эта утилита автоматически форматирует код Python в соответствии с руководством по стилю PEP 8. Она использует pycodestyle, чтобы определить, какие части кода необходимо отформатировать. Autopep8 способен исправить большинство проблем, о которых сообщает pycodestyle.
Чтобы каждый раз не приходилось наводить красоту вручную, добавьте автоформатирование при сохранении.
- Откройте Settings (на Windows это Ctrl + ,).
- С помощью поисковой строки найдите параметр Editor: Format On Save.
- Отметьте чекбокс, чтобы включить форматирование при сохранении файла.
Готово, теперь ручной запуск не понадобится.
Настройка собственных правил форматирования
Разработчики могут настраивать свои правила форматирования. Есть два способа:
- Изменить конфигурацию прямо в настройках расширения.
- Создать отдельный файл конфигурации.
В настройках самого расширения можно изменить распространённые параметры. Например, указать количество пробелов при табуляции или выбрать, нужно добавлять точку с запятой в конце строки или нет. Это быстро, но конфигурация будет только у вас. Чтобы раскатить конфигурацию на всю команду разработчиков, нужно создавать отдельный файл. В нём будут единые правила форматирования кода в Visual Studio Code.
Файл .prettierrc.extension с конфигурацией может иметь расширение yml, yaml, json, js или toml. Вот простейший пример в формате JSON:
{
"trailingComma": "es5",
"tabWidth": 2,
"semi": true,
"singleQuote": false
}Другие базовые варианты смотрите в документации Prettier.
Нужен сервер для практики? Закажите VPS на Simple-Server — root-доступ, NVMe, DDoS-защита и поддержка 24/7.