add this in your .js code,
/* prettier-ignore */
not allowed to post a picture yet, but this is the extensions i use.
the first one is called
beautify - helps with html, css, js
the second one is
rc-beautify - helps with ts, js, react.
here is what worked for me-
that pretty much did it for me after i saved the react file.
you can install an extension like react-beautify that helps you format your jsx code.
it is found here
i had similar problem, then i found out it was caused by 'beautify' extension. after i uninstalled the extension, everything is working fine.
i had to disable the js-css-html formatter extension in vsc. only solution to this problem
after reading many great suggestions and workarounds, i discovered that i could simply place my mouse arrow down over the bright blue horizontal bar at the bottom of vscode editor window - right click - which opens a popup list window - and deselected = "editor indentation".
you can double click
react in the select language mode to associate with
i just added all the combinations mentioned above.
- added this
- added this also
- deleted additional js formatting
- installed prettier
- turn on prettier and formatting
react-beautify mostly does the magic but fails if you have some other js formatter/beautifier already installed.
in my case, i had react-beautify and js-css-html formatter extension installed. i had to disable the js-css-html formatter for my current workspace.
install prettier (if not installed by default) and try to add this to your user or workplace settings:
do not put linebreak between return and the returned jsx expression.
(alt+shift+f) and check if works.
i struggled with this but finally found a solution. this is my settings.json
open the visual studio code settings. refer the image below to see how to navigate to the settings.
once the settings tab is open. if you want to make the settings changes for all the projects then select the user sub tab, if only for current project then select the workspace sub tab.
type "file associations" in the search text box and press enter.
click on add item.
- set item : *.js
above changes will start associating all
next open any
.js file in your project and right click and select format document. if you have multiple formatters then associate your favorite formatter. i have used prettier to handle my formatting.
alternatively, saving the file with a .jsx extension resolves this in vscode.
i had the same challenge and i am hoping to discover a better way of handling this issue in vscode.
i noticed your suggested work-around has to be done each time you open the react file with an extension of .js
you can prevent vsc from incorrectly formatting your jsx by adding an association in your settings.json
in the settings window search for associations, click edit in settings.json and then add:
change vscode preferences settings > user settings below:
- Visual studio code changes format (React-JSX)
- JSX or HTML autocompletion in Visual Studio Code
- Change language to JSX in Visual Studio Code
- Auto Import of React Components in Visual Studio Code
- React intellisense in Visual Studio Code
- Setting up proper React Code highlighting in Visual Studio Code?
- Breakpoints not working debugging React app in Chrome through Visual Studio Code on Windows 10 and WSL2
- How to get Visual Studio Code to navigate to a React component's source file?
- Visual Studio code error while saving react files?
- Visual Studio Code React not showing error even after adding jsconfig
- Visual Studio Code unbound breakpoint Node JS React TypeScript
- In Visual Studio 2012, I get warnings and squiggly lines when trying to write JSX with React JS
- Visual Studio Code doesn't autocomplete JSX attributes
- How to set up jsx syntax highlight and Intellisense in Visual Studio Code 1.5.2?
- Babel cannot compile simple JSX for React's render() function - Using Visual Studio Code
- Visual Studio Code Chrome Debugger doesn't set breakpoints inside generator function in React
- Visual Studio Code is not npm start-ing my React JS app when debugging
- React TypeScript type hint auto-completion does not work with React.forwardRef in Visual Studio Code
- Visual Studio React Typescript webpack-dev-server hot reload not working for component changes
- How to format React Codes in Visual Studio Code?
- Visual Studio Code functional snippet React
- Am I missing some code to view this video in a react app using visual studio code [react]
- Visual Studio Code / React - Is there a possibility to display all possible props somewhere?
- Formatting code with <pre> tag in React and JSX
- React project in Visual Studio 2017
- "Failed to load resource: net::ERR_HTTP2_PROTOCOL_ERROR" for React app after upgrading to Visual Studio 2019 16.10.0
- Auto Import in Visual Studio Code for React-Native Development
- Visual Studio Code [eslint] Delete 'CR' [prettier/prettier] on windows
- Visual Studio Code autocomplete when I press "." key. Any way to disable?
- How to debug react native apps in visual studio code?
More Query from same tag
- Redux Reducer - How to update an object value without mutating the state?
- Getting undefined values in ReactJs
- React --> Warning: validateDOMNesting(...): <p> cannot appear as a descendant of <p>
- How to add psuedo element :after using REACT
- CSS 100% height not working in React app
- How to define css variables in style attribute in React and typescript
- React Recharts -> Tooltip problem with LabelList in Scatter chart
- How do I disable a fieldsset using a variable instead of the "disable" word
- Handle Reset for specific field formik
- How can i make chart to show price in range?
- using react-router and react-router-redux. when i go to localhost:9000/ it works fine, but not localhost:9000/login
- Rendering raw Html sources in React using doesn't show the body style of the sources
- Cannot read property 'selectionEnd' of null using React + Jest + Datepicker + TextMask
- TypeError: Cannot read property 'forEach' of null React
- Trigger function of a specific component - ReactJS
- React setState does not work simultaneously
- A <Router> may have only one child element Error in react
- Unexpected token error when using Gulp babelify to process ReactJS JS file
- Wrapping img src in " " when rendering react state
- React with Antd Component Modal Form with state issue
- ImmutableJS Map, how to iterate over a map and return a modified result
- Highcharts issue with max value (100) - React
- React: Event handler method for Backspace
- React Select Tag :: changing select options based on another select
- Why aren't the Tailwind classes taking effect in my Vite React project?
- MUI v5 - Extending Typography variant in TypeScript creates error "No overload matches this call"
- prevstate in react hook
- Unexpected Snackbar+Alert behavior
- React bootstrap modal context
- Why set property equal to itself in DOM render - React.js