Phpstorm Emmet



    MacOSLinux

Ejemplo de uso de Emmet con phpStorm. Which 'Emmet plugin'? Emmet support is bundled with PhpStorm and you do not need anything extra. It works fine here (tried in plain.html file).The result of expanding. Browse other questions tagged javascript phpstorm webstorm emmet or ask your own question. The Overflow Blog Level Up: Creative Coding with p5.js – part 6. How often do people actually copy and paste from Stack Overflow? Featured on Meta Stack Overflow for Teams is. Emmet (formerly Zen Coding) is a set of plug-ins for text editors that allow for high-speed coding and editing in HTML, XML, XSL, and other structured code formats via content assist.The project was started by Vadim Makeev in 2008 and continues to be actively developed by Sergey Chikuyonok and Emmet users. Since 2015 Mikael Geletsyan is responsible for UX at Emmet.

Jump to: General Shortcuts, Debugging, Find and Replace, Editing, Refactoring, Navigation, Compile and Run, Usage Search, VCS/Local History, Live Template/Snippets

Alt+0..9

Open Corresponding Tool Window

Ctrl+S

Save All

Ctrl+Shift+F12

Toggle Maximize Editor

Ctrl+Shift+A

Find Action

Ctrl+Tab

Switch Editor Tabs and IDE Tool Windows

Ctrl+Alt+S

Open Setting Dialog

Ctrl+Alt+F11

Toggle Full Screen Mode

Alt+Shift+F

Add to Favourites

Double Shift

Search Everywhere

Alt+Shift+I

Inspect Current file with Current file

Shift+F8

Step Out

F8

Step Over

F7

Step Into

Alt+F8

Evaluate Expression

Ctrl+F8

Toggle Breakpoint

Ctrl+Shift+F8

View Breakpoints

F9

Resume Program

Ctrl+F

Find

Ctrl+R

Replace

F3

Find Next

Shift+F3

Find Previous

Ctrl+Shift+F

Find in Path

Ctrl+Shift+R

Replace in Path

Ctrl+Spacebar

Basic Code Completion

Ctrl+Alt+Spacebar

Class name Completion

Ctrl+Q

Quick Documentation Lookup

Ctrl+Mouse Over

Brief Info

Ctrl+Shift+Enter

Complete Statement

Ctrl+P

Parameter Information

Ctrl+O

Override Methods

Alt+Insert

Generate Code

Ctrl+Shift+Up Arrow/Down Arrow

Move Line(Selection) Up/Down

Ctrl+Alt+T

Surround With..(Begin..End etc.)

Ctrl+/

Comment/Uncomment with Line Comment

Ctrl+Shift+/

Comment/Uncomment with Block Comment

Ctrl+I

Implements Method

Alt+Enter

Show Intention Actions and Quick Fixes

Ctrl+Alt+L

Reformat Code

Ctrl+D

Duplicate Current Line

Ctrl+X/Ctrl+C/Ctrl+V

Cut/Copy/Paste Current line to Clipboard

Ctrl+Alt+I

AutoIndent Lines

Ctrl+Y

Delete line at caret

Shift+Enter

Start New line

Ctrl+F4

Close Active editor tab

Alt+Enter

Show Intention Actions/Quick-Fixes

Ctrl+Shift+W

Decrease Current Selection to Previous State

Ctrl+W

Select Successively Incresing Code blocks

Ctrl+NumPad +/Ctrl+NumPad -

Expand/Collapse Code block

Ctrl+Del

Delete to end word

Ctrl+Backspace

Delete to word start

Ctrl+Shift+]

Select till code block end

