Prettier Integration with VS Code

Learn how to integrate Prettier with VS Code.

Integrating Prettier with VS Code

As with ESLint, Prettier works best when integrated into your editor, allowing you to format your code with a single keystroke. Or, if you prefer, without you even asking.

Open the Extensions sidebar (^ X) and search for Prettier. At the top of the list, you should see an extension named “Prettier” by Esben Petersen. Click the green “Install” button.

Prettier is what’s known as a “formatter extension.” When you run the “Format Document” command ( F), VS Code checks the installed extensions to see if any of them want to perform formatting on the given document. Open up tests/palindromes.test.js, and run that command now.

Running the formatter changed the single-quotes to double-quotes. That’s because the Prettier extension automatically reads the Prettier configuration from the project, but it doesn’t automatically detect the ESLint bridge. For that, you will need to change a setting.

  • Let’s open up User Settings and add this line:

    // User Settings
        "prettier.eslintIntegration": true,

    Now try formatting tests/palindromes.test.js again. The double-quotes should go back to single-quotes, as expected.

  • Save the file and confirm that the results of running the format script match up with the results of running “Format Document” in the editor:

    $ npx prettier-eslint tests/palindromes.test.js
    1 file was unchanged
  • As handy as the “Format Document” command is, we can do better. Open the project’s Workspace Settings and add one final customization, editor.formatOnSave:

      "files.exclude": {
        "node_modules": true,
        "package-lock.json": true 
      "[javascript]": {
        "editor.tabSize": 2 
      "editor.formatOnSave": true 

Get hands-on with 1200+ tech skills courses.