{"id":92623,"date":"2020-11-06T16:17:06","date_gmt":"2020-11-06T15:17:06","guid":{"rendered":"https:\/\/blog.jetbrains.com\/?post_type=phpstorm&p=92623"},"modified":"2020-11-09T09:56:48","modified_gmt":"2020-11-09T08:56:48","slug":"phpstorm-2020-3-eap-6","status":"publish","type":"phpstorm","link":"https:\/\/blog.jetbrains.com\/pt-br\/phpstorm\/2020\/11\/phpstorm-2020-3-eap-6","title":{"rendered":"PhpStorm 2020.3 EAP #6: Xdebug 3, Tailwind CSS, Git stage, and More"},"content":{"rendered":"

This build introduces support for the upcoming Xdebug 3, Tailwind CSS, improvements for Twig, Git stage support, and the ability to generate multiple files with templates.<\/p>\n

If you prefer watching to reading, check out the Coming in PhpStorm 2020.3<\/em><\/a> series on our JetBrains YouTube channel<\/a>!<\/p>\n

<\/i>Download PhpStorm 2020.3 EAP<\/a><\/p>\n

<\/p>\n

Xdebug 3<\/h2>\n

If you are a fan of dump-and-die debugging, consider giving the new Xdebug 3 a try. The configuration is now much faster and easier to set up.<\/p>\n

Let\u2019s add the following Docker configuration to our project and create a remote interpreter based on it.<\/p>\n

Dockerfile<\/em><\/p>\n

\r\nFROM php:8.0-rc-cli\r\nRUN mkdir -p \/usr\/src\/php\/ext\/xdebug && curl -fsSL https:\/\/pecl.php.net\/get\/xdebug | tar xvz -C "\/usr\/src\/php\/ext\/xdebug" --strip 1 && docker-php-ext-install xdebug\r\nRUN docker-php-ext-enable xdebug\r\n<\/pre>\n
docker-compose.yml<\/em><\/p>\n
\r\nversion: '2'\r\nservices:\r\n debug:\r\n   build: .\r\n   volumes:\r\n     - .\/:\/var\/www\/html\r\n   environment:\r\n     XDEBUG_MODE: debug\r\n<\/pre>\n
To configure Xdebug X, the only thing we need to specify is XDEBUG_MODE=debug<\/code>.<\/p>\n
Xdebug’s default debugging port has changed from 9000 to 9003. To ease migration, PhpStorm will be listening to both ports by default. You can adjust the port and other settings for Xdebug under Preferences\/Settings | Languages & Frameworks | PHP | Debug<\/em>.<\/p>\n
\"\"<\/p>\n
Let\u2019s debug a simple script. We\u2019ll add a breakpoint and run the default debug configuration Debug \u2018index.php (PHP Script)\u2019<\/strong> from the file context menu.<\/p>\n
\"\"<\/p>\n
Learn more about Xdebug 3 in the Upgrade guide<\/a>.<\/p>\n
Xdebug Cloud<\/strong>
\nWe\u2019ve been working closely with Derick Rethans<\/a> to support the upcoming Xdebug Cloud<\/a>. It is already included in PhpStorm, and we\u2019ll announce full support as soon as Xdebug Cloud is generally available. Stay tuned!<\/p>\n
Tailwind CSS support<\/h2>\n
One of the most anticipated improvements, support for Tailwind CSS, will finally land in PhpStorm 2020.3! Let\u2019s see how this can help you work with this popular framework more efficiently.<\/p>\n
First, you can now expect PhpStorm to autocomplete Tailwind classes in your HTML files and after the @apply<\/code> directive.<\/p>\n
\"tailwind-completion-after-apply\"<\/p>\n
You\u2019ll also see completion suggestions for pseudo-class variants.<\/p>\n
\"tailwind-completion-for-pseudo-class-variants\"<\/p>\n
If you hover over a class in your HTML and CSS files, the IDE will show you the preview of the resulting CSS. You can also see this preview when autocompleting your code with the help of the Documentation<\/em> popup (F1<\/kbd>\/Ctrl+Q<\/kbd>).<\/p>\n
\"tailwind-class-declaration-preview-from-doc-popup\"<\/p>\n
Besides that, PhpStorm will support the customizations you make using tailwind.config.js<\/em> files. The IDE will analyze those files and provides completion based on your customizations. If you define a custom theme with new colors, for example, you\u2019ll see newly generated classes with the name of the custom color in the completion popup.<\/p>\n
\"tailwind-customization-support\"<\/p>\n
Lastly, Tailwind CSS support is provided through the corresponding plugin<\/a> bundled with WebStorm. If you\u2019re using any other JetBrains IDE and want to take advantage of the new functionality, you can install the plugin from Preferences\/Settings | Plugins<\/em>.<\/p>\n
That\u2019s all for now about Tailwind CSS support. Please try the existing features and share your feedback<\/strong><\/a> with us<\/strong>! We plan to improve this support further.<\/p>\n
Highlight and Rename variables in Twig<\/h2>\n
Select a variable or put the caret on it to highlight all its usages in the template. In addition to highlighting, there is also a Rename refactoring<\/strong> available now. It works pretty much like it does in PHP files. Use the Shift + F6<\/kbd> shortcut and type a new name.<\/p>\n
\"\"<\/p>\n
Templates can now generate multiple files<\/h2>\n
When you frequently need to create similar boilerplate files, it makes sense to create file templates. With PhpStorm 2020.3 it will be possible to generate a bunch of files at the same time. You can create a skeleton for a module or a controller-view combo.<\/p>\n
Go to Preferences \/ Settings | Editor | File and Code Templates<\/em> and click \"\" to create a new template, and then click the Create Child Template File<\/strong> icon \"\".<\/p>\n
You will see a new node appear under the parent file.<\/p>\n
In the File name<\/em> field, you can specify a pattern to generate a file name and path using predefined variables like ${NAME}<\/code>.<\/p>\n
\"\"<\/p>\n
Your customized template is ready to use. Let\u2019s see how the files are generated:<\/p>\n
\"\"<\/p>\n
Git stage support<\/h2>\n
Note:<\/strong> This functionality is only available for the Commit tool window. You can enable it in Preferences\/Settings | Version Control | Commit<\/em> by ticking the Use non-modal commit interface<\/em> checkbox.<\/p>\n
PhpStorm 2020.3 will come with support for the Git staging area. To turn it on, tick the Enable staging area<\/em> checkbox in Preferences\/Settings | Version Control | Git<\/em>. Once you do, the support for changelists will be disabled.<\/p>\n
If you go back to the Commit tool window using Cmd+0<\/kbd> \/ Alt+0<\/kbd>, you\u2019ll see that it contains staged and unstaged files.<\/p>\n
Stage files<\/strong> by clicking the + icon near them.
\n\"\"<\/p>\n
Stage specific lines<\/strong> using the gutter icon near the changes in the editor. This way you can commit some changes in a file and keep the rest uncommitted for further work.
\n\"\"<\/p>\n
Stage for the diff<\/strong> is also accessible via the gutter icon.
\n\"\"<\/p>\n
When you click Commit<\/em>, all staged files (or specific lines) will be committed.<\/p>\n
\n
The full list of changes in this build is available in the release notes<\/strong><\/a>.<\/p>\n