Vue CLI проект + ESLint + Prettier + WebStorm

Заметил что у новичков возникают проблемы с ESLint + Prettier при создании проекта через Vue CLI и последующей работой с ним в WEbStorm, поэтому решил написать небольшой мануальчик.

На самом деле всё достаточно просто, создаете проект через Vue CLI и на одном из шагов выбираете ESLint + Prettier.

Затем открываем проект в WebStorm и видим, что при неправильных отступах и т.д он подсвечивает красным подчеркиванием неправильные моменты.

Что бы автоматически поправить код есть несколько решений. Для начала можно поставить курсор на место красного подчеркивания, нажать Alt+Enter и затем выбрать пункт Fix Current File после чего всё отформатируется исходя из правил Prettier.

Но каждый раз делать это надоедает, поэтому проще сразу для проекта выставить автоматическое форматирование при сохранении проекта.

Жмём Ctrl+Alt+S, в поиске вбиваем Prettier, в выпадающем списке "Prettier package" выбираем путь до Prettier, затем в поле "Run for files" добавляем vue и scss. Затем ставим галочки напротив пунктов "On Reformat code action" и "On Save".

После всего этого сохраняем настройки, перезагружаем WebStorm и наслаждаемся автоматическим исправлением форматирования при сохранении файла или при сочетании клавиш Ctrl+Alt+L

Подписывайтесь на канал: https://t.me/stuffy_vuejs