Установка Ruby-плагина для Prettier в VS Code

Prettier является главным расширением форматирования кода для языков front-end в VS Code, по крайней мере, если судить по количеству загрузок на рынке расширений. Я нашел его чрезвычайно полезным при изучении JavaScript и React, как для улучшения форматирования и эффективности набора текста, так и для обучения тому, как на самом деле выглядит хорошо отформатированный код.

Когда я начал изучать Ruby, мне очень не хватало простоты использования prettier, и я решил установить Ruby-плагин для Prettier, чтобы попытаться получить ту же функциональность. Однако установка оказалась сложнее, чем я ожидал, и мне пришлось прибегнуть к дополнительной помощи TA Wills Blake. Вместе мы разобрались с этим. Инструкции приведены ниже.

Плагин должен быть установлен глобально, чтобы он был автоматически доступен для всех новых проектов, открытых в VS Code. Однако инструкции по установке плагина, предоставленные Prettier, расплывчаты и, похоже, подразумевают, что плагин должен быть установлен как зависимость с каждым новым проектом. Это требует создания gemfile, добавления зависимости и т.д. Мы хотим сделать то, что описано на странице Prettier Plugins. Как сказано на этой странице: «плагины автоматически загружаются, если они установлены в том же каталоге node_modules, где находится prettier»; так что давайте найдем этот каталог.

Следующие шаги:

1. Убедитесь, что вы уже установили расширение Prettier в VS Code
2. Перейдите в свой домашний каталог, введя cd в командной строке или открыв новое окно CLI
3. Введите ls -a, чтобы показать все каталоги, включая скрытые.
4. Если вы работаете в Windows с использованием WSL, вы должны увидеть каталог .vscode-server. Если вы работаете на macOS, это должен быть просто .vscode. Используйте cd для перехода в любой из этих двух каталогов.
6. Там должен быть каталог с названием esbenp.prettier-vscode-<version> (т.е. мой был esbenp.prettier-vscode-9.5.0). cd в него.
7. Введите npm install --save-dev prettier @prettier/plugin-ruby в CLI
8. Дождитесь окончания установки, затем перезапустите VS Code.

Теперь вы должны иметь возможность щелкнуть правой кнопкой мыши на любом документе ruby в VS Code и выбрать «format document». Возможно, по умолчанию вы также сможете форматировать документ при сохранении. Если нет, вы можете перейти к файлу настроек VS Code, выполнив следующие действия:

1. Удерживайте ctrl (или cmd для macOS) + shift + P
2. Введите settings.json и выберите «Preferences: Открыть настройки (JSON)».
3. Прокрутите json-файл вниз. У вас уже должен быть объект, указывающий prettier как форматтер по умолчанию для кода javascript:

"[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},

Добавьте следующее ниже:

"[ruby]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
},

Ваш конечный результат должен включать обе настройки:

"[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[ruby]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
},