Change language to JSX in Visual Studio Code

Question

Visual Studio Code now supports JSX on 0.8 version, but looks like the only way to activate it is with a .jsx file extension. It is not on the list to change the language mode manually, the nearest option is JavaScriptReact, but it doesn't parse the JSX tags.

I'm in a project with a lot of .js files with JSX and I can't change it.

Is there any other way to use JSX syntax without the .jsx extension?

See discussion here https://github.com/Microsoft/vscode/issues/140 — jpierson, Nov 23 '15 at 19:46

score 158 · Accepted Answer · edited Jul 20 '17 at 19:57

158

Change your user settings or workspace settings as below:

// Place your settings in this file to overwrite the default settings
{
    "files.associations": {
        "*.js": "javascriptreact"
    }
}

Note: You might need to restart VSCode.

edited Jul 20 '17 at 19:57

Belfield

1,399
1
12
18

answered Jun 02 '16 at 13:04

Dionys

3,083
1
19
28

Works, did not even had to restart! Thanks – Shprink Jun 08 '16 at 04:48
It helps even in the runtime! Thanks a lot! – Vlad Dekhanov Apr 06 '17 at 07:41
3

What file and where? – Michal Ciechan May 12 '18 at 10:35
6

`Ctrl` + `,` -> User or Workspace Settings – Michal Ciechan May 12 '18 at 10:38
6

That turns EVERY js file into react files, even non-react js files like node modules. Maybe not the best way... – Paulin Trognon Aug 18 '18 at 14:11
@PaulinTrognon if you don't want all js files into react files you can change the regex. For instance you could change all files that ends with _.react.js_ to react. For that change `*.js` to `*.react.js`. – Dionys Aug 23 '18 at 06:23

score 11 · Answer 2 · answered Apr 24 '19 at 14:04

11

I would feel the below is the easiest way of formatting the code

Click on the bottom right on VS Code Editor where it says Javascript.

You will see an option to Select the language Mode, here you can search for JavaScriptReact and select. That's it. This should solve your problem.

1.

answered Apr 24 '19 at 14:04

Abhilash Reddy

1,519
1
10
11

1

This question came from a time were this option did not existed yet. Right now it is as simple as you said. – William Grasel Aug 15 '19 at 20:26
Why don't I see this at the bottom of my vs editor? I have the latest update of vs community and the latest version of react installed. and all extensions updated. Instead I see a line showing one compile error and left/right arrow to go through errors and an 'add to source control github line in blue. – Andrew H Jun 14 '20 at 20:01
It worked for me, but why simple Javascript did not work? – Tanvi Agarwal Jan 07 '23 at 12:59

Kohei Sugimura · Answer 3 · 2015-10-02T05:42:07.423

7

I could do it, but "not React JS files" are also show with JavaScriptReact mode.

open file C:\Program Files (x86)\Microsoft VS Code\resources\app\plugins\vs.language.javascript\syntaxes\javascriptreact.json (probably, need to open with administrator privileges.)
change "jsx" to "js" in array "fileTypes".
restart app, close opened js files, and reopen.

edited Oct 02 '15 at 05:42

answered Oct 02 '15 at 01:48

Kohei Sugimura

326
1
10

4

For anyone else wondering, on Mac the path is: /Applications/Visual Studio Code.app/Contents/Resources/app/extensions/javascript/syntaxes/JavaScriptReact.tmLanguage – Mike Lentini Nov 10 '15 at 00:52
1

It worked for me. on Mac, added "js" also to the array list in this file: /Applications/Visual Studio Code.app/Contents/Resources/app/extensions/javascript/syntaxes/JavaScriptReact.t‌mLanguage ` jsx js ` – Jyo Reddy Nov 23 '15 at 04:48
1

for Version 0.10.1 on Windows10, file to edit is changed. `C:\Program Files (x86)\Microsoft VS Code\resources\app\extensions\javascript\package.json`. and add `".js"` to `contributes.languages[0].extensions`. – Kohei Sugimura Nov 24 '15 at 00:24
@KoheiSugimura your solution worked but I also had to remove .js from contributes.languages[1].extensions and then it worked! – Rocklan Dec 14 '15 at 00:51

score 6 · Answer 4 · answered Oct 03 '16 at 15:58

Took me a while to figure this out but – JSX is already part of Emmet – which is part of VS Code. I've told Emmet to also (additionally) make JSX snippets available in regular JS files.

Just put this in your settings file:

"emmet.syntaxProfiles": {
    "javascript": "jsx"
}

score 6 · Answer 5 · answered Aug 04 '18 at 07:08

Although Dionys' answer works there is a better way to do this in more recent versions of Visual Studio Code.

Go to File>Prefrences>Settings and then scroll down and find "Emmet" open the tab and you should see the following text

  // Enable Emmet abbreviations in languages that are not supported by default. Add a 
  mapping here between the language and emmet supported language.
  //  E.g.: {"vue-html": "html", "javascript": "javascriptreact"}
  "emmet.includeLanguages": {},

So just follow the instructions and add "emmet.includeLanguages": { "javascript": "javascriptreact" } on the json at the right panel ( which will overwrite the user settings ).

Thank you. Thank works without any of Dionys' side effect. – Frazer Kirkman Feb 15 '19 at 17:24 — Frazer Kirkman, Feb 15 '19 at 17:24

Brent Arias · Answer 6 · 2016-01-12T16:31:30.567

3

There is now a VS Code extension that allows .js files to be treated as .jsx files.

Unfortunately the readme for the extension also warns:

when you install this extension you will loose all the existing language support provided for .js files

Fortunately VS Code is now very close to adopting Salsa, which means soon the js-is-jsx issue should be completely resolved.

edited Jan 12 '16 at 16:31

answered Jan 08 '16 at 18:43

Brent Arias

29,277
40
133
234

2

The link 500s and the plugin is not available anymore – Andy Ray May 22 '16 at 01:04

score 1 · Answer 7 · answered Sep 22 '21 at 09:53

1

Click on the bottom right on VS Code Editor where it says Javascript. You will see an option to Select the language Mode, here you can search for JavaScriptReact and select. That's it.

answered Sep 22 '21 at 09:53

amir mohseni

274
2
6

It worked for me, thanks! – acg Jul 01 '23 at 12:04

score 0 · Answer 8 · edited Aug 23 '20 at 06:03

0

1-Press F1 (in Visual Studio Code)

2-Type "extension" in the appearing text field

3-Pick "Extensions: Install Extension"

3-Type "ext install jsx"

4- install JS JSX Snippets

5-Restart Visual Studio Code

edited Aug 23 '20 at 06:03

Arghya Sadhu

41,002
9
78
107

answered Aug 23 '20 at 04:58

Mohd. Janisar

1
1

score -2 · Answer 9 · answered Dec 01 '15 at 20:30

-2

Just install an extension:

Press F1 (in Visual Studio Code)
Type "extension" in the appearing text field
Pick "Extensions: Install Extension"
Type "ext install jsx"
Restart Visual Studio Code

Source:

https://code.visualstudio.com/docs/editor/extension-gallery?pub=TwentyChung&ext=jsx https://marketplace.visualstudio.com/items/TwentyChung.jsx

answered Dec 01 '15 at 20:30

Blank

4,872
2
28
25

1

Does this work for *.js files? I tried installing this and it doesn't seem to help with errors on the xml style stuff. – sethreidnz Dec 10 '15 at 01:18
2

This extension appears to be a wrapper around a TextMate JSX.tmLanguage file. As the person who posted the question already pointed out, VSCode already supports highlighting JSX, they just need to do so on a JS file rather than only JSX. Therefore, installing this extension may not be helpful. – djabraham Dec 12 '15 at 06:54
Yes this extension does not actually do anything as far as I can tell. Also I cannot figure out how to contact the guy who made it. I'd love to use vsCode for my react dev (webstorm sucks in comparison IMO)... Any one else got any good ideas? – sethreidnz Dec 15 '15 at 19:49

score -6 · Answer 10 · answered Nov 21 '15 at 14:43

-6

Try using link on Mac or Linux.

ln -s index.ios.js index.ios.jsx

answered Nov 21 '15 at 14:43

Bill Wong

37
1
7

Change language to JSX in Visual Studio Code

10 Answers10

Linked

Related