CODEWITHSUNDEEP
reactjsvisual-studio-code
William Grasel
William Grasel

Reputation: 1239

Change language to JSX in Visual Studio Code

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?

Upvotes: 63

Views: 56245

Answers (10)

amir mohseni
amir mohseni

Reputation: 314

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.

Upvotes: 1

Mohd. Janisar
Mohd. Janisar

Reputation: 1

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

Upvotes: 0

Abhilash Reddy
Abhilash Reddy

Reputation: 1559

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.Check if JavascriptReact is selected?? enter image description here

Upvotes: 11

Panos
Panos

Reputation: 1834

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 ).

Upvotes: 6

Dionys
Dionys

Reputation: 3113

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.

Upvotes: 158

dbochen
dbochen

Reputation: 252

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"
}

Upvotes: 6

Brent Arias
Brent Arias

Reputation: 30165

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.

Upvotes: 3

Blank
Blank

Reputation: 4892

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

Upvotes: -2

Bill Wong
Bill Wong

Reputation: 29

Try using link on Mac or Linux.

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

Upvotes: -6

Kohei Sugimura
Kohei Sugimura

Reputation: 346

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

  1. 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.)
  2. change "jsx" to "js" in array "fileTypes".
  3. restart app, close opened js files, and reopen.

Upvotes: 7

Related Questions