How can I change the file type association of an existing file in WebStorm?

In Settings (or Preferences for mac) > Editor > File Types you can edit patterns by which a file gets associated as some type or other.

If you select the patterns for a file type you have wrongly selected (in your case Text type) you can remove the filename pattern with which was created to associate you file's filename as a wrong type.

Then click Apply > OK

---

I've had this problem in php storm 8.0.3 on OSX.

I was struggling with a single file that had been added as a text file, but I'd typed in the .js extension.

I tried deleting and recreating, renaming and renaming back, deleting .idea altogether. Nothing worked.

I found that PHPStorm had added the entire file name to the list of patterns for a text file.

....
*.txt
myfile.js
... etc

This was obviously overriding all other settings. And futhermore it was in the IDE Config not the project config. So I'm guessing every other project would have suffered the same issue.

Once I knew where to look it was easily fixed.

Navigate to:

PhpStorm > Preferences > Editor > File Types > <highlight> Text files

Then find myfile.js in the Registered Patterns panel and delete it. The file should immediately assume it's correct association.

---

Go to Settings->File Types and then click on "Text Files". You should see the file if you scroll down. You can then remove it with the association by selecting it and clicking the - (minus) button

---

Refer to File -> Settings -> IDE Settings -> File Types

In right select "Text files" in Reconigzed File Types then find in Registered Patterns your file and click remove your file

---

On Windows 8, I was able to remove the invalid association by going under File > Settings > Editor > File Types, then I selected "Text files" as the Recognised File Type and removed the invalid entry from the Registered Patterns block at the bottom.

---

So much answers and everything is close but no one as in my case.

A had an issue with .vue files. My old PHpStorm version did not track the .vue files, so I somehow associated them as .js files. However, this was a mistake because the syntax is different and I saw a lot of "mistakes" in the code.

Yeah, the solution is really in Settings (or Preferences for mac) > Editor > File Types dialogue. In the window you can see the list of possible associations. At the very bottom of the list you'll see the Vue.js Templates and I had no associations in the bottom window (see the pic), so I manually added *.vue association after clicking green "+".

https://i.stack.imgur.com/9LCQH.jpg

---

I have found in phpstorm that I can use the Refactor > Rename... function to associate a file of unspecified file type (e.g. a name with no extension) with a file type.

For example if I have a bash script named do_the_things I can Refactor > Rename it to do_the_things.sh which causes it to pick up the bash highlighting, then when I Refactor > Rename it back to do_the_things it keeps the bash highlighting.

---

This works in PHPStorm, i can assume in WebStorm should be something similar

Go to Preferences directory Here is how to find for your OS https://intellij-support.jetbrains.com/hc/en-us/articles/206544519-Directories-used-by-the-IDE-to-store-settings-caches-plugins-and-logs Find a file YOUR_PREFERENCES_DIRECTORY/options/filetypes.xml Edit it with any text editor and delete needed row, for example

Top Menu File->Invalidate Caches / Restart Enjoy

---

In the new WebStorm versions we can click on the file, select the option Override File Type and change for the type that we want.

Selecting the Override File Type option:

https://i.stack.imgur.com/Gj9yv.png

Selecting the file extension:

https://i.stack.imgur.com/yCIX7.png

---

I've found a solution, delete (o rename as .old) the file: C:\Users\.PyCharmCE\config\options\filetypes.xml

Es: C:\Users\goofy.PyCharmCE2018.3\config\options\filetypes.xml

---

In my case, the file in question, DepositBreakdownList.js, was associated with a "type" called "File type auto-detected by file content". Selecting it and then removing it (with the minus sign button) allowed the file to be treated as a proper JavaScript file again.

https://i.stack.imgur.com/yyNcL.png

Until I did that, I was unable to use Live Templates associated with JavaScript, even though the file extension was .js, which was just maddening.

---

After like an hour of searching and screwing around I found a fix:

I renamed the file (through the refactor command) to a temporary file name. Then I created a new file with the correct name with the .js extension and it worked, then I copied the code from the original to the newly created file with the correct extension.

I imagine selecting "new javascript file" and doing the same thing would also work.

---