DEV Community

Hisyam Johan
Hisyam Johan

Posted on

Configure Prettier on VS Code and IntelliJ


We will configure Prettier as our formatter for javascript especially for React JS. So, let's start!

Prettier Configuration on VS Code
First, open Visual Studio Code. Then go to extension and looking for plugin named Prettier.
Once installed, go to Preferences->Settings. Search for '@lang:javascript setting'. Click on 'edit in settings.json'

add this line:-

    "[javascript]": {
        "editor.formatOnSave": true,
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    "[javascriptreact]": {
        "editor.formatOnSave": true,
        "editor.defaultFormatter": "esbenp.prettier-vscode"
Enter fullscreen mode Exit fullscreen mode

Prettier Configuration on IntelliJ IDEA
execute at the command line yarn global add prettier
Open IntelliJ. Look for plugin name Prettier and install
Once installed, go to setting. Search for Prettier. Select the Prettier package. Tick on the On 'Reformat Code' action and On save. Click Apply. Now you are good to go.

Top comments (0)