Changing Spaces Per Tab in PHPStorm - phpstorm

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.

Related

How to align code, in PhpStorm / Intellij, using tabs (and not spaces)

I'm trying to setup PhpStorm, so I can simply press: "Reformat Code" ( Option CMD L), before each save - and then it'll make everything look right.
But I have this case, where I don't know how to make PhpStorm make the code right.
This is the code:
As you can see, then indentation is with tabs, but the aligning of the characters are with spaces.
I want it to look like this:
It would be cool to get the solution. But it would be even cooler to be able to figure out, how I could have found the solution myself.
Further info / idea: There is a Php Codesniffer from Squizlabs implemented. So I can fix is automatically by running a sniff fix-command. It would be pretty cool, to be able to automatically setup PhpStorm's Code style settings, to correspond with Squizlabs styles, without having to gradually tune the settings one thing at the time. But I haven't found that functionality.
Solution attempt 1: Read through all Settings >> Editor >> Code style >> PHP
I couldn't find anything that resembled this.
Solution attempt 2: Disable .editorconfig
I've read quite a bit about .editorconfig and it doesn't have these nitty-gritty functions here (as aligning equal signs).
But to make sure, I tried disabling it. Didn't make a difference.
Solution attempt 3: Search setting for 'align' and 'formatting'
But I didn't find anything useful. :-/
Solution attempt 4: Update PhpStorm
I was on PhpStorm version 2022.2.1.
I tried updating to PhpStorm version 2022.2.4.
This is still in progress.
Please show what you have at Settings (Preferences on macOS) | Editor | Code Style | PHP, specifically Tabs and Indents tab.
Checking Use tab character option with unchecked Smart tabs should do just that.
https://www.jetbrains.com/help/phpstorm/2022.3/settings-code-style-php.html#php-specific-formatting-settings-for-tabs-and-indents
(Pro tip: you can copy-paste your code sample in the preview area and start changing the options; the IDE will apply the changes live on the provided code sample instead of the default one.)

PhpStorm: Save as Live Template does nothing

Trying to create a Live Template in PhpStorm by highlighting a block of text, going to Tools > Save as Live Template.
When I do this, nothing happens. The Live Template dialog does not open and there is no other indication of an error. I can manually open the Live Template menu and add one there.
Is there a setting or configuration that is needed for this to be enabled?
PhpStorm 2017.1.4 on Windows 10
You can turn a highlighted block into a live template, but you need to make sure that there is no leading whitespace in your selected text, or it won't do anything, as explained in the original question.
This is likely a bug, see the issue in the comments to track resolution.

How can I configure PhpStorm to behave consistently regarding white spaces?

When I create projects in PhpStorm some files have spaces for tabs and some have tabs.
I have checked show whitespaces in settings > editor > appearance - which I am assuming I supposed to be a IDE level setting, but still the behaviour is inconsistent.
Also if a file is created by an external source, PhpStorm seems to adopt whatever spacing the file has also.
Even after enabling use tabs Phpstorm uses spaces, is this because Phpstorm is using a file-specific configuration - which is overriding both the project level and IDE level settings?
Does Phpstorm have any option which allows you to define a setting - e.g. use tabs and have the setting apply to all files, even if they were generated by a program which used spaces instead of tabs?

How to make permanent changes to a website's CSS from within the browser?

If I am trying to edit some CSS in a huge project using the built-in developer tools in Firefox (which is accessed by right click and then selecting Inspect Element), is there a way to make those changes permanent?
Actually there is a big number of style sheets and and I could not locate this one property in them? I just could not find the file which contains this property, so I want to make permanent changes to the CSS from within the browser. Is there a way?
EDIT:-
To set up in Chrome first you have to add your project file to a "Workspace", Go into dev tools Ctrl+Shift+I then click on the settings gear and on the left yoou should see Workspace.
After you have added your Project folder into a workspace close out of options and click on the "Sources" tab (still in dev tools)
Now load up your index.html from your LocalHost like you normally would. In the sources panel you should see the currently loaded page and its resources. Right click on your .css file and click "Map To File System Resource" it will bring up a search box where you can search for the corresponding .css file from your actual project folder (that is now part of a workspace in Chrome). Once you make the link Chrome is smart enough to link up any other CSS and HTML files that are in your Project Folder.
Now you can make changes in the Elements tab in Chrome Dev Tools and they changes will persist. Also in the ELements tab it will show you what css file and what line any given Style is originating from!
The best thing about this is if you use Sass or Less then it will map your Scss files back to the CSS styles being processed in Chrome. (please note if using Sass and Less you have to have CSS source maps turned on)
If you don't want to do this by hand, there is a plugin for FF called Stylish that allows you to define rules-based style tweaks.
EDIT
I mention this only because it allows you to publish a set of style changes that any Firefox client can pick up and install to a specific installation. Since one can't "permanently" change the contents of remote style information, the only solution is to manipulate it on a semi-permanent basis on each user-agent that needs the changes.
You can use the Web Developer Toolbar for this matter. By going to CSS menu and then to 'Edit CSS' where you can edit and save your changes. Il also provides tools for identify which files are relevant and modify them manually. Also you may try Firebug extension where you can do similar things.
Links to both here:
https://addons.mozilla.org/firefox/addon/web-developer/
https://addons.mozilla.org/firefox/addon/firebug/
If you have installed Firebug you could install cssUpdater to simplify the process of saving changes.
https://addons.mozilla.org/firefox/addon/cssupdater/
You can take a look at userContent.css:
http://www-archive.mozilla.org/unix/customizing.html#usercss

IntelliJ: Specify per-project tab size

Is there a way to set the tab size in IntelliJ for a single file only, or at most for a single project?
I use a tab size of 3 for all my code; however, I'm collaborating on a project with an author who prefers a tab size of 4. Is there a way to set the tab size to 4 for only those files that are part of this project?
Open the Settings dialog by navigating to File->Settings. Under Project Settings [yourproject] on the left side of the dialog, navigate to Code Style->General. The Tab size is configurable on that pane, and the value you provide applies only to the project named yourproject.
for those who can't find project specific setting
press Command + , will give you the preference you need
You can set a global format for the project and "reformat code" to conform to each one's preferred style.
The problem will be your version control system. If you oil can back and forth between 3 and 4 spaces you'll never be able to see meaningful changes.
Best to settle on one standard and stick to it.
The idea of a private project isn't clear to me. It comes down to your version control system. If it's possible to check code in and out so that tab size doesn't affect commits, then I'd say you can be independent. If you share the common code by adding a compiled 3rd party JAR, then I'd say you can be independent.
This is not an exact answer to your problem, but IntelliJ can currently (4/2013) "only" handle per-language tab-settings, which is - to be honest - totally okay as language and file type are usually "the same". So this your solve your problem.
You can find the setting in File -> Settings -> Project Settings -> Code Style -> >YOUR LANGUAGE.