King Java King Java - 1 month ago 9
Javascript Question

JavaScript getting under other JavaScript's hierarchy - PhpStorm

I am trying to work PHP project using PhpStorm.

I am having an issue that one JavaScript file does not show up properly under Project folder.

According to Windows folder structure, this js file (bootstrap.min.js) exists on same folder (without any hierarchy structure).

But, inside PhpStorm, it shows up under other js file.

Is there any reason it behaves like this?

Is it anything to do with Bootstrap?

enter image description here

enter image description here

Answer Source

But, inside PhpStorm, it shows up under other js file.

It's called "nesting" and it's purely visual thing -- no changes at actual file system level.

It's convenient when you have source and processed/generated files (e.g. TypeScript source and generated .js and .map files; Sass source and generated .css and .map files etc). This way you see only source (in which you are interested the most for editing purposes) and generated files are hidden (so more files can fit the screen).

Is it anything to do with Bootstrap?

No.

You can create another file (e.g. test.js and test.min.js) and it will be nested in a similar fashion.

Is there any reason it behaves like this?

It's a relatively new feature (v2016.3 or so).

To be precise it's an old feature (PhpStorm v6 or so) .. but before it worked based on File Watcher settings (and file must have been processed by File Watcher in order to be nested) .. while now (since 2016.3 I believe) it's completely separate functionality and matching happens by simple patterns.

As of 2017.2 IIRC you can edit those patterns as you wish (in earlier versions they were hardcoded) -- just choose File Nesting... in Project View panel content menu (e.g. under "cog" icon).

enter image description here