Search⌘ K

Prettier Integration with VS Code

Explore how to integrate Prettier with VS Code for seamless code formatting. Learn to configure ESLint integration, enable format on save, and add linting scripts to maintain consistent style automatically within your React projects.

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 ...