tl; dr: Установите и настройте эти плагины, и вы сможете приступить к разработке Laravel / Vue в VS Code:

Если вы еще не слышали о VS Code, вы, вероятно, жили под камнем. Это молниеносный редактор кода, созданный на платформе Electron, с огромной степенью расширяемости и огромной библиотекой тем и плагинов, любезно предоставленных Microsoft. Я использую его почти два года, и последний год постоянно после переходного периода, часто переключаюсь между ним и PHPStorm.

Почему я остановился на VS Code? Честно говоря, самым большим фактором для меня была скорость. Загрузка одного или нескольких экземпляров VS Code не является проблемой. Он загружается очень быстро, даже со всеми перечисленными выше плагинами. Открывая целые проекты, выполняя поиск с помощью регулярных выражений, находя определенные блоки кода или просматривая массивные файлы журналов, у меня никогда не было сбоев в скорости или быстродействии. Также очень просто использовать его в командной строке, набрав code . в соответствующей корневой папке проекта.

Хотя эти плагины делают его отличной IDE для разработки Laravel и Vue, есть некоторые предостережения. Глубокая интеграция с кодом Laravel для таких вещей, как автозаполнение, не идеальна, и некоторые фасады / взаимосвязи не отображаются; компромисс между скоростью и стоимостью. С учетом сказанного, давайте погрузимся в некоторые плагины!

Фрагменты Laravel Blade

Это, пожалуй, самый необходимый плагин для разработки Laravel на VS Code. Он не только обеспечивает соответствующую подсветку синтаксиса html / php для шаблонов Laravel Blade, но также добавляет для них функциональность emmet. Ввод foreach и нажатие табуляции в Blade-файле приведет к автозаполнению в структуру цикла foreach. То же самое работает для других методов Blade, таких как component, switch и slot.

Просмотр Laravel Goto + Контроллер Laravel Goto

На самом деле это не обязательно, но определенно полезно для того, чтобы сделать VS Code более похожим на IDE, эти простые маленькие плагины подчеркивают имена представлений и контроллеров. Удерживая ctrl (или cmd) и щелкнув по ним, вы откроете соответствующий файл в новой вкладке. При использовании Goto Controller, если вы включите метод в файл контроллера (например, PostController@show), вы сразу перейдете к нужному методу.

PHP Intelephense

Это, пожалуй, самый мощный плагин для превращения VS Code в полноценную IDE. Есть несколько высоко оцененных плагинов PHP Intellisense, все с разной степенью скорости, надежности и глубины кода, но этот занял для меня первое место, когда дело доходит до разработки Laravel.

Некоторые из основных функций, которые вы получите с ним, - это базовые предложения по классам, подсказки об общих методах / функциях PHP и некоторые функции автозаполнения с ограниченным объемом в вашем приложении. Однако, чтобы получить по-настоящему полноценный опыт, я настоятельно рекомендую вам установить и настроить помощник barryvdh's Laravel IDE вместе с любым другим проектом. Он обеспечивает гораздо более глубокую интеграцию в среду Laravel (большой из них - предложения по отношениям Eloquent).

Кроме того, рекомендуется добавить следующее в файл settings.json, чтобы предотвратить переполнение окна автозамены множеством общих предложений PHP: "php.suggest.basic": false

Ветур

Плагин VueJS. Не только подсветка синтаксиса для компонентов Vue, но также завершение по табуляции emmet, проверка синтаксиса / ошибок и довольно продвинутое автозаполнение с предложениями кода и подсказками для всех собственных методов Vue. Например, на скриншоте выше, если вы переместите собственный элемент transition, вы увидите всплывающее окно и следующий контент:

‹Transition› служит эффектами перехода для отдельного элемента / компонента. Он применяет поведение перехода к обернутому содержимому внутри.

Если вы включаете Sass / stylus в свои компоненты Vue и у вас установлены соответствующие плагины, вам также будет добавлена ​​соответствующая подсветка синтаксиса и форматирование с помощью Vetur.

С помощью плагина ESLint и после некоторой базовой настройки проекта на странице Документация Vetur вы можете без проблем линтировать свои компоненты Vue.

На этом пока все! Эта установка очень порадовала меня за последний год, когда я разработал десятки проектов Laravel и Vue. Если у вас есть предложения по дополнительным плагинам или настройкам, которые упростят работу с ними в VS Code, не стесняйтесь дайте мне знать!