Ctrl+Shift+[

Select till code block start

Ctrl+Shift+U

Switch case for Word at Caret or Selected block

F5

Copy

F6

Move

Alt+Del

Safe Delete

Shift+F6

Rename

Ctrl+Alt+N

Inline Variable

Ctrl+Alt+Shift+T

Refactor This(Show All Available Refactoring)

Ctrl+Alt+M

Extract Method

Ctrl+Alt+F

Introduce Field

Ctrl+Alt+C

Introduce Constant

Ctrl+Alt+V

Introduce Variable

Ctrl+N

Go to Class

Ctrl+Shift+N

Go to File

Ctrl+Alt+Shift+N

Go to Symbol

F2

Next highlighted Error

Shift+F2

Previous highlighted Error

Ctrl+G

Go to Line

Ctrl+E

Recent files Popup

Alt+F1

Select current file/Symbol in any View

Alt+Left Arrow/Alt+Right Arrow

Go to Next/Previous Tab

Ctrl+B

Go to Declaration

Ctrl+Alt+B

Go to Implementation

Ctrl+Shift+B

Go to Type Declaration

Ctrl+Alt+Left Arrow/Ctrl+Alt+Right Arrow

Navigate back/forward

Ctrl+Shift+Backspace

Go to last edit location

Ctrl+U

Go to super method/super class

Alt+Home

Show Navigation bar

F4

Edit Source

Ctrl+Enter

View Source

Ctrl+]/Ctrl+[

Move to code block end/start

Alt+Up Arrow/Alt+Down Arrow

Go to Previous/Next Method

Ctrl+Shift+I

Open Quick Definition Lookup

Ctrl+Shift+X

Run Command Line

Shift+F10

Run

Shift+F9

Debug

Ctrl+Shift+F10

Run Context editor from Editor

Ctrl+F7

Find Usage in File

Alt+F7

Find Usage

Ctrl+Shift+F7

Highlight Usage in File

Ctrl+Alt+F7

Show Usage

Ctrl+K

Commit Project to VCS

Ctrl+T

Update Project from VCS

Ctrl+Shift+E

View Recent Changes

Alt+`

VCS Operations Popup

Ctrl+J

Insert Live Template

eco

echo' Statement

fore

foreach(iterable_expr as $value){…}

forek

foreach(iterable_expr as $key=>$value){…}

inc/inco

'include'/'include_once' statement

prif

private function

prof

protected function

pubf

public function

rqr/rqro

'require'/'require_once' statement

Phpstorm

Created by rank17 on 5/10/2017. Last updated by admin on 6/16/2017

0 Comments for 'PhpStorm '

PhpStorm integrates with the Tailwind CSS framework including completion for Tailwind classes in HTML files and completion suggestions for pseudo-class variants, preview of the resulting CSS on hovering over classes in HTML and CSS files or on autocompletion. PhpStorm recognizes tailwind.config.js files and provides completion based on customization you make to them.

Before you start

  1. Make sure you have Node.js on your computer.

  2. Install and enable the Tailwind CSS plugin on the Settings/Preferences | Plugins page as described in Installing plugins from JetBrains repository.

Emmet

Install Tailwind CSS

  1. Open the embedded Terminal (Alt+F12) and type:

    npm install tailwindcss postcss autoprefixer

  2. To configure your Tailwind CSS installation, generate a tailwind.config.js configuration file in the root of your project. In the embedded Terminal (Alt+F12), type:

    npx tailwindcss init

Learn more from the Tailwind CSS official website.

Phpstorm Emmet Sullivan

Complete Tailwind classes

Phpstorm Emmet

PhpStorm autocompletes Tailwind classes in HTML files and in CSS files after the @apply directive.

PhpStorm suggests Tailwind classes for completion in JavaScript string literals.

Phpstorm Emmet Lorem

Completion suggestions are also shown for pseudo-class variants.

Preview the resulting CSS

Phpstorm Emmet Html5

When you hover over a Tailwind class in an HTML or CSS file, PhpStorm shows you the preview of the resulting CSS.

Phpstorm Emmett

The preview is also shown in the Documentation popup (Ctrl+Q) when you complete your code.

Phpstorm Emmet Php

Edit your tailwind.config.js

PhpStorm provides code completion based on the customization you make through your tailwind.config .js configuration files. For example, if you define a custom theme with new colors, newly generated classes with the name of the custom color will be shown in the completion popup.