Code change:
<!-- Do Not Delete This! bugreporttemplate --<!-- Please read our Rules of Conduct: --<!-- Please search existing issues to avoid creating duplicates. --<!-- Also please test using the latest insiders build to make sure your issue has not already been fixed: --So, this issue is here for a long time in vscode, i've just noticed another issue with it. Basically, vsCode shows incorrect icons, see on the screensot: ! You see that it shows react icon for babel js and simple js icon for react js. I actually know that it may be better to use .jsx files for react project, but is there any way to fix this? and also Is there a way to automaticaly recognize whether the file is for react or simple javascript(by detecting import/require export/module.exports statements or smth else)?? This is the main question for the issue. <!-- Use Help Report Issue to prefill these. --- VSCode Version: 1.48.1(Latest) OS Version: Windows 10 2004 Steps to Reproduce: on the language selector in right bottom corner. in Javascript. <!-- Launch with to check. --Does this issue occur when all extensions are disabled?: Yes, and it also shows more incorrect variant. !
Maybe it is the issue with the icon pack extensions that I use, so if needed i'll provide my extensions list.
I don't see this in 1.48.1 ! Can you try without custom extensions? (close all windows and run code --disable-extensions`)
i've already mentioned in my post that i tried without extensions and provided a screenshot. It shows react icon for both js and react js. UPDATE: to be honest, I've just tried again with all windows closed and nothing changed. same result
I think you have the following setting configured. Is that correct?
Yep, you are right. Should i remove that setting entirely or change it? Also the main question was: can VSCode automatically detect whether js file is for react or vanilla js? UPDATE: I removed that setting and now it shows js icon for reactjs ! However, if I select react js the file icon becomes correct) !
It's a bug in the language selection dialog. For getting the langauge icon, we use the icon of the first file extension. In your case that file extension has be reassigned to a different language. I create a PR.
Great, good luck and notify me if some actions from my side will be needed)
I pushed a fix. You can already try it out in our insiders build or in the next stable release.
I am not sure this is fixed, what are the steps? I configured my settings as outlined. I see this: !
The screenshot looks correct. In the language selector, the entry has the correct JS icon. Verification steps: Seti theme add to settings:open a js file, verify it has the react icon open the language mode quick pick, filter for verify that JavaScript shows the JS icon and the JavaScript React the react icon
great, i'll check it in nearest stable update)
Ok, but the main reason I started this issue is if vscode can automatically detect reactjs files and set the propper icon. So please, tell me if I need to start a new issue or if there is a solution for this "problem"
Yes, a new issue is needed. That said, it's a difficult request as language detection has to be very efficient as there can be hundreds of files visible in a view. Analyzing the content and even parsing it or resolving imports would be very expensive. Fee free to file the issue anyways, but I don't think we can do it.

Related discussion:
text: } // Compute mode <ins> let currentLanguageId: string | undefined; </ins> let currentModeId: string | undefined; <del> let modeId: string | undefined; </del> if (textModel) { <del> modeId = textModel.getLanguageIdentifier().language; currentModeId = withNullAsUndefined(this.modeService.getLanguageName(modeId)); </del> <ins> currentModeId = textModel.getLanguageIdentifier().language; currentLanguageId = withNullAsUndefined(this.modeService.getLanguageName(currentModeId)); </ins> } // All languages are valid picks const languages = this.modeService.getRegisteredLanguageNames(); const picks: QuickPickInput[] = languages.sort().map((lang, index) => { <ins> const modeId = this.modeService.getModeIdForLanguageName(lang.toLowerCase()) || 'unknown'; </ins> let description: string; <del> if (currentModeId === lang) { description = nls.localize('languageDescription', "({0}) - Configured Language", this.modeService.getModeIdForLanguageName(lang.toLowerCase())); </del> <ins> if (currentLanguageId === lang) { description = nls.localize('languageDescription', "({0}) - Configured Language", modeId); </ins> } else { <del> description = nls.localize('languageDescriptionConfigured', "({0})", this.modeService.getModeIdForLanguageName(lang.toLowerCase())); </del> <ins> description = nls.localize('languageDescriptionConfigured', "({0})", modeId); </ins> } return { label: lang, <del> iconClasses: getIconClasses(this.modelService, this.modeService, this.getFakeResource(lang)), </del> <ins> iconClasses: getIconClassesForModeId(modeId), </ins> description }; });