Prettier Integration 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:

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