why vscode is not recognizing react code as react javascript instead it format it as vanilla javascript

Question

I am using Prettier with format on save enabled but when I make any change in App.js and save it Prettier do destroy my code because it deals with it as plain javascript

I don't see react in the list of supported languages for prettier, maybe simply this? — Kaddath
– Kaddath, Commented Jan 31, 2019 at 14:19
It's common for another installed formatter to take precedence over prettier. Beautify is a common culprit. — kemotoe
– kemotoe, Commented Jan 31, 2019 at 14:23
I gave you a general answer since your question is so vague. Update it with more project information and I could provide a better answer. — serraosays
– serraosays, Commented Jan 31, 2019 at 14:53
kemotoe's comment is important. It's easy to install many 3rd-party extensions with overlapping functionality. Before anything else, one should inspect their VS Code extensions. — Kalnode
– Kalnode, Commented Jan 12, 2020 at 14:10

Gauri Bhosle · Accepted Answer · 2020-12-14 12:33:06Z

18

I am using create-react-app so it produce the main component App.js I am using .JSX in the other components but the problem is when I make any change to the App.js

I fixed this issue by changing the files associations setting in Vscode settings (specific to user workspace)

I just added this line

    "files.associations": {
        "*.js": "javascriptreact"
}

and worked perfectly for me.

edited Dec 14, 2020 at 12:33

Gauri Bhosle

5,5431 gold badge18 silver badges19 bronze badges

answered Jan 31, 2019 at 14:41

user9925236

Sign up to request clarification or add additional context in comments.

3 Comments

Kalnode Over a year ago

So what happens when you're working in non-React JS files, where you might prefer other formatting?

Muhammad Umer Over a year ago

you get emmet auto completes in nodejs that's what happens

Sujeet Over a year ago

@MarsAndBack You can create a directory /yourproject/.vscode/settings.json and paste above code there. Also make sure to add this directory in .gitignore

Andre Thompson · Accepted Answer · 2020-08-07 16:32:27Z

5

rename your react files as 'jsx' files instead of js files and keep your vanilla javascript as js files. This way vs code and prettier know that you are using react-javascript instead of normal javascript.

answered Aug 7, 2020 at 16:32

Andre Thompson

3804 silver badges10 bronze badges

Comments

Pierre-Olivier Vares · Accepted Answer · 2019-01-31 14:19:47Z

3

I don't read anything about react in prettier documentation

As far as I understand, react code should be put in .jsx files, not .js

https://reactjs.org/docs/introducing-jsx.html

React doesn’t require using JSX, but most people find it helpful as a visual aid when working with UI inside the JavaScript code

answered Jan 31, 2019 at 14:19

Pierre-Olivier Vares

1,77915 silver badges22 bronze badges

2 Comments

Predrag Beocanin Over a year ago

It's a personal preference, but most editors will behave better when it's just a .js file because it is just a .js file

Machado Over a year ago

JS files doesn't have JSX HTML templates inside, so it's not just a JS file.

Mark · Accepted Answer · 2019-01-31 14:28:13Z

0

If you are using ESlint as well you should follow these steps...

  yarn add --dev --exact prettier
  yarn add --dev eslint-plugin-prettier

Create a .eslintrc file in the root of your project with the following contents

  {
    "extends": "react-app",
    "plugins": ["prettier"],
    "rules": {
      "prettier/prettier": "error"
    }
  }

That should hopefully do the trick.

edited Jan 31, 2019 at 14:28

answered Jan 31, 2019 at 14:22

Mark

1,6982 gold badges15 silver badges28 bronze badges

Comments

serraosays · Accepted Answer · 2019-01-31 15:00:32Z

Prettier checks how your code is structured whereas VSCode syntax code highlighting controls how your code looks.

VS Code highlights code via extensions, not with Prettier. Out of the box, VS Code supports React and JSX natively. You also adjust VS Code's settings.json file. Here's an example off how that might look:

{
    "window.zoomLevel": 0,

    // Solarized-dark theme
    "workbench.colorTheme": "Solarized-dark",

    // Changes the highlight color in solarized-dark, which I can't see
    "workbench.colorCustomizations": {
      "editor.selectionBackground": "#5b455e",
      "editorBracketMatch.border": "#555",
      "editorBracketMatch.background": "#5b455e"
    },

    // Number of spaces in a tab
    "editor.tabSize": 2,

    // Insert spaces when pressing Tab. This setting is overriden
    // based on the file contents when `editor.detectIndentation` is true.
    "editor.insertSpaces": true,

    // Override whatever the files say and give me 2 spaces per tab
    "editor.detectIndentation": false,
    "workbench.startupEditor": "newUntitledFile",
    "explorer.confirmDelete": false,
    "explorer.confirmDragAndDrop": false,
    "javascript.updateImportsOnFileMove.enabled": "always"
  }

Prettier code formatting is usually controlled as part of a server, rolled up into something like Webpack or Parcel as part of a build script. If you're using create-react-app I think it's already wired in. If you want to adjust some of the settings, Prettier uses a simple JSON file called .prettierrc that belongs in the root of your project.

Example .prettierrc:

// Relaxes need for semicolons, lints for single quotes and requires trailing commas
{
  "semi": false,
  "singleQuote": true,
  "trailingComma": "es5"
}

Collectives™ on Stack Overflow

why vscode is not recognizing react code as react javascript instead it format it as vanilla javascript

5 Answers 5

3 Comments

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related