How to Configure Prettier on VS Code and IntelliJ

Bismillah.

Prettier Configuration on VS Code

1. Install Prettier Plugin:

• Open VS Code.
• Go to Extensions and search for "Prettier".
• Install the Prettier extension.

1. Modify Setting

• Navigate to Preferences > Settings.
• Search for @lang:javascript settings.
• Click "Edit in settings.json" and add:

{
    "[javascript]": {
        "editor.formatOnSave": true,
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascriptreact]": {
        "editor.formatOnSave": true,
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    }
}

Prettier Configuration on IntelliJ IDEA

1. Install Prettier Globally:

• Run yarn global add prettier in the command line.

1. Install Prettier Plugin:

• Open IntelliJ.
• Go to the Plugins section and search for "Prettier".
• Install the Prettier plugin.

1. Modify Settings:

• Navigate to Settings.
• Search for Prettier.
• Select the Prettier package.
• Enable "On Reformat Code" and "On Save" actions.
• Click Apply.

Now, both VS Code and IntelliJ will automatically format your code using Prettier on save.

Buy Me A Coffee