PhpStorm single click preview like Sublime Text - phpstorm

At my new job I have to work with PhpStorm. I come from Sublime Text, and what bothers me most about PhpStorm is the lack of a single click preview of the files. In stead, it opens the files for editing and adds them to active tab, leaving me with A LOT of useless tabs.
I searched here on StackOverflow and Google, but I seem to be the only one who is annoyed by this. In Sublime it goes to edit mode only after a double click. Is there a setting or plugin to have it like in Sublime?

It's a native feature these days:
Settings... / Editor / General / Editor Tabs / Opening Policy > check "Enable preview tab"
on version PhpStorm 2022.3.2

Single Click To Open File
By default to open a file in phpstorm you have to double click it. I found this to be very annoying. Luckily you can change this to be a single click.
Steps:
Click the gear icon.
Make sure 'Autoscroll to Source' is checked
Make sure 'Autoscroll from Sourcce' is checked
http://www.ryanwright.me/cookbook/phpstorm/single-click-open-file

There is no such functionality currently available. I may only suggest to use View | Quick Definition to preview files.
Other than that: https://youtrack.jetbrains.com/issue/IDEA-130918 -- watch this ticket (star/vote/comment) to get notified on progress.

Welcome in late 2019 - we got a plugin for this now:
Plugin: https://plugins.jetbrains.com/plugin/12778-quick-file-preview
Plugin Source: https://github.com/SeeSharpSoft/intellij-file-preview
IntelliJ Issue: https://youtrack.jetbrains.com/issue/IDEA-130918
Don't forget to disable the "Autoscroll to Source" Feature, to get the full advantage of the plugin!

The closest you'll get right now is to enable 'Scroll To Source', however this will actually open the file in another tab, it will not be a preview.
Open the Project, Favorites, etc. side bar (cmd + 1 or ctrl + 1)
Click the gear in the top right
Select 'Scroll to Source'
Note 'Scroll to Source' can be enabled at the same as 'Scroll from Source', just make sure if you click on one file you wait until the sidebar catches up to click another, otherwise the sidebar will autoscroll back and forth between the two. You'll have to click one of them to break that loop.
Read more on JetBrains' website

This is now available as a native feature in the latest version: 2020.3!
See this comment on the YouTrack link someone posted above https://youtrack.jetbrains.com/issue/IDEA-130918#focus=Comments-27-4500169.0-0
Also on the 2020.3 feature list under User Experience there's a mention of "preview tab" here https://blog.jetbrains.com/idea/2020/12/intellij-idea-2020-3/

Related

How to not close the editor window when closing the last tab in VS Code

If there's only one tab on an editor in VS Code, the default behavior is to close the editor right then and there.
Personally, and I think many others agree with me, this behavior is very annoying since the programmer would rather preserve the layout he or she created for the project's workspace.
How do I change this behavior?
I've found discussions on this topic, but all of the solutions do not seem to be the ideal one of simply leaving the editor open but empty. Most of them simply delete the related shortcuts, which seems to me like cutting your arm off just because you broke it.
Anyway, here are some useful links:
Superuser StackExchange: How to prevent VScode from closing editor when pressing ctrl+w with no tabs open?
Issue #54492: Remove CtrlCmd+W keybinding to close window when no editors are opened
The behavior of the shortcut ctrl+w is as-designed closing the application
Actually, VSCode 1.57 (May 2021) will change that:
Removed Cmd+W / Ctrl+W as keybinding to close window when no editor is opened
We have gotten feedback that users are frustrated when the window suddenly closes after having closed the last editor via rapid Cmd+W / Ctrl+W usages.
A quick poll in the team also revealed that many had the keybinding for closing a window unassigned, so we went ahead and removed Cmd+W / Ctrl+W as keybinding to close window when no editor is opened.
You can easily bring the keybinding back by configuring it as follows:
{
"key": "cmd+w", // use "ctrl+w" on windows
"command": "workbench.action.closeWindow",
"when": "!editorIsOpen && !multipleEditorGroups"
}
Note: on all platforms there is a dedicated assigned keybinding to close the window:
macOS: Cmd+Shift+W
Linux: Alt+F4
Windows: Alt+F4
If what you are looking for is to preserve empty groups as well as empty editor windows, there is an option in the preferences that gets you almost all of the way:
"workbench.editor.closeEmptyGroups": false
This has the effect that an editor group will stay open even if the last tab within it is closed.
but all of the solutions do not seem to be the ideal one of simply leaving the editor open but empty
Reddit has an answer providing you the ideal solution of leaving the editor open, but empty: close all tabs but leave editors open.
In brief, they suggest to use in rapid succession the "close all editors" and the "three column editor layout".
They suggest to create a macro like:
"macros": {
"closeAllTabs": [
"workbench.action.closeAllEditors",
"workbench.action.editorLayoutThreeColumns"
]
}
then bind it to a key combination. macrosRe is advised.
The behavior of the shortcut ctrl+w is as-designed closing the application, see #49023. It is advisable to remove the shortcut and cut the arm, since it is design to work like that. However, for version 1.43.1 a new comment was posted this year on a thread you linked. You might want to have a look at it as well.

PyCharm to open new file in the tab right next to the right of current-active tab?

