In PhpStorm, when I type li and press tab, it auto-completes with <link rel="stylesheet" href="" > I want it to auto-complete with <li></li> instead.
However, looking at the settings, this is what it should already be doing...
in the "Live Template" settings, it looks like this:
So according to these settings, li should autocomplete to <li>...</li>, and link should auto complete to <link rel="stylesheet" href="...">. Which would be great. But the li live template never works, it seems to be giving priority to the link live template.
How can I get the li live template to work, without disabling the link live templates?
Update:
Here's a gif of what happens in a blank "blade" scratch:
I also discovered that this only happens in Laravel blade files. When I tried it in an HTML scratch note, it works (a li element was auto-completed)
If I disable the live templates in zen-html for "link", then it also works (but I'd rather not disable them)
Other details:
PhpStorm 2019.3.4
66 "bundled" plugins (I haven't changed these from default settings)
downloaded plugins: .env files support, BrowseWordAtCaret, Laravel, Solarized Themes
As per your gif the code completion popup has different Live Template entry selected when you hit Tab.
If you close the completion popup before that (with Esc) it will expand into <li></li> as expected.
In any case, this looks related: https://youtrack.jetbrains.com/issue/WI-50106. Ticket says it's fixed for next major version (2020.1)
Please try 2020.1 Beta / EAP build to see if this will work for you: https://www.jetbrains.com/phpstorm/nextversion/
Related
I want to understand what changes are made to the html of a webpage when I use an image carousel. When I go to the next image in the carousel the html of the page updates. I would like to get a copy of the updated html so I can run diff and compare the changes to the original html.
I am interacting with the webpage through Chrome but only have access to the publicly-available source code at the moment.
I have been using Chrome's Inspect Element panel. In the 'Elements' tab I can see the html changing when I move the carousel to the next image. Despite watching the html update in the 'Elements' tab, each time I try to save the html I can only save the original html at best. Here is what I've tried:
Open 'View Source' and save the source. In hindsight, I realised this fetches the source code fresh instead of loading the source code of the current view I'm looking at.
Save the page directly from the page I'm on.
Go to the 'Sources' tab in 'Inspect Elements' and save from there.
Try to save from the 'Elements' tab directly, but I cannot figure out a way to do this. There is no save option and I cannot select the text to copy and paste.
I've tried Googling and found related-sounding headings but these contained unrelated content.
Tried Firefox's Inspect Element, which at appears to be built on the same functionality. I wonder if it's built on the same engine?
I am using Chrome 84 on Linux Mint 19 but I would be willing to use a different browser or other application that would work on my system.
I hope this is the correct Stack Exchange for this question. I initially looked at webapps.stackexchange but that didn't seem as good a match once I scanned through other questions.
In the 'Elements' tab of Inspect Elements right click on an html tag, for example <html>, and select 'Copy OuterHTML'. Paste the selection into a text editor.
This works with both Chrome and Firefox. Firefox also gives the option to 'Copy InnerHTML'. The difference between the two is that 'OuterHTML' copies the opening and closing tags while 'InnerHTML' only copies the contents within the tags.
I'm trying to track down the source of some bad styling in the browser, but when I click through to the source of it from the Styles pane, I'm taken to one of many inline <style> blocks that are automatically generated on the page, which after a certain point, is truncated with …, as seen below. If I try to "Edit as HTML" or other methods to copy the block's contents, it doesn't expand this. Is there any way to see the full source of it?
Firefox can get the full style text.
I am using CODA 2 for mac and I want the editor to complete my closing Tag!
example:
I am typing:
<div>
I want the editor to autocomplete the
</div>
tag
I have already checked the plugin store of coda: https://panic.com/coda/plugins.php
but without success.
Any idea?
Simply use a editor as visual studio code or sublime text. Every editor doesn't contain the support for auto closing tags
just type </
Its not a plugin as such but this is how you complete tags in Coda2.
I am using Sublime Text to code my website where I have a JavaScript file with a lot of functions. I use those functions quite frequently and every time I do, I have to type the whole function out.
I noticed that for each function, I could create a Sublime Text snippet with a shortcut. However there is a huge list of functions and they keep changing.
Is there a way where in I could just import this JavaScript file and this snippet file is created, such that I have my autocompletes ready to use?
A simple snippet that creates three opening and closing p tags:
<snippet>
<content>
<![CDATA[
<p>
$1
</p>
<p>
$2
</p>
<p>
$3
</p>
]]>
</content>
<tabTrigger>p3</tabTrigger>
<scope>text.html</scope>
</snippet>
Save it as html-p3.sublime-snippet in (Mac OS X) /Users/yourname/Library/Application Support/Sublime Text 2/Packages/User and you can enter p3+tab to create three <p> tags. The $1, $2, $3 are where your cursor will jump after you press tab. This allows you to easily add content without having to select manually.
This great blog post explains everything you need to know about Sublime Text snippets:
You can use snippets for CSS as well as HTML (actually, you can use snippets with any language or text that works inside Sublime Text).
To summarize, you can put all of your function snippets in between the <snippet><content><![CDATA[ *content here*]]></content></snippet> and save it as a .snippet file in the default preferences folder of Sublime Text.
Sublime Text should automatically autocomplete the function names (not the parameters) if everything is in one big file. The only possible issue I can think of is that Sublime Text doesn’t recognize the file type. Check if View → Syntax is set to JavaScript.
If you want full autocompletion with parameters, try Tern for Sublime.
You can try javascript plugin for sublime which will help in auto completion while writing code in js.
Here is the list of javascript plugin:
http://www.sitepoint.com/essential-sublime-text-javascript-plugins/
Here is the way to setup plugin in sublime:
How to install plugins to Sublime Text 2 editor?
I created a javascript file in Plunker and I want to debug it. When I open 'Sources' panel, I don't see js file that I created. I only see plenty of Plunker js files. Please advice. Thanks
Another way is to put this in your javascript file
debugger;
and leave the console open, which will force the debugger to not only stop there but to also open the file.
You have two main options to drill down to the source file that you created.
1. Use the pop-up window mode of the preview panel
By default, the previewer runs inside an <iframe> inside the plunker webapp. You can ask plunker to show the previewer in a separate window by clicking the blue expand icon in the top right of the preview window. If you open dev tools for the pop-up window, you will only see your source files.
2. Right click the preview and hit inspect element
Doing it this way will let you use the embedded, live preview and will give you a shortcut to drill down to the DOM associated with your code.
The picture is worth thousand words...
F12 and then select sources; plunkerPreviewTarget has the source code
A quicker way I found is to simply grab the unique id of your plnk.
In normal 'edit' mode URL will be something like
http://plnkr.co/edit/P0fqZG6G6khKKrtfBkDP?p=preview
Simply append this id - P0fqZG6G6khKKrtfBkDP to the URL
http://run.plnkr.co/plunks/ therefore becoming
http://run.plnkr.co/plunks/P0fqZG6G6khKKrtfBkDP/
Important: Make double sure you add the trailing /
Open new URL in a new chrome window
Hit F12 in chrome, voila native angular JS debugging for your plnk
Note: You can then continue editing in plnkr, saving, and simply refreshing this URL when debugging, to maintain your active debugging session.
This may change, but currently on Chrome 47.0.2526.111 m on Windows 10, 64 bit, this is how you can find your plunk source files:
Open developer tools (F12)
Open sources
Look for run.plnkr.co
Expand this to show a single directory with a cryptic name
Inside, you will find your files so you can start debugging