Tabs and Indents are 2 spaces despite setting at 4 spaces

Hi there,

1) "Settings | Editor | Code Style" -- try disabling "Detect and use existing file indents for editing" in case if you have it enabled (it is by default). NOTE: re-opening file in editor may be required.

2) Do you have any .editorconfig files anywhere in the path of that file? Settings from .editorconfig have priority over (will overwrite) your IDE settings.

Thanks, .editorconfig was the reason :)

Recommendation for an enhancement to IntelliJ

If a user (me) changes the tab settings when an .editorconfig file exists, please tell me that my changes may not be used in the current project because a file (.editorconfig) will override the IDE settings.

I changed every language setting, and was about to post a question titled

Javascript indent change from 2 spaces to 4

when I found this post.

@PatS2265

It's there: "Settings/Preferences | Editor | Code Style"

If all solutions aboved you try is not working, try restart IDE.

I somewhat agree with @PatS2265. I know the warning exists in the settings, but because that option is on by default, I never actually saw the warning.

On the flip side, that's probably a decent amount of work just to stop bafoons like us from letting our own settings override ourselves 🙃

I gave up on the ( TAB ) indent for right indent on IntelliJ with Vim plugin; my fallback is to mouse select multiple lines and indent them to the right with a ( SHIFT + > ) combination.   This works for IntelliJ 2019.2 on a Mac.

For me, the problem was that PhpStorm was incorrectly detecting my mixed PHP/HTML file as a Vue file, and was applying the default Vue code styles instead of the expected PHP and HTML rules. I got around this by changing the Vue code styles to match my PHP/HTML indent settings, but I couldn't figure out how to force PhpStorm to stop detecting my regular PHP/HTML files as Vue.

@Cmmcneil

1. Why do you think such file is treated as Vue one (ignoring the code style thing) -- any visual indicators (like file icon etc)?

2. Do you actually use Vue in this project? If not -- other projects?

Andriy Bazanov

After further testing: the indentation for the PHP sections of the code used the PHP code styles as expected. It is only the HTML sections of the file that are using Vue rules instead of HTML rules.

I'm not sure why the HTML in the files in question is being treated as Vue, when there's no <template> tags and no .vue file extension or any visual indicators. The file extension is .php, the file icon is the regular php one. I am using Vue in another part of this project, but only as a plugin and not as a complete framework (no .vue files).

When I go to "Code > Configure Current File Analysis..." it shows PHP and Vue as the two languages, but if I click "Configure Inspections..." in this menu, the menu closes and nothing happens:

@Cmmcneil

AFAIK this behavior is activated by Vue-related entry in your package.json. If you do not actually use Vue, consider disabling the plugin then (surprisingly it messes up a bit of things in PHP files, sometimes in in unexpected places, like https://youtrack.jetbrains.com/issue/WEB-43037)

Anyway, accordingly to https://youtrack.jetbrains.com/issue/WEB-47948 this is fixed for next minor 2020.3.1 version, Preview/EAP build of which has been published earlier today: https://blog.jetbrains.com/phpstorm/2020/12/phpstorm-2020-3-1-preview/ -- give it a try.

Thank you very much Andriy. Sharing a project with a coworker using VS code, .editorconfig was the issue. That's now clean code in front of me, love it.

I'm now ripping my hair out over this because modifying any line in the file is creating indents with 4 spaces where most of the file's indents are Tabs, and ultimately builds up some wall-of-pink lines where only indents were changed. I didn't make this file. I'm sorry that the people before me used mixed indentation.

I did a search for 4 spaces; the unhighlighted indents are tabs:

No matter what I do, this happens in this file (and there's many in the repo like it).

It's a .php file, my screenshot is inside of HTML tag `<script type="text/javascript">` (outside of a PHP block). I set the PHP and JavaScript code style to use tabs of 4-space width (literal Tab character), I tried disabling "Detect and use existing file indents for editing", I disabled "Enable EditorConfig support" (the only editorconfig file was `vendor/twig/twig/.editorconfig`), there's no "Configure Current File Analysis" in the 'Code' menu, I'm not seeing any indication that the repo is using Vue, there's no vue specified in its composer.json, and restarting the app or invalidating caches didn't help.

I discovered I had to modify the indent setting in Code Style > Twig, but it was only a guess from the `vendor/twig/twig/.editorconfig` file being found (thankfully). There's no code in the file that's recognizable as Twig; it appears to not be intending to use it. Now I'm really frustrated.

PHPStorm should not be formatting a file as Twig if it's not implementing Twig code, and it certainly shouldn't be affecting normal JavaScript code that way, which is not the same as Twig code.

I'm using PHPStorm version 2021.2.2.

Regardless, it would be nice if there were an easier way to identify which indent setting a code context is using. I've spent almost half an hour on this.