DEV Community

Hisyam Johan
Hisyam Johan

Posted on • Updated on

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"
    }
}
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)