How to Configure Prettier on VS Code and IntelliJ

nhisyamj

Hisyam Johan

Posted on August 15, 2022

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

💖 💪 🙅 🚩
nhisyamj
Hisyam Johan

Posted on August 15, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related