'VS Code Scatters Next JS Files [duplicate]

I am learning NextJS right now but I can't seem to proceed, as anytime I make a change and hit CTRL + S The codes become scattered. See screenshots below to better understand my plight:

Before Save enter image description here

After Hitting Save enter image description here

Please, how can I fix this? I am using VS Code version 1.53.2



Solution 1:[1]

Rename your js files into jsx extension. Example: index.js to index.jsx and save the file.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 N. Dani