Currently with PyCharm 2016.03, when I open new file, the tab opened at the end of the tab pane.
I google and see one old post about this - it was a open right next feature in the past and changed to open at the end now.
So if you know, if possible, how to switch tab-opening mode in PyCharm, please share!
That config is no longer available (at least in the 5.0.5 Pro version). You still have tabs appearance and closing policy configs under Editor -> General -> Editor Tabs menu, but no opening policy.
As a workaround you can left-click and drag a tab in whichever position you like.

Black-boxing script option in Chrome Developer tool

I have an issue with the Chrome developer tool.
My version is Version 46.0.2490.71 (64-bit)
According to online tutorials, I can go to Sources tab, right-click a script file and there will be Blackbox Script option to choose.
However, I see no option in my chrome. How do I enable that option since I have no knowledge about regex?
Another problem: The scripts still got debugged even though I added them to blackbox list. Weird!!
One more thing i want to ask is how I blackbox an "unlimited" amount of VM files?
Open devtools settings (press F1 once in devtools or open from the menu)
Go to blackboxing (see image below)
Add a pattern, for example:
node_modules
angular
rxjs
It uses regex syntax in case you need something more specific.
The nice part about blackboxing library/framework scripts is that it makes it easier to see in stacktraces from where the error was triggered in your own sources.
EDIT
As other pointed out, since this answer was posted you can directly blackbox a script with a right click on the source file in devtools.
However head off to the blackboxing settings UI for more control.
There's an easier way in Chrome 60 (and possibly older):
Open the source file in Chrome dev tools (in the source tab)
Right Click the column that displays the line numbers
Select "Blackbox Script"
EDIT: As svict4 pointed out, in Chrome 64, you can also right click anywhere on the script
It seems they changed from blackbox to Ignore List.
Also press f1 in devTools and find Ignore List
Not sure if Chrome has changed too, but on Chromium Edge, the option is named "Mark as Library Code" and "Mark as my Code" to disable it. You have to right click on the code and not on the file/tab. Right clicking on Line numbers works too.

PhpStorm - Highlight active file in project navigator

Does anyone know how to highlight the current file in the project navigator, or a hotkey to expand folders to the active file?
I have looked around and couldn't find anything that points to this as an option.
Here is a nice feature: Autoscroll to Source and Autoscroll from Source.
It is available in all IntelliJ products .
On Demand
Should be used if you do not like when your Project View panel gets changed/moves without your consent.
Navigate | Select in... | Project View
Alt+F1, 1 for Windows/Linux
⌥+F1, 1 (or fn+⌥ Opt+F1, 1) for Mac OS
You may also click on "target like" icon on actual Project View panel with your mouse:
If you wish to use shorter/single shortcut instead of standard 2-step shortcut:
install "Extra Actions" plugin
assign custom shortcut to newly provided "Select in Project" action
As of some 2017.x version (or maybe even 2016.x) the IDE has own dedicated Select in Project View action (so no need for additional plugin). You can find it in Keymap under the Other branch (hint: use search box to narrow the list).
Automatically
Can be used if you do not mind (or even want) to have Project View panel keep focused on currently edited file (so it scrolls/moves up and down/expands when needed).
NOTE: with frequently switching between the files (e.g. CSS & HTML) when you have a lot of files in your project such "scrolling" may become quite annoying pretty fast (especially if such files are located in the invisible-right-now part of the project tree).
Activate Autoscroll from Source option in Project View panel (right click on tool window header bar/title or use menu under "gear" icon):
In modern versions (2020.3 and newer) that option was renamed and is now called Always Select Opened File:
Just click the circular icon (with tooltip Scroll from Source) to navigate in the project directory tree and highlight the corresponding active file in the PhpStorm editor.
On PhpStorm 2020.3 you have to click the cog icon in the project pane and select Always Select Opened Files:
The above answers are all valid but unfortunately you'll have to enable them for each project.
There's a plugin from Jetbrains that will enable this behaviour by default for all new projects.
http://plugins.jetbrains.com/plugin/7575?pr=

chrome devtools: Revisions of resources not working

In Chrome, you can edit your resources in line and Chrome will generate revisions of that resource. Here the documentation: http://code.google.com/intl/en-US/chrome/devtools/docs/elements-styles.html#persist
Sadly, it's not working here, and I don't know how to enable it. It is not possible to expand the file in the resource tab to see the revisions.
Using Chrome 15.0.874.121 on MacOS here. A colleague of mine tried the developer channel, but it's still not there. But I saw a demo of it at the Google Developer Day.
This works in 15.0.874.121 as well -- just double-click on a text content of a CSS or JS file in the Resources panel, type something and press Cmd+Enter. You will see the lines that you added displayed with a green background, and the edited resource on the left will become expandable.
Alternatively, the Dev channel has an "Edit" button (a pencil with dots) below the resource contents if the resource is editable. You can click it to toggle the resource editing.
It works fine on ToT and on dev channel 17.0.942.0 dev.
The scenario.
open inspector's Scripts panel
start editing with double click
save the revision with Cmd+S
optional exit from editing mode Shift-Enter
open Resource Panel
click on the right arrow symbol close to edited file.