I would like to use HTML shortcuts in PhpStorm in a way I know from other editors.
Example:
a.test.test2
should be resolved to
<a class="test test2"></a>
Is there any way to activate this? The live templates seem to work in a different way.
It's called Emmet and it works just fine in .html files.
Check if Emmet is enabled for HTML (it is by default) and ensure that you are using correct expand key (in case if you have changed it; by default it should be Tab).
Settings/Preferences | Editor | Emmet
Related
I am a beginner on the HTML format document.I just tried to use emmet like that in VSCode
".cal-row4>button.calc-button4 "
The result was like the image below.
However, I want to make the tags like the image below by using Emmet shortcuts.
It's pain in the ass to struggle with the tags and configuration for the buttons.
How can I change the settings in order to make my emmet configuration like that, when I entered a shortcut similar to my example.
I could not find how to fix it, if you know some plugins or setting to fix that, I am open to taking advice.
You should use a prettier - code formatter. It is the easiest way to format your code.
You will have to install it first and you can install it directly from the vs code.
Go to the Extensions tab and search for it and install it.
You can also configure it according to your need.
command for windows => Shift + CTRL + F
link https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
So version before 1.30 worked fine, and did close the Tags in .html file, but as of 1.30 update I can't finish and then try to close it with
I have tried to delete config.json file, also tried to turno on every possible option for auto-close and auto-complete tags in options, but nothing worked.
And Sublime it's working fine. I downloaded plugin to transfer Sublime confing into Visual Studio Code but without success. Hope you can help me out, since i've been trying to fix this problem 3 hours now.
I had the same problem, then I noticed that my select language mode was something like Django HTML. Solved after changing it.
You might have opened a file before that changed the language mode. So first, check the language shown at the bottom-right of the VS Code window (status bar), then follow the steps bellow.
Go to settings (or edit the settins.json file) and search emmet.includeLanguages, then press add item under Emmet: Include Languages. input the language you are using in item field and html in value field.
The Chrome "Inspect element" HTML editor is very easy to use with lots of cool features, I love the collapsible elements, highlighting, and live updates so I can see exactly what's happening. Usually when I'm writing I'll create an empty file and open it in Chrome so I can start there. Unfortunately I have to copy everything to the document whenever I want to save and if I accidentally click on a link I lose everything. Is there an extension or something I can use to save the file (Maybe even to google drive?) I've recently accidentally lost a bunch of work a couple times in a row so I need to change something. I've tried brackets, atom.io, shiftedit, and codepen but none of them have the convenience and features of Chrome's console.
Thanks
You can use the Workspaces feature to work with files from DevTools so changes will persist to your computer automatically. Works with all source file types.
Check out Snippets in Chrome DevTools. The code snippets are stored in the browser, and you can run them on any page/site. I find them very useful myself.
You see the DOM in the "Elements" panel. The page may have JS that changes the DOM Tree.
So what you see in the Elements panel is not the source HTML. Therefore you can't just change things in the elements panel and save the changes to your HTML file.
I'm having a new issue since moving to PhpStorm 8.0.3 Whenever I am in a *.blade.php.
Whenever I type some text and hit tab it wraps it as a xml element. I tried to disable all the the live templates, but the issue still occurs.
This is pretty annoying as I can't tab through live templates I've created.
asd \t
<asd></asd>
Does anyone know of another settings I may have over looked?
That's Emmet in action.
You can disable it if so desired, but keep in mind that this will affect other languages/formats as well (e.g. HTML/XML files).
Settings (Preferences on Mac) | Editor | Emmet | Enable XML Emmet
I have a SCSS file I am currently working on. The indentation is 4 spaces, but for some reason PHPStorm only moves the cursor 2 spaces every time I tab. Is there a way to change this? Strange thing is I have other files in the project (mostly JS) and they are tabbed 4 spaces.
Settings/Preferences
Editor | Code Style
Now select your desired language (as it's configured on per language basis) and check the option on the "Tabs and Indents" tab.
If you are using the actual Tab symbol for intents then you will see the changes straight away. But if you use Space then you will need to invoke Code | Reformat Code (or similar Code | Reformat File...) to see the changes in the indents.
In case if you have changed the settings in Code Style but still see the old/different settings being applied: check if you have .editorconfig file(s) in your project and EditorConfig is enabled (by default).
The settings from such a file will overwrite your Code Style settings (it's expected as it's the nature of such files). In this case you will need to edit your .editorconfig file (or disable EditorConfig integration).
P.S. I prefer setting the basic settings (like indent size, indent symbol etc) in the .editorconfig file. It's portable, flexible, and allows setting up different settings for files that do not have dedicated Code Style settings in the IDE.
After applying the settings, the tab will not apply right away. For this to work you have to Code -> Reformat Code
You can set the tab and indent for each language you code in.