DEV Community

Cover image for How to Configure Visual Studio Code’s Formatter Supports JSX?
Weerayut Teja
Weerayut Teja

Posted on • Originally published at wteja.com on

2

How to Configure Visual Studio Code’s Formatter Supports JSX?

Are you annoyed with Visual Studio Code’s formatter when working with JSX?

It happened to me earlier. I have the habit to format the code after coding to make the code more readable and beautiful. The VSCode formatter works well on many language, until I worked with JSX in JavaScript file…

It can turned the code like this…

Original JSX Code

transformed to this ugly guy…

Transformed JSX…

Simple Solution

Most simple solution is just click on Language Mode on the bottom right of Visual Studio Code and change from JavaScript to JavaScript React instead.

Click on JavaScript Language Mode

Then choose JavaScript React Instead

Now you can work without worry that formatter will breaks your JSX.

But wait … Do I need to do these steps on every *.js files?

No! Actually, you can tell Visual Studio Code to use JavaScript React language mode on every JavaScript file by default.

Configure Visual Studio Code Supports JavaScript React by Default

Go to user settings.
In Windows and Linux go to menu File > Preferences > Settings
In MacOS go to Code > Preferences > Settings

Go to settings

Search for files.associations, the files associations setting will be shown as the first result, click on Edit in settings.json

Edit File Associations

In the left panel it will be default user settings, which is usually empty, and in the right panel will contains user settings that will overrides the system settings. Your settings should be like example below.

Original

Your exists settings might be different, but we just add a new files.associations settings to let all JavaScript files support “javascriptreact” language mode by default. So you just adding these property and value:

{
    "files.associations": { "**.js": "javascriptreact" },
    "another-config": "xx"
}
Enter fullscreen mode Exit fullscreen mode

This make our life easier! I hope this guide will be helpful to you guys. Happy coding!

Image of AssemblyAI tool

Challenge Submission: SpeechCraft - AI-Powered Speech Analysis for Better Communication

SpeechCraft is an advanced real-time speech analytics platform that transforms spoken words into actionable insights. Using cutting-edge AI technology from AssemblyAI, it provides instant transcription while analyzing multiple dimensions of speech performance.

Read full post

